Pandoc: Convert Markdown to HTML Using a Custom Template

With Pandoc, it is possible to use a CSS stylesheet while converting Markdown to HTML.

This is the basic format of the command:

pandoc -s -c custom.css -o README.html

Assuming you have the custom CSS ready. If not, one possibility is to use a classless CSS stylesheet. I came accross MVP.css recently and liked how it looked.

To use MVP.css for documenting a project I’m working on, I had to make some modifications to Pandoc’s default HTML template. These are the steps I followed.

First, I saved the default template to a file:

pandoc -D html > template.html

And then, made the following changes in template.html:

  • Move TOC to a dropdown menu in site navigation
  • Add a button with a link to the project website
  • Update colour scheme using CSS variables and made some minor adjustments to styles

After adding some YAML metadata 1 to, I ran pandoc again with the modified template and CSS file to generate the final output:

pandoc -s -c mvp.css \
--template template.html --toc \
--toc-depth=2 -o README.html
Pandoc HTML output comparison
View README.html

You can get the modified template, MVP.css, a Makefile, and input and output files from this repository on GitLab.

These links might be useful:

  1. Otherwise these variables will need to be provided on the command line. 


Email Updates on New Courses, Software, and Early Discounts