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.

I’d love a hand with this. I have a post where the code (mostly at the end) isn’t highlighting, and MathJax isn’t rendering the LaTeX markup. I’m almost certainly overlooking something simple about inserting a script in, or markdown generally.

(MathJax may need an extra parameter to recognize single $ marks as delimiters, but it’s not working with the default \(...\) either.

It begins:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src=""></script>
<script id="MathJax-script" async

Which is the MathJax part, and continues:

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>

which is the highlighting part.

Then starts the post proper.

I finally got around to playing with Prism. I fairly pleased with the result. Here’s the plugin I created: plugin-prismjs