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
- 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
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:
- Pandoc home page
- Pandoc usage examples
- Pandoc documentation on templates
- I also like the Sakura stylesheet
- More classless css stylesheets
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