Semantic CSS for Pandoc

Pradeep Gowda


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=