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.