Pandoc Markdown to HTML blockquote style

Question

I'm trying to find a good solution to writing my emails in Markdown, and styling them for general consumption, in Thunderbird.

My previous solution, the add-on Markdown-here is not maintained, and no longer works with the latest Thunderbird versions.

One approach I've tried to some success is using pandoc, and inserting the contents of the HTML file via Insert->HTML.

E.g.:

email.md

Hi there, *this* is a **test** email written in `markdown`

pandoc command

pandoc email.md -t html -o email.html

email.html

<p>Hi there, <em>this</em> is a <strong>test</strong> email written in <code>markdown</code></p>

However, the formatting is not always what I want. For example, in Markdown-here, it used to resembles the rendering of StackOverflow for blockquotes

Blockquotes look like this

However, in my pandoc->Thunderbird workflow, HTML elements like this:

<blockquote>
<p>Blockquotes looks like this</p>
</blockquote>

are rendered as indented text like:

            Blockquotes look like this

Which makes my emails less easy to follow.

I've read about pandoc having a --css flag, where you can define a CSS sheet to use, e.g. s --css=styling.css. However, nothing I've tried seems to work.

Does anyone know how to embed changes to the blockquote styles of generated HTML in pandoc to more closely follow the rendered markdown styles of StackOverflow and GitHub?

Answer 1

As per the docs you can link to a CSS file using the -c flag , and we can look at SO's blockquote style, which is:

   blockquote p::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 8px;
    background: #c8ccd0;
    }
blockquote{
    color:#535a60;
    padding:.8em .8em .8em 1em;
    position: relative;
}

So, running the following with that style should give you what you want.

pandoc -s -c <StyleFile>.css <Content>.md -o <Output>.html