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 phone scared me (again)
Wed May 21 2025 by joelchrono's websiteTales From Mainframe Modernization
Wed May 21 2025 by oppiliappan's μblog📝 18 May 2025 at 15:19 - I've been really struggling lately I have very little motivation...
Sun May 18 2025 by Kev QuirkCommitting XML horrors to style my blogroll
Sat May 10 2025 by nicholas.cloudMoving my personal infrastructure to Kubernetes (single-node k3s)
Sun Apr 20 2025 by Stan's blog
Generated by openring