Syntax Highlighting that respects CSS prefers-color-scheme

Feature requests
1

I would like to have syntax highlighting that respects the prefers-color-scheme of modern browsers. For example, for prefers-colors-scheme: dark, I’d like to highlight with gruvbox-dark, but obviously use gruvbox-light for prefers-color-scheme: light.

Would such a feature be accepted? I don’t know enough about the current architecture of Zola to be able to just implement it, but I think we’d need to combine syntect classed html generation with style tags that we insert during rendering somehow.

I’m willing to implement such a feature, but will definitely need help.

Thanks!

1 Like
2

I like the idea in principle but I have no idea how easy it will be to implement. I haven’t used syntect class based highlighting and that means we would somehow need to generate CSS files from the syntax schemes. I think the easiest way to start that would be to create a simple pulldown-cmark parser that will add the classes from syntect. Once this is proven to work, it should be easy to integrate with Zola.

The main thing I’m worried about is how to configure all that in the config.toml since that adds quite a bit of complexity.

3

I, too, am interested in this feature. As far as the config.toml is concerned, perhaps you could get away with adjusting the highlight_code config to accept a string, instead? One of inline, classes, and off/none. And then highlight_theme could accept one or two values, the second being ignored unless highlight_code is set to classes.

4

I will submit a PR in the near future for that. The PR to syntect for generating CSS from themes is already merged, but not yet released (https://github.com/trishume/syntect/pull/274).

I will create a pull request for everyone to test in the next days.

possibe config:

highlight_code = true
highlight_theme = "css"
generate_theme_css = [
  { theme = "solarized-dark", file = "theme-dark.css" },
  { theme = "solarized-light", file = "theme-light.css" },
]

Addition to CSS / scss

@import url("theme-dark.css") (prefers-color-scheme: dark);
@import url("theme-light.css") (prefers-color-scheme: light);

you can already have a look into the branch https://github.com/uwearzt/site-uwe-arzt/commits/light-dark for my site (but i was dumb and created the changes on master instead of next, so there will be some work to do).

5

Note that syntect cannot be updated currently until https://github.com/trishume/syntect/pull/270 is merged or https://github.com/rust-onig/rust-onig/pull/132 is merged and released. The latest syntect version requires bindgen/clang/llvm because of onig which is not good.

6

See https://github.com/getzola/zola/pull/913, already usable for Linux users. But still in Draft state.