Skip to content

Instantly share code, notes, and snippets.

@sshymko
Last active December 10, 2019 20:52
Show Gist options
  • Save sshymko/ea7fed4e316cba7f744970b065224272 to your computer and use it in GitHub Desktop.
Save sshymko/ea7fed4e316cba7f744970b065224272 to your computer and use it in GitHub Desktop.
CSS styling to print GitHub Markdown docs
/* Hide GitHub UI controls */
header,
.pagehead,
.footer,
.repository-content > :not(.Box),
.repository-content > .Box--condensed:not(#readme),
.Box-header {
display: none !important;
}
.Box,
.Box-body {
border: 0 !important;
}
/* Break page before chapter when current page has <30% room left */
h1, h2, h3, h4, h5, h6 {
page-break-inside: avoid !important;
}
h1:not(:last-of-type)::after,
h2:not(:last-of-type)::after,
h3:not(:last-of-type)::after,
h4:not(:last-of-type)::after,
h5:not(:last-of-type)::after,
h6:not(:last-of-type)::after {
content: "";
display: block;
height: 30vh;
margin-bottom: -30vh;
}
@sshymko
Copy link
Author

sshymko commented Jul 25, 2019

Bookmark the following in your browser as "Print GitHub":

javascript: var css = 'header, .pagehead, .footer, .repository-content > :not(.Box), .repository-content > .Box--condensed:not(#readme), .Box-header {display: none !important} .Box, .Box-body {border: 0 !important} h1, h2, h3, h4, h5, h6 {page-break-inside: avoid !important} h1:not(:last-of-type)::after, h2:not(:last-of-type)::after, h3:not(:last-of-type)::after, h4:not(:last-of-type)::after, h5:not(:last-of-type)::after, h6:not(:last-of-type)::after {content: ""; display: block; height: 30vh; margin-bottom: -30vh;}'; var style = document.createElement('style'); style.type = 'text/css'; style.media = 'print'; style.appendChild(document.createTextNode(css)); document.head.appendChild(style); window.print(); document.head.removeChild(style);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment