Proper syntax highlighting in Reveal.js using Pandoc
I use Markdown format for about everything that requires typing text, including presentations. This format is converted to the expected output format using Pandoc. Since one of the later version of Pandoc, the Reveal.js is available as an output format which allows for very slick (HTML based) presentations. For more information on my writing workflow, please take a look here, the result with a custom LaTeX style is available as well.
So in short, you write the presentation text and code in Markdown format in your favourite editor, convert to the reveal.js presentation format using Pandoc and you’re ready. All sorts of things can be tuned, but I leave that to you to find out…
All seems well in Markdown land, but the devil is in the details…
When converting to reveal.js, my code blocks were not highlighted, as should be the case because highlight.js is included in the package. Fortunately, Pandoc can do syntax highlighting as well. </span>But the highlighting of Pandoc and the reveal.js stylesheets don’t go together very well with unreadable code as a result. So I was stuck and could not get my head around why the reveal.js highlighting would not work.
I found out tonight! And the answer is very simple: the reveal.js template that is shipped with Pandoc has the appropriate highlight.js code removed. This happens in two parts: the plugin and the stylesheet are not loaded. This is probably because Pandoc ships its own highlighter.
Attached, I have included my version of the template. In order to use it, two additional parameters have to be given to Pandoc:
--no-highlight --variable hlss=zenburn
The first one makes sure that Pandoc does not do the highlighting, the second one is a custom variable denoting the style to use for highlight.js. This is the template file to use: reveal-template.