Markdown To Pdf

| Posted on by



Easy online solution: dillinger.io. Just paste your Markdown content into the editor on the left and see the (html) preview on the right. Then click Export as on the top and chose pdf. It's based on the open source dillinger editor. The main goal of this post ist to show you how you can create PDF files (using R Markdown, knitr and LaTeX) so you should select PDF, and you might as well enter your name and a title for the. Offline Markdown to PDF! Choose & Edit & Transform without any network requests. Md2pdf - Markdown to PDF You need to enable JavaScript to run this app.

A markdown-converter for Visual Studio Code

MarkdownConverter is a Visual Studio Code-extension which allows you to export your Markdown-file as PDF-, HTML or Image-files. It provides many features, such as DateTime-Formatting, configuring your own CSS-styles, setting Headers and Footers, FrontMatter and much more. Determine whether you’re running 32-bit or 64-bit Windows. Before installing anything, you should.

Pandoc markdown to pdf

What's MarkdownConverter?

MarkdownConverter is a Visual Studio Code-extension which allows you to export your Markdown-file as PDF-, HTML or Image-files.
It provides many features, such as DateTime-Formatting, configuring your own CSS-styles, setting Headers and Footers, FrontMatter and much more.

Usage

  1. Set your desired conversion-types or skip this step to convert your markdown-file to PDF:
    • Open up your Visual Studio Code-Settings and set markdownConverter.ConversionType to an array of types:
  2. Optionally set the pattern for resolving the destination-path:
  3. Open up the command pallet (Ctrl, Shift+P) and search one of these commands:
    • Markdown: Convert Document (Markdown: Dokument Konvertieren in German) or mco (mk in German) for short
    • Markdown: Convert all Documents (Markdown: Alle Dokumente konvertieren) or mcd (madk in German) for short
    • Markdown: Chain all Documents (Markdown: Alle Dokumente verketten) or mcad (madv in German) for short
  4. Press enter and wait for the process to finish

Variable Substitution

Before the conversion, the markdown-file is preprocessed using Handlebars. Variables (such as {{ Author }}) are automatically replaced with the corresponding attribute-value.

Example:

Following attributes are predefined and may be overridden by the document-attributes:

  • CreationDate
    A Date-value indicating the time of the creation of the markdown-file
  • ChangeDate
    A Date-value indicating the time of the last change of the content of the markdown-file
  • CurrentDate
    A Date-value representing the time of the conversion
  • Author
    The assumed name of the author according to GIT_AUTHOR_NAME, GIT_COMMITER_NAME, HGUSER, C9_USER, git, wmic or osascript
  • Attributes declared inside the vscode-settings (see Settings)

Date-Formatting

Date-attributes are being formatted by default. MarkdownConverter allows you to customize the format of every individual date.

You can format an individual date by using the FormatDate-helper like this:

Example:

You can override the default date-format for a document by adding a DateFormat attribute:

Example:

Custom Date-Formats

There are two predefined date-formats, namely Default and FullDate, which represent date-formats for your current locale.

