On Windows, cannot print a Medium blog post without code being cropped out
My system: Windows 10 Pro x64 9200, HP EliteBook 1040, Chrome Version 62.0.3202.62 (Official Build) (64-bit)
I would like to print out this Medium blog post:
https://medium.com/@keeper6928/how-to-unit-test-machine-learning-code-57cf6fd81765
however, when I try, the code chunks get cropped. For example, this code chunk, which is actually 15 lines of code long
gets cropped to 10 lines of code:
Exactly the same issue happens if I print to PDF, instead than sending my print job to our follow-up print queue.
I think the issue is somehow related to GitHub...apparently, the blogger used some GitHub service to share his code gists inside his blog post, but this service "doesn't play nice" with the printing from Chrome function. The reason why I believe this, is that when I view the page from Chrome, the code chunks are shown in their entirety, including the footer which explains that the code is hosted on GitHub:
But when I print to PDF, the footer is gone:
Just for your convienience, I include a link to the PDF obtained by printing to PDF the blog post. How can I print the post without cropping the code snippets?
EDIT as suggested in comments, I tried highlighting the code in a snippet, and then selecting "Print" from the Chrome top right menu. In this case, the snippet prints correctly, however this still doesn't solve my problem...unless I print each snippet separately, and then physically glue them on the printed blog post :) a bit too low-tech, even for me.
One alternative is to go the screenshot route, as explained in Journeyman Geek's answer.
Another option: Use a word processor.
- Open the page, select all (Ctrl-A on most systems)
- copy (Ctrl-C)
- paste (Ctrl-V) into a word processor (LibreOffice, MS Word, whatever)
This will usually retain most formatting and images, and lets you easily fix up what is wrong.
In this specific case, the code snippets don't come along (presumably because they are seperate IFrames in the HTML source). However, you can copy them individually and paste them in at the right place. A bit tedious, but for a few snippets it's doable.
Disadvantages:
- some manual work
- does not exactly preserve the look as in the browser
Advantages:
- more flexibility
- you get full print resolution for the text
Needs a bit of postprocessing after this (or my screen's too wide) but firefox has a nice tool for screenshotting a whole page as part of its GCLI - or graphical CLI
Hit shift-f2 or go to tools -> web developer -> developer toolbar.
There, type in "screenshot filename.png --fullpage" and that takes a screenshot of what you see on the screen like this
I'd then crop the edges (I used paint.net for this) since its too wide, then print it in paint (yes paint). Go to print preview - and you can set it to print to 1 x something pages = I set 10, then decided 6 would work.
The 1 width is essential - since it basically sets/scales the width of the page
Then print to PDF, test to tweak, and print physically from the PDF once you know it works.