Skip to content

Instantly share code, notes, and snippets.

@abdulnine7
Created October 8, 2023 20:38
Show Gist options
  • Save abdulnine7/3337777a9c7b96b4d7cb813d9c3e3f66 to your computer and use it in GitHub Desktop.
Save abdulnine7/3337777a9c7b96b4d7cb813d9c3e3f66 to your computer and use it in GitHub Desktop.
Transform any GitHub Markdown (MD) file into a print-friendly format by removing extraneous UI elements. Ideal for converting READMEs or other documentation to PDF using your browser's print feature. Simply navigate to your desired MD file on GitHub, paste the script into your browser's console, and print.
// Removes the header which contains the main GitHub navigation and search bar.
document.querySelector('header').remove();
// Removes the main container that surrounds the entire page content, which may contain additional UI elements.
document.querySelector('.container').remove();
// Removes the sticky header which displays when scrolling, typically showing repository name and star/fork/watch actions.
document.querySelector('#repos-sticky-header').remove();
// Removes a box element. Note that the class `.Box-sc-g0xbh4-0.kLxXov` seems auto-generated and may change over time.
// This class might refer to some specific element on the page, but given the nature of auto-generated class names, it could change.
document.querySelector('.Box-sc-g0xbh4-0.kLxXov').remove();
// Removes the banner that displays details about code size. This appears on code-heavy pages.
document.querySelector('.react-code-size-details-banner').remove();
// Removes any additional bottom padding added for code view. This helps to make the view compact.
document.querySelector('.react-code-view-bottom-padding').remove();
// Adjusts the padding of the clipboard copy element to zero. This element is used to copy code snippets or file paths.
document.querySelector('.js-snippet-clipboard-copy-unpositioned').style.padding = "0";
// Removes borders from elements with the class `.flDsrw`. Again, this class seems auto-generated and could refer to any specific UI component.
document.querySelector('.flDsrw').style.border = "none";
// Adjusts the height of all horizontal rules (`<hr>`) to make them thinner, providing a cleaner visual separation.
document.querySelectorAll('hr').forEach(el => {el.style.height = "1.25px"});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment