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 I accomplish that? What code do I need to change in the resulting github html page (that I save) such that the printout will honor the look & feel of the markdown?

So far the only clue I have is this one: https://makandracards.com/makandra/4947-how-to-print-github-wiki-pages But it is more of a utilitarian (non-programmatic) workaround which doesn't really work because the markdown interpreter in use isn't as forgiving as the one running on the GitHub websites so it fumbles.

Answer 1

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

Answer 2

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 3

Here's a super simple solution: Simply select all the text in the readme that you want to print, then print and choose "Only selected text".

This worked perfectly in Chrome (including images) and required no javascript or external sites or downloading or building software.

This is what I tested on: https://github.com/kroitor/gjk.c/blob/master/README.md

Answer 4

Another option is pandoc. After installing (it supports Windows, Linux and Mac OS), the command would be along the lines of pandoc file.md -f markdown --smart -s -o file.pdf

Then print the resulting PDF file.

---

There is also this online converter, which produced the nicest output for me: http://www.markdowntopdf.com/

Pandoc has an online demo as well.

Update 2020: on macOS Catalina this command worked for me:

brew cask install basictex
pandoc README.md -f markdown+smart -s -o out.pdf --pdf-engine=/Library/TeX/texbin/pdflatex --pdf-engine=xelatex

Answer 5

If you are a Mac-User, another great possibility is to use the "Reader"-Functionality in the Safari web browser.

Just open the markdown-File and click the "Reader"-Button in the top right-corner.

Then just print the page with the command "CMD + P".

Works like a charm.

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!

Answer 7

I made a Chrome extension that does just this: GitHub Markdown Printer. It's a one-click solution for printing markdown files exactly how they appear on GitHub.

Steps:

1. Install the Chrome extension
2. Go to any page on GitHub/GitHub Enterprise with a markdown preview
3. Click the GMP icon to open the print dialog and either print or save as PDF

Check out the repo for more info.

Answer 8

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 9

clone the repo

gem install bluecloth

• render the markdown files into html
• open file on your filesystem in your browser
• print from your browser

http://deveiate.org/projects/BlueCloth

you can find examples of the api here: http://deveiate.org/projects/BlueCloth/browser/spec/bluecloth_spec.rb

Answer 10

I recommend taking a picture with http://awesomescreenshot.com/, then cropping the image and printing (I just did this and it worked for me :).

Answer 11

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 12

Simple Hack:

I've been opening the markdown file in something like Marked or the online tool Dillinger and then print from there. Some of these tools allow you to set the formatting to Github or other styles.

A better way:

Since I first wrote the above answer I found a better way:

I've discovered a better way than what I said earlier.

1. Git clone your wiki to a local directory

2. Use gitbook & Calibre's ebook-convert to generate the PDF as per the instructions in https://github.com/GitbookIO/gitbook

   • On the Mac, you have to symlink the ebook-convert from within the /Application/calibre.app directory to someplace suitable before running the gitbook pdf command, with a command like:

   ln -s /Applications/calibre.app/Contents/console.app/Contents/MacOS/ebook-convert /usr/local/bin

Answer 13

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 14

Try grip.

pip install grip
grip markdown.md

Then it is hosted on a local port. You can then print or save to PDF through your native OS print dialog from your favourite browser.

See here.

Answer 15

I use this page http://www.markdownprint.com, really simple to use and produces markdown using the github style (which looks really good). Highly recommend!

Answer 16

Simply convert MD file into PDF

You may download your .md file and upload it here to convert it into a pdf file. Which you can easily print.

Answer 17

http://github.com/github/markup

You don't mention a language preference, but this is the Ruby library GitHub itself uses to render the markup files. It has the advantage of supporting the various markups GitHub supports (textile, rdoc etc). Rendering .markdown files has a dependency on the redcarpet markdown parser:

http://github.com/tanoku/redcarpet

Answer 18

If you have an Instapaper account, navigate to the README.md file, save the link to Instapaper, then open the "text" option in Instapaper on that link. Most of the "clutter" is removed and the page prints well.

Answer 19

I used MarkdownPad and printed the HTML to a PDF writer. If you have Pro you can export to PDF directly.

Answer 20

Works for Chromium browsers and "current" GitHub html page structure

1. Create a bookmark
2. In the Address field enter :

javascript:var content = document.querySelector('.repository-content'); 
var toc = document.querySelector('#wiki-rightbar');
toc.innerHTML = '';
var wb = document.querySelector('.has-rightbar .wiki-body');
wb.style.marginRight = '0px';
var body = document.querySelector('body'); 
body.innerHTML = ''; 
body.appendChild(content);
window.print();

Selects the Wiki text, removes and formats the table of content, replaces the body content and calls the printer.