I wanted syntax highlighting in Hugo for code snippets, and I wanted it fast.
</code><pre> with the kind of syntax highlighting you expect in your favorite code editor.
Here’s how I made it happen.
/layouts directory in your Hugo installation, create a directory called
/partials, and in that directory create a file called
header.includes.html that contains the following code from the Hugo documentation site:
<link rel=“stylesheet” href=“//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css”> <script src=“//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js”></script> <script>hljs.initHighlightingOnLoad();</script>
Once you have this set up, put code snippets in your post between
</code><pre> tags, and they will have syntax highlighting (rendered client-side) in your live posts.
I haven’t even begun to explore the many styles that can be applied to your highlight.js-ified code snippets, but you can see an interactive demo on the project’s home page and a more detailed one here.
To change the look, you call different CSS. Easy as pie.
Update I’m not sure if any of these solutions handles HTML/XML markup all that well. To make it work, you have to escape the
> respectively. Not the worst scenario, but certainly a pain in the ass. This might be enough to get me looking at other solutions.