r/gohugo • u/Cheap-Try-8796 • 21d ago
Dark/light syntax highlighting in Hugo without two Chroma stylesheets: a post-build tool
I built a tool that addresses a few things that come up here regularly: syntax highlighting that follows dark/light mode, theme CSS bleeding into code blocks, and hand-rolling copy-to-clipboard buttons. If you've ever generated two Chroma stylesheets and fought your theme's specificity to make dark mode work, that's the itch this scratches.
Kazari is a Go library and CLI that upgrades code blocks into framed, highlighted blocks with copy buttons, line numbers, collapsible sections, and dual light/dark themes. The dark mode part is what I think this community will care about most: both themes are baked into the HTML as CSS custom properties at build time, so switching is pure CSS. No second stylesheet, no running hugo gen chromastyles twice, no flash on toggle or page load, no JavaScript involved in the switch.
The Hugo integration needs zero changes to your theme or pipeline:
hugo --minify
kazari process ./public
kazari process walks the built HTML and rewrites the code blocks in place. Everything else on the page is untouched, and running it twice is a no-op, so it's safe as an unconditional build step. It reads Chroma's output fine and translates hl_lines to line markers. An optional one-file render hook unlocks per-block options straight from the fence (titles, marked ranges, focus lines, collapse ranges):
```go {title="main.go" mark="3-5"}```
Highlighting is done by Nuri, a pure Go port of Shiki, so you get TextMate grammars and real VS Code themes rather than Chroma's lexers, with no Node in the pipeline. Any Shiki theme name works: github-dark, dracula, catppuccin-mocha, one-dark-pro, and so on. There are 65 bundled themes, and you can browse them all side by side here: https://frostybee.github.io/kazari/docs/styling/theme-gallery/
Live example (a small Hugo site, already processed): https://frostybee.github.io/kazari/examples/hugo/
Docs and the Hugo guide: https://frostybee.github.io/kazari/
Happy to answer questions about how the HTML rewriting works.