If you use a specific date-format repeatedly you might want to specify a custom date-format using the markdownConverter.DateFormats setting (see [Settings][#settings]):

settings.json

Example

Settings

This is a list of the most important settings. To see all of them, install the extension and have a look into the settings-dialogue of vscode.

  • markdownConverter.DestinationPattern:
    Allows you to specify a pattern for resolving the destination-path. Following variables are substituted:
    • ${workspaceFolder}: Either the path to the workspace or the directory which contains the document.
    • ${dirname} The relative path from the ${workspaceFolder} to the directory which contains the document.
    • ${basename}: The name of the document-file without extension.
    • ${extension}: The file-extension of the destination-datatype.
    • ${filename}: The name of the document-file.
  • markdownConverter.ConversionType:
    The types to convert the markdown-document to.
  • markdownConverter.DefaultDateFormat:
    The date-format to apply to all dates by default.
  • markdownConverter.DateFormats:
    A set of names and their corresponding custom date-format.
  • markdownConverter.ChromiumArgs:
    Allows you to pass specific arguments to chromium for the conversion (such as --no-sandbox or --disable-gpu).
  • markdownConverter.Parser.SystemParserEnabled:
    This setting allows you to enable or disable the usage of vscodes internal markdown-parser. Using the internal markdown-parser might be very useful to you as it grants you access to all markdown-plugin extensions installed to your vscode.
  • markdownConverter.Parser.Toc.Enabled:
    Allows you to automatically include a table-of-contents for your document in your converted files.
  • markdownConverter.Document.Attributes:
    Using this setting you can specify default attributes which are applied to all your documents.
  • markdownConverter.HeaderTemplate and markdownConverter.FooterTemplate:
    The html-sourcecode of the header- and footer-section. Variable-substituion is supported here as well. Page-numbers and similar information can be included as described in the puppeteer docs.
  • markdownConverter.DefaultStyles:
    Allows you to disable the default styles. This might be useful if you want to create your own stylesheet from scratch.
  • markdownConverter.StyleSheets:
    A set of stylesheets to include in your document.

Markdown To Pdf Npm

In this post we will be taking a look at how to generate beautifully formatted documents with Hugo.The idea is to have a markdown to pdf conversion pipeline.

So, let’s get started!

Why Hugo

My previous post was dedicated to a markdown to pdf conversion technique, which involved pandoc.There I explored how to convert markdown to pdf, without using latex.

This is purely, to have a very lightweight document writing setup, it is in no way supposed to replace latex.

Pdf

Hence, in this post we will be doing the same thing, but with Hugo.So why did I choose Hugo?

First of all, Hugo is a fantastic tool for generating static website (and it can do much more than that, rest assured (there will be much more posts about it)).I use Hugo basically all the time.

What I like very much about Hugo, is the fact that it is distributed in a single binary (since it is written in Go).This makes it portable across devices.Hence, if you have a binary for Windows, Linux, MacOS and even one compiled for arm64 CPU’s, you can use it basically on all of your devices, without installation.It just works, even on my Android device!

Last but not least, Hugo is extremely easy to use and basically explains itself.Yet at the same time, you can really do a lot with it (by the way this website is build fully using Hugo).

Using a theme for appropriate PDF styling

It is very easy to have a Markdown file rendered as HTML, but the problem is that the styling is wrong for a document, which will be outputted as a pdf.

Basically the text is way to large and the borders are way off, for a A4 pdf document.

Fortunately, I have thrown together a very simple theme for Hugo, that presents just the right styling.This theme can be found on this Github repository.

Installation and usage

The theme installs right as any other Hugo theme:

(in your hugo site directory)

Add theme = 'hugo-formatting-theme' to your config file.

Markdown To Pdf Converter

You can add your content into content/, but will have to browse, while running hugo serve to the right URL manually.

Please make sure to take a look at the README.md in the github repo for additional notes.

Different CSS stylings

Converter

This theme includes two different stylings, which are referenced to in themes/hugo-formatting-theme/layouts/index.html.

By default you have <link type='text/css' href='/css/custom.css'>, which produces in my opinion the best result.The other option is <link type='text/css' href='/css/styling.css'>.

In order to switch you will have to manually edit the layouts/index.html file, but a parameter will be added in the near future.

Examples

Here are some examples of pdf outputs with different stylings using the hugo-formatting-theme theme and Hugo.

The outputs are already pdf documents.

custom css styling hugo pdf output

other styling option

Saving the webpage as pdf

Now that we have rendered a nice HTML page using Hugo, we need to export it as a pdf document (or any other type of document, eg.docx for that matter).

Markdown To Pdf Online Converter

At the time of writing Hugo does not have a pdf output build in.Hence, we will use our Browser to do that.

In my experience, the best pdf output comes with Chrome (or Chromium) as it allows you to set options like styling.

Markdown To Pdf Pandoc

However, at this point, styling should not be a problem, and the pdf output function of Firefox (or any other Browser) should work just fine.

Hence, we will need additional software, but who knows, maybe this functionality will be added to Hugo at some point in the future.

An other option is to use the wkhtmltopdf tool, in order to not leave the Command Line Interface. In my case this tool works perfectly as well!

This conversion pipeline totally works, but is not as flexible as latex or r markdown.However, on the other side it is much, much more lightweight and is basically portable.Additionally to Hugo it is possible to use a portable version of Firefox.

If you would like to see, how to accomlish a comparable result with pandoc, check out this post.