While drafting the first go_tui blog post, I noticed the code block chrome can follow the active site theme through CSS tokens, but the syntax highlighting itself is fixed by the selected Shiki/rehype-pretty-code theme.
Current behavior:
- Code block frame/background/borders can use theme tokens such as
--surface2 and --line.
- Syntax token colors stay fixed, e.g. one Shiki theme like
vitesse-dark, even when the user switches the blog theme.
- This makes code blocks feel slightly disconnected from theme variants.
Requested behavior:
- Support theme-aware code highlighting so each site theme can map to an appropriate Shiki theme or token color set.
- Keep the code block chrome token-based.
- Prefer a low-maintenance mapping, for example:
hackerman -> green/terminal-friendly dark syntax
gold-rush -> warmer dark syntax
void -> purple-friendly dark syntax
- other themes -> sensible fallback
Why:
- The blog uses theme tokens everywhere else, so fixed syntax colors stand out.
- Personal/dev posts with lots of code should feel visually consistent across themes.
- This came up while QAing the Go TUI series article and comparing against the reference renderer.
Possible implementation notes:
- Investigate whether
rehype-pretty-code can emit CSS-variable driven colors or multiple theme outputs.
- If not, select a Shiki theme based on current site theme at render/build time where possible.
- Add a fallback for unknown themes so existing posts remain stable.
While drafting the first
go_tuiblog post, I noticed the code block chrome can follow the active site theme through CSS tokens, but the syntax highlighting itself is fixed by the selected Shiki/rehype-pretty-code theme.Current behavior:
--surface2and--line.vitesse-dark, even when the user switches the blog theme.Requested behavior:
hackerman-> green/terminal-friendly dark syntaxgold-rush-> warmer dark syntaxvoid-> purple-friendly dark syntaxWhy:
Possible implementation notes:
rehype-pretty-codecan emit CSS-variable driven colors or multiple theme outputs.