pulkitsinghal
pulkitsinghal

Reputation: 4084

How to print from GitHub

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.

Upvotes: 129

Views: 116864

Answers (22)

Franklin P Strube
Franklin P Strube

Reputation: 2215

If you want to print GitHub README or save as a PDF you can use a tool that I created called SlickPDF (link below).

https://slickpdf.com/blog/new-feature-github-readme-to-pdf

Upvotes: 0

Aakash
Aakash

Reputation: 23865

In the top right corner, there's a reader button (highlighted in red):

reader button in URL bar

...once you click on it, you'll see the markdown page in reader mode:

markdown page in reader mode

...now print the document with CTRL + P

print page view

Good Luck!

Upvotes: 1

kitsune
kitsune

Reputation: 354

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 install pandoc
brew install --cask basictex
pandoc README.md -f markdown+smart -s -o out.pdf --pdf-engine=/Library/TeX/texbin/pdflatex --pdf-engine=xelatex

Upvotes: 18

Boris Terzic
Boris Terzic

Reputation: 10948

Here is a bookmarklet that works 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. It will also automaticaly trigger the printing dialog to pop up.

Bookmarklet contents:

javascript:document.body.appendChild(document.querySelector("#readme"));document.querySelector("header").remove();document.querySelector(".application-main").remove();document.querySelector("footer").remove();window.print();

Upvotes: 74

A. K.
A. K.

Reputation: 38260

In Firefox it is super easy.

  1. Select the portion to be printed, by simply dragging mouse from begin to end of the area to be printed.
  2. Go to the print menu File -> Print (Ctrl-P will also work)
  3. Click 'Selection' instead of Original under the 'Format' option of the print menu
  4. Hit Print. The preview should also show what is going to be printed.

Upvotes: 0

Nishant Shah
Nishant Shah

Reputation: 2092

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.

Upvotes: 1

Jerry Wu
Jerry Wu

Reputation: 185

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.

Upvotes: 8

Johan O
Johan O

Reputation: 402

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!

Upvotes: 1

Srekel
Srekel

Reputation: 2303

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

Upvotes: 46

crocteamgg
crocteamgg

Reputation: 115

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.

Upvotes: 0

ozoli
ozoli

Reputation: 1444

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.

Upvotes: 2

Jeet
Jeet

Reputation: 5659

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

Upvotes: 1

Tobias
Tobias

Reputation: 5108

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

Upvotes: 0

Robert J Berger
Robert J Berger

Reputation: 998

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

Upvotes: 2

Julien Bérubé
Julien Bérubé

Reputation: 1266

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.

Upvotes: 1

pmuens
pmuens

Reputation: 798

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.

Upvotes: 15

Giovanni Cappellotto
Giovanni Cappellotto

Reputation: 4875

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.

Upvotes: 3

Ralph
Ralph

Reputation: 32304

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.

Upvotes: 0

DTrejo
DTrejo

Reputation: 1347

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

Upvotes: 2

pulkitsinghal
pulkitsinghal

Reputation: 4084

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!

Upvotes: 5

Pero P.
Pero P.

Reputation: 26992

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

Upvotes: 0

Jed Schneider
Jed Schneider

Reputation: 14689

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

Upvotes: 2

Related Questions