Skip to content

Feature request: theme-aware code block highlighting for blog renderer #1

@gitcoder89431

Description

@gitcoder89431

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions