DEV Community

Otavio Monteagudo
Otavio Monteagudo

Posted on

Converting Code-Flavored Markdown to PDF

Intro

If you are like me, you might like to take markdown notes while doing a video course, reading a technical book or just noting down what worked out in a project and why. You might also want to render these markdown files to PDF format for easy referencing in the future or maybe printing these notes to have a physical reference nearby. Fear not, for this article will spare you some potential trial and error.

Best Method Overall: Markdown to PDF VS Code Extension

Of everything I tried, the one that provided the best results out of the box is the Markdown PDF VS Code extension method.
Just install it and, with your markdown file focused on VS Code, spring up the Command Palette with F1 or Ctrl + Shift + P (Cmd + Shift + P on Macs), type 'export' and you'll see the relevant commands provided by this extension prefixed with Markdown PDF: .
Select which format you want to export your content to (pdf and also html and most common image formats).

It will first create a temporary HTML file to be rendered as PDF by the extension's Chromium engine in the background and voilà, you'll likely have your problem solved: the output pdf will be exported to the same directory and with the same name as the markdown file you have highlighted (you can also configure where to send outputs in the extension settings).

The Good

This is the only method that kept syntax highlighting and also broke lines as expected; in the other ones, if a line of code overflowed the width of the designated code block space, they would have just kept on going towards scrolling infinity instead of rendering into a new line.
You can also fiddle with the extension's CSS to have maximum customization. See configuration options in the extension's description.

The Bad

Nothing too bad about it in my opinion; it adds unasked for headers and footers to the output PDF, but this can be turned off in the extension settings.

To turn the headers and footers off, go to the extension settings (File > Preferences > UserSettings or Workspace Settings in VS Code; Code > Settings > Settings in Macs), then find Extensions in the left-side menu and find Markdown PDF in there.

You'll find both "footer template" and "header template" options with some default HTML in there. Just erase the HTML and that's it.

Alternative 1: Dilliger.io

Simply access https://dillinger.io and paste your markdown code there. It has the option to export to PDF, as well as some other formats.

The Good

As convenient as it gets. Also supports syntax highlighting.

The Bad

It will break references to any local files you have in your markdown; I had images in mine so this did not work for me. Also has limited customization options.

Alternative 2: Python grip

You'll need to have pip installed. Install grip with pip:

pip install grip
Enter fullscreen mode Exit fullscreen mode

Then, use the grip command with the markdown file as input:

grip README.md
Enter fullscreen mode Exit fullscreen mode

You'll see in the command's output a localhost address with an assigned port (usually 5000 or 6419). Go to that address in your chosen browser and you'll see your markdown rendered. Save it as PDF.

The Good

Pretty easy to run, works for simple conversions.

The Bad

No syntax highlighting, and no line breaks inside code blocks.

Top comments (1)

Collapse
 
johannes_k_rexx profile image
johnblommers

About grip:

  1. Better to install it with pipx install grip for easy virtual environment isolation
  2. This is not meant for production yet per grip itself
  3. grip automatically refreshes the browser when you save an edit in the Markdown file