non-css syntax highlighting doesn't work (and is fixed to one theme)

[faassen]

Bug Report

Environment

Zola version: 0.18.0 tabi version or commit: c54251ca7ab6f715ceacba7ed6406df683aa364b

Expected Behavior

In the [markdown] section I used the following

highlight_code = true
highlight_theme = "gruvbox-light"

The themes are listed here:

https://www.getzola.org/documentation/getting-started/configuration/#syntax-highlighting

Eventually after doing some web searches I found out that tabi only supports the css-based (classed highlighting) system as documented here:

https://www.getzola.org/documentation/content/syntax-highlighting/#inline-vs-classed-highlighting

Now the syntax highlighting works but I'm still locked into the theme supplied by tabi. I think I can get around that but only by changing the theme directly.

What I would expect is that non-css themes just work out of the box. The zola documentation says using it will make your page load faster, as there's no dependency on an external file.

If this can't be supported, I expect some documentation somewhere saying that it isn't and what to do. I would also expect some way to configure the used CSS theme; I think right now everyone is locked into syntax-ayu-dark.scss. Maybe it's possible to override main.scss to change this but I don't know how.

In an ideal world it would also implement light/dark mode aware CSS theming (as discussed here.)

Current Behavior

No syntax highlighting appeared. I could see style tags being added to the generated code, but these don't show up for some reason.

Step to Reproduce

Just write any block that has syntax highlighting with the above confirmation.

PS

These issues make it seem like I'm complaining a lot. I am enjoying tabi; I'm just reporting issues I struggled with.

[welpo]

These issues make it seem like I'm complaining a lot. I am enjoying tabi; I'm just reporting issues I struggled with.

Not at all! I appreciate these; I take it as a sign of care—noticing imperfections.

I could see style tags being added to the generated code, but these don't show up for some reason.

You mean you could see the styling tags (e.g. <span style="color:#d08770;">)?

If so, chances are the styling is not loading due to tabi's default strict Content Security Policy. You could try disabling it or allowing inline styles with this line:

{ directive = "style-src", domains = ["'self'", "'unsafe-inline'"] },

Let me know whether this fixes the issue!

[faassen]

Ah, yes, I did see the inline style tags! I'll give that a shot, thanks! I didn't realize inline styles could be considered unsafe.

[faassen]

I would be good if the docs could mention this I think, by the way. Oh wait I still have to try whether this fixes things first.

[faassen]

I just tried it and it works.

I checked the generated HTML source and I think it's not loading the CSS for the CSS based syntax lighlighting anymore so that's good.

[welpo]

Great!

I would be good if the docs could mention this I think

Agreed. I think I'll add it to the CSP page, but perhaps it would be good to mention it in the Mastering tabi post.

Where would you expect to find this info?

[faassen]

What I did is go through the tabi config file and adopt various items into my own. The comments helped here. I think a mention of this above the csp in the comment and or above highlight would have saved me.

[welpo]

Thanks for the suggestions. I've added comments on config.toml, theme.toml above the syntax theme and the CSP directives. I've also mentioned it in the CSP demo/docs page.