Testing Syntax Highlighting On Micro.blog Powered Websites

Micro.blog recently switched from Jekyll to Hugo as its website generator (read the announcement).

According to the Hugo syntax highlighting documentation we should be able to highlight blocks of code using one of two methods.

Method 1: Use highlight Shortcode

Hugo supports shortcodes and features a built-in highlight shortcode.

The following code block is wrapped in shortcode delimiters and should receive JavaScript highlighting.

// a variable
var foo = bar

// a function
function baz() {
	return "baz"
}

Method 2: Enable Highlight in Code Fences

The second documented method enables highlighting of GitHub flavored code fences. One has to enable this feature by setting an option in the Hugo config file.

Lucky for us, with the switch to Hugo, Micro.blog started allowing custom themes. As long as we have selected a custom theme (as of now I’m using a default theme cloned from github.com/microdotblog) we should be able to add "pygmentsCodeFences": true to our theme’s config.json file in order to enable said feature.

Update: Micro.blog now has a help page describing custom config.json files in more detail.

Let’s check if this works. The following code snippet is wrapped in triple backticks annotated with js for JavaScript.

// a variable
var foo = bar

// a function
function baz() {
	return "baz"
}

There you have it. I’m excited to keep experimenting with Micro.blog features. To stay updated on this and other topics you know what to do.