On Windows, cannot print a Medium blog post without code being cropped out

7

2

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

enter image description here

gets cropped to 10 lines of code:

enter image description here

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:

enter image description here

But when I print to PDF, the footer is gone:

enter image description here

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.

DeltaIV

Posted 2017-10-25T15:00:30.870

Reputation: 233

1"How can I print the post without cropping the code snippets?" - Sadly you don't. Your suspicious are correct. However, the author submitted and formatted the code on their blog, is adding that footer and is likely causing Chrome to dislike the page. Oddly enough I went to the page and see no code but mention of code. Github is also not blocked. I will take a look on a different network later and use my virtual lab to see what options there might be. – Ramhound – 2017-10-25T15:17:52.040

1Have you tried highlighting all the code and printing “selection?” How about using the “View Raw” link? – Appleoddity – 2017-10-25T15:27:31.303

@Appleoddity thanks for your interest. I tried highlighting the code: see edited question. Concerning the "View Raw" link, if you click on it you can see that Chrome opens another page, where only that code snipped is visualized, and it's visualized as raw text (no syntax highligthing), but all the rest of the post is lost. So this is not a solution. – DeltaIV – 2017-10-25T17:41:21.057

@Ramhound it's very interesting that you don't see the code. I also cannot see it straight away when I open the page, but in my case it's just a question of loading time: after just a couple seconds, the rectangles where the code should be become populated with code. It would be great if you could have a look at this issue from your lab. – DeltaIV – 2017-10-25T19:52:55.050

Answers

1

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

sleske

Posted 2017-10-25T15:00:30.870

Reputation: 19 887

2

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.

enter image description here

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.

Journeyman Geek

Posted 2017-10-25T15:00:30.870

Reputation: 119 122

thanks! I will test it today and let it know about how it works for me. – DeltaIV – 2017-10-30T11:22:24.643

I had to make some tweaks, but in the end it worked. I'm surprised that it only works by printing through Paint - using paint.Net doesn't work, for some reasons. – DeltaIV – 2017-10-31T11:48:58.273

1heh, Its an abuse of a feature which I suspect is meant for printing posters. PDN uses the regular photo printing API which is unsuitable for this. This is multiple hacky uses of things ;p – Journeyman Geek – 2017-10-31T11:57:20.880

Asked: 2017-10-25T15:00:30.870

Viewed: 500 times

Active: 2017-10-30T18:37:43.363