Using CSS when converting Markdown to PDF with Pandoc

Question

I'm trying out Pandoc on OS X, and results thus far are impressive. One blocking problem, however, is getting CSS styles to work on inline code samples. I'm converting from Markdown to PDF.

I have this string in my source:

* Create a simple HTML document (<span class="filename">simple.html</span>) and load it into the browser via the file system

I've also tried this:

* Create a simple HTML document (`simple.html`{.filename}) and load it into the browser via the file system

I'd like to apply the class "filename" to the enclosed text in each case, but it doesn't seem to do anything to the output. However the manual says:

Some output formats can use this information to do syntax highlighting. Currently, the only output formats that uses this information are HTML and LaTeX.

Here's my command:

pandoc \
    --output ./output.pdf \
    --css source/styles.css \
    source/en/docs/input.md

I'm converting to PDF, which is written by LaTeX by Pandoc internally. Can I get this to work? Or, can I use a style defined using a LaTeX command? - it doesn't have to be CSS. However, it must be a style system - it's not workable to change italic/font/colour attributes on each occasion.

I've tried sending output temporarily to HTML, and in that situation the styles are imported directly from the specific style asset. So, my stylesheet specification and span markup is correct, at least for one output format.

Addenda

A couple of afterthoughts:

• The solution does not have to be Pandoc or Markdown. However, it does need to be a trivial text-based markup language that can convert reliably to PDF, as I want to store the document files on Git for easy forking and merging. I'm not keen on HTML as it is verbose, and engines to convert it aren't that great (though, admittedly, my formatting requirements are modest).
• The HTML output from Pandoc is fine, so if I can find something that converts the (simple) HTML/CSS to PDF reliably, I'll be fine. Of course, Pandoc should be able to do this, but inline styles (for the background colour on code fragments) aren't rendered. This might be a faff, as I'll have to reintroduce things like page-breaks, which can be non-trivial in HTML-to-PDF converters.

Answer 1

"I'd like to apply the class "filename" to the enclosed text in each case, but it doesn't seem to do anything to the output."

It works for HTML. Running Pandoc interactively, ^D to see the resulting code:

$>  pandoc -f markdown -t html

* Create a simple HTML document (`simple.html`{.filename}) and load it.

^D

<ul>
<li>Create a simple HTML document (<code class="filename">simple.html</code>) and load it.</li>
</ul>

It doesn't work for LaTeX if you use the .filename class. You need to use one of the known classnames:

$>  pandoc -f markdown -t latex

* Create a simple HTML document (`simple.html`{.filename}) and load it.

^D

\begin{itemize}
\tightlist
\item
  Create a simple HTML document (\texttt{simple.html}) and load it.
\end{itemize}

Now using one of the known classnames, like .bash, .postscript, .php, ...:

$>  pandoc -f markdown -t latex

* Create a simple HTML document (`simple.html`{.bash}) and load it.

^D

\begin{itemize}
\tightlist
\item
  Create a simple HTML document (\VERB|\KeywordTok{simple.html}| and
  load it.
\end{itemize}

---

To convert HTML + CSS into PDF, you can also look into PrinceXML, which is free for non-commercial use.

Answer 2

I don't know LaTeX at all, but have hacked this solution using this helpful manual. First, create a style:

\definecolor{silver}{RGB}{230,230,230}

\newcommand{\inlinecodeblock}[1]{
    \colorbox{silver}{
        \texttt{#1}
    }
}

And here's how to use it:

Some \inlinecodeblock{inline code}, and some widgets, go here

This creates a style with a background colour and a monospaced font. The margin and padding are a bit large for my preferences, but it's a very useable start. Here's what it looks like:

The disadvantage is that if I wish to output to a format that supports styles proper (such as HTML) then these are lost. Also, my solution only works with LaTeX/PDF. Thus, if you can fix these issues, please add a better answer!

---

Addendum: I have a better approach, which is thus:

\newcommand{\inlinecodeblock}[1]{
    \fboxsep 1pt
    \fboxrule 0pt
    \colorbox{silver}{\strut{\texttt{#1}}}
}

This avoids the problem of excess horizontal padding - I think it was the line break in the colorbox parameter that did it. I've added in strut, which keeps highlights the same height regardless of whether the text has descenders.

It's not perfect though - there's still too much horizontal margin outside the box, and a comma after a box will still orphan onto the next line. I may give up with LaTeX, and render to HTML from Pandoc, and then use wkhtmltopdf to render the final document.