Converting Markdown to HTML Using Custom CSS and Template With Pandoc

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 README.md -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 README.md, I ran pandoc again with the modified template and CSS file to generate the final output:

pandoc -s README.md -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. 

Subscribe to Vimal Kumar Velayudhan

Get the latest posts delivered right to your inbox