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
Wi-Fi + Old Houses = Painful
Wed Mar 27 2024 by Kev QuirkAdding a Line Profiler to My Language
Tue Mar 26 2024 by Andrew Healey's BlogWhat Interested Me Today 3
Mon Mar 18 2024 by Joel's Log FilesMeal Planning in Things 3
Sat Mar 9 2024 by stefanzweifel.devA year in review: 2023
Sun Dec 31 2023 by Max Böck
Generated by openring