Skip to main content

Alpha This is a new website theme. Help me improve it and give your feedback (opens in a new tab).

Hugo Syntax Highlighting

Published:

Tags:

Web
This blog post is more than two years old. It is preserved here in the hope that it is useful to someone, but please be aware that links may be broken and that opinions expressed here may not reflect my current views. If this is a technical article, it may no longer reflect current best practice.

I’ve been tidying up my Hugo theme in an effort to make it reusable by others. In doing so, I’ve learnt about a lot of Hugo features that I didn’t know existed, like shortcodes. I remembered this concept from long ago in Wordpress and I had even written a plugin that took advantage of them.

I’ve been manually writing out HTML for figures, instead of using the figure shortcode. I haven’t started to fix these up yet, but I have made some changes for syntax highlighting.

I’d been using the 3 backtick fences (```) to indicate codeblocks, sometimes I would add the language out of habit but nothing was actually performing syntax highlighting. It turns out though that enabling syntax highlighting is really easy.

In your Hugo config file, set:

pygmentsCodeFences: true
pygmentsStyle: "native"

There are many styles available to choose from, I quite like the “native” style.

As long as you have pygments available in your path, you’re all set. On Debian systems, the package you’re after is python-pygments and from pip it’s Pygments.

To get it working with Netlify, you’ll need to add a requirements.txt file to the root of your git repository (the actual root, not to the static/ folder) with something like the following (you could update the version number if a new version becomes available):

pygments==2.2.0

Once you’ve set this up, you’ll get pretty syntax highlighting (without needing any client-side JavaScript) that looks like this with C:

#include <stdio.h>

main(int argc, char** argv)
{
        printf("hello, world\n");
}

or Python:

#!/usr/bin/env python3

if __name__ == "__main__":
	print("Hello world")

or Scheme:

(display "Hello world")
(newline)

Contact