Theme-aware syntax highlighting
(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/
.
On the web
My First Week With the Framework 13
Sat Apr 26 2025 by Kev QuirkDefault Apps (2025)
Fri Apr 25 2025 by joelchrono's websiteMoving my personal infrastructure to Kubernetes
Sun Apr 20 2025 by Stan's blogVisualizing Chess Bitboards
Sun Apr 13 2025 by Andrew Healey's BlogIntroducing laravel-tfa-confirmation
Sun Feb 2 2025 by stefanzweifel.dev
Generated by openring