This is post number 12 in my 100 Days To Offload challenge. View all posts or subscribe via RSS.

(sidenote: I keep having to specify, so it doesn’t seem like I’m referring to myself in third person.) (the static site generator) supports static syntax highlighting.

Instead of using a JavaScript based highlighter, you can perform highlighting at build time, rather than pulling in yet another dependency to slow down your site.

There’s great documentation for it here.

Unfortunately, it doesn’t support generating theme-aware CSS. If someone is viewing this blog in dark mode, they’ll see a light style, or vice-versa depending on the syntax highlighting theme.

Thankfully, there’s a nice way around this: media queries!

Here’s a short video to demonstrate what I’m talking about:

When in light mode, the syntax theme is solarized. When dark mode is toggled, the theme switches to solarized-dark.

To achieve this, we first need to generate both light and dark styles:

hugo gen chromastyles --style=solarized-dark > syntax-dark.css
hugo gen chromastyles --style=solarized > syntax-light.css

You can find a list of available styles here.

Once that’s done, we can combine them into one file:

/* file: syntax.css */
/* Paste the default syntax CSS here, e.g. solarized-light */

@media screen and (prefers-color-scheme: dark) {
  /* Paste the dark syntax CSS here, e.g. solarized-dark */
}

All that’s left to do is import the above snippet into your theme’s <head> template, like so:

{{ $syntax := resources.Get "css/syntax.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $syntax.Permalink }}" integrity="{{ $syntax.Data.Integrity }}">

The above snippet assumes syntax.css is stored in assets/css/.