Semantic CSS for Pandoc

Pradeep Gowda

Created: 2023-09-14

Updated: 2024-03-02

The goal of a series of attempts here is to present the HTML output of Pandoc in nicely formatted HTML using various Semantic CSS frameworks.


The easiest semantic css styling out of the box for Pandoc appears to be paper.css, what you see on this page itself.

pandoc -o index.html -s --css=

See also water.html for a full render of the Pandoc manual.




Basic.css calls itself Classless CSS Starter File.

You can see basic-css.html for an HTML produced by applying the following command:

pandoc -o basic-css.html -s --css=/css/basic.min.css

However the basic needs a bit of extra-CSS to add margins to the side:

body {
    margin: 0 auto;
    width: 60%;
    text-align: left;
    padding: 0 20px;

section>section {
    color: #fff;
    background-color: var(--c1);
    padding: 15px;
    margin: 10px 8px 10px 8px;
    text-align: center;

@media (max-width: 481px) {
    body {font-size: 18px; width:98%}
    section,article {flex:none; width:100%; margin-left: 0;}

I have saved this above as pandoc-basic-shim.css, so that I can get the output in one go like this:

pandoc -o basic-css.html -s --css=

terminal css

Terminal CSS – “A modern and minimal CSS framework for terminal lovers.”.

You can see the rendered example here. The command to generate that HTML was:

pandoc -o terminal-css.html --css=

You can also download/link the CSS from the homepage of Terminal CSS as linked above.

This itself is not enough to add padding to the body, so lets add a shim (css file).

pandoc -o terminal-css.html --css= --css=