pandoc markdown syntax highlighting with highlight.js

Published on Author Artem ButusovLeave a comment

Pandoc is very useful to generate html from markdown.
With default settings you will get html page with standard theme and no syntax highlighting with extra styles.
I found that using twitter bootstrap css and highlight.js is very easy to get good styles and very good highlighting.
You can use snippet below, insert it in the top of markdown file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai_sublime.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/php.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/xml.min.js"></script>

<style>body { padding: 20px } pre { padding: 0 }</style>

<script>
$(function() {
    $("pre > code").each(function(i, block) {
        var codeClass = $(this).parent().attr("class");
        if (codeClass == null || codeClass === "") {
            $(this).addClass("hljs");
        } else {
            var map = {
                js: "javascript"
            };
            if (map[codeClass]) {
                codeClass = map[codeClass];
            }
            $(this).addClass(codeClass);
            hljs.highlightBlock(this);
        }
    });
});
</script>

You can add more highlight.js language files from http://cdnjs.com/libraries/highlight.js/
You can also create aliases for languages, just change map javascript variable.
Even if you will not specify syntax class in markdown code will still be highlighted with default highlight.js style.

Run pandoc example.markdown -o example.html --no-highlight to get your syntax highlighted html.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.