How to print from GitHub

Question

If I want to print a markdown file from GitHub as it appears on screen, for example: https://github.com/RestKit/RestKit/blob/master/Docs/Object%20Mapping.md

Then how can

Answer 1

Here is a bookmarklet that works perfectly for me:

1. Copy the contents of the bookmarklet Gist, reproduced below as a backup.
2. Create a new bookmark in the toolbar of your browser, give it a fitting name.
3. Put that one line of code in the URL field.

If you now go to a Markdown page on Github and click the bookmark it will reformat the page and change the CSS so that it looks the same as on screen when you print. Now just print the page.

Bookmarklet contents:

javascript:(function(e,a,g,h,f,c,b,d)%7Bif(!(f=e.jQuery)%7C%7Cg%3Ef.fn.jquery%7C%7Ch(f))%7Bc=a.createElement(%22script%22);c.type=%22text/javascript%22;c.src=%22http://ajax.googleapis.com/ajax/libs/jquery/%22+g+%22/jquery.min.js%22;c.onload=c.onreadystatechange=function()%7Bif(!b&&(!(d=this.readyState)%7C%7Cd==%22loaded%22%7C%7Cd==%22complete%22))%7Bh((f=e.jQuery).noConflict(1),b=1);f(c).remove()%7D%7D;a.documentElement.childNodes%5B0%5D.appendChild(c)%7D%7D)(window,document,%221.3.2%22,function($,L)%7B$('%23header,%20.pagehead,%20.breadcrumb,%20.commit,%20.meta,%20%23footer,%20%23footer-push,%20.wiki-actions,%20%23last-edit,%20.actions,%20.header,.site-footer,.repository-sidebar,.file-navigation,.gh-header-meta,.gh-header-actions,#wiki-rightbar,#wiki-footer,.commit-tease').remove();%20$('%23files,%20.file').css(%7B%22background%22:%22none%22,%20%22border%22:%22none%22%7D);%20$('link').removeAttr('media');%7D); var removeMe = document.getElementsByClassName("file-header")[0]; removeMe.parentNode.removeChild(removeMe);

Answer 2

Super easy way that require nothing more than Chrome:

You can spoof the user-agent, telling you are a mobile device, to get a nice printable version.

The way I do it - there are plenty of ways - I use Chrome the Chrome devTools "Emulation" feature to emulate an Android device, e.g. a Samsung Note 3, then in the screen sub-section I remove "Emulate screen", to get full resolution, then I print.

Answer 3

Another way is just download the markdown from GitHub or Bit Bucket and open it with eclipse. You will get the preview tab in the editor pane. From file menu select print. Simple way, however I am taking liberty to assume you already have eclipse installed usually most of developers have it.

BR

Answer 4

Using GitPrint is great way to directly print files from Github.

Answer 5

I'm using the github-wiki-print browser extension to print GitHub wiki pages.

I think you might edit its manifest.json file to print any markdown file on GitHub repos.

Answer 6

Found an awesome tool that achieves the printing results that I asked for: http://plessl.github.com/wkpdf/

Here's a quote from its website: "If you want to render a website with all the graphical icing to exactly match the view in a browser, you can explicitly force the use of the CSS screen stylesheet and enable the printing of background images as in the following example ..."

So I ran:

wkpdf --source https://github.com/RestKit/RestKit/blob/master/Docs/Object%20Mapping.md
      --stylesheet-media screen
      --print-background yes
      --output printIt.pdf

and it was magical!