Compatibility with Zola 0.22 and Giallo syntax highlighting

[zokier]

System information

Zola version: 0.22.0
tabi version: 689934e

Expected behaviour

Creating new site using tabi-start and running zola serve should just work.

Ideally tabi would support dark and light mode syntax highlighting themes

Actual behaviour

$ zola serve
Building site...
ERROR Failed to serve the site
ERROR TOML parse error at line 32, column 1
   |
32 | highlight_code = true
   | ^^^^^^^^^^^^^^
unknown field `highlight_code`, expected one of `highlighting`, `render_emoji`, `external_links_class`, `external_links_target_blank`, `external_links_no_follow`, `external_links_no_referrer`, `external_links_external`, `smart_punctuation`, `definition_list`, `bottom_footnotes`, `lazy_async_image`, `insert_anchor_links`, `github_alerts`

Steps to reproduce

1. git clone --recursive https://github.com/welpo/tabi-start.git
2. cd tabi-start
3. zola serve

Additional context

Zola changed their code syntax highlighting system which requires different configuration. See Zolas changelog for details: https://github.com/getzola/zola/blob/master/CHANGELOG.md

Even after changing config.toml to the new format, I'm not sure if the syntax highlighting is working completely right. Changing the highlighting theme in config.toml doesn't seem to have any effect. Presumably some changes are needed so that the Giallo CSS files are picked up properly.

Final checklist

• I've checked that the issue isn't already reported.
• I've tested with the latest version of tabi to check if the issue has already been fixed.

[zokier]

I did workaround the issue by replacing the contents of sass/parts/_syntax_theme.scss with this snippet from Zola docs

.giallo-l {
    display: inline-block;
    min-height: 1lh;
    width: 100%;
}
.giallo-ln {
    display: inline-block;
    user-select: none;
    margin-right: 0.4em;
    padding: 0.4em;
    min-width: 3ch;
    text-align: right;
    opacity: 0.8;
}

and adding giallo css files to templates/partials/header.html like the docs say to.

that kinda works, except light/dark mode switching doesn't change the theme. but idk there is some better way to do things here

[welpo]

Hey @zokier thanks for reporting this.

For your fix, try this config.toml:

[markdown]
bottom_footnotes = true
smart_punctuation = true

[markdown.highlighting]
theme = "catppuccin-frappe"
style = "class"

More context:

I started looking into making tabi fully compatible with the latest Zola version. I like to maintain support for both current and last recent versions of Zola, to avoid breaking changes as much as possible.

Sadly, I didn't find an easy way to achieve this yet, but I need to look into it more.

Creating new site using tabi-start and running zola serve should just work.

I agree. I'll push a fix and add a notice now

[welpo]

Should be good to go with #612 and welpo/tabi-start#58 !

Let me know if you encounter any issues!

[zokier]

Thanks for quick fix! Do you intend to support user-configurable highlighting color themes at some point? If I'm understanding correctly, tabi currently ignores theme setting in config.toml [markdown.highlighting] section.

[welpo]

I don't think I'll have time to work on this myself anytime soon, but I'd gladly review a PR for this!

[welpo]

You can feel free to create an issue request or a PR. If you create an issue request, others might jump in and offer help :)