Syntax highlighting code blocks

I am currently trying out for a coding-related blog; is there a way to get the nowadays-quite-common Markdown-extension-behaviour of being able to write:


to get a syntax-highlighted code block like this in a blog post?


You can use that Markdown syntax, but I think currently most of the themes will ignore the language name and use the same color. The “Hello” theme (under the Design section) is the only one that I tested that will display it with syntax highlighting.

There might be a way to enable syntax highlighting for other themes, either using a Hugo config parameter or with CSS/JS, but it’s not something I’ve looked into yet.

There are JavaScript-based ways to achieve this. Take a look at highlight.js, for example.

Just a note that version 0.60.0 of Hugo supports highlighting in markdown code fences by default, but doesn’t support 0.60.0 yet, so the easiest way to get this going is the JavaScript based approach. The Hello theme mentioned above uses Prism.