`highlight-style` treated differently for `format: *` and `format: live-*`

[mine-cetinkaya-rundel]

I have a website project with revealjs slides and html files in it.

I set highlight-style: a11y-dark at the metadata level.

In both live-revealjs and live-html outputs, the non-interactive code cells use the correct highlight style:

However, in the interactive (webr) code cells, a different style is applied.

Note that this doesn't happen if highlight-style: github, for example.

cc @cderv

[georgestagg]

Currently, the background colour for the Quarto Live code editor is decided by the following rules in CSS:

• --bs-body-bg if it exists, or
• --r-background-color if it exists, or
• #ffffff, if the Quarto theme is light, or
• #222222, if the Quarto theme is dark.

So the issue happens when the highlighting theme requires that code is typeset on a dark background, but the Quarto theme otherwise has a light background on the web page.

This is a problem that should really be fixed in Quarto Live. The CSS for the live editor should listen to the highlighter theme in some way to provide a dark background if required.

I will need to think about this a bit, I think the assumption that a "light" highlighter theme will be used with a "light" quarto theme is pretty strong in Quarto Live's CSS rules right now.

[mine-cetinkaya-rundel]

What's unclear to me is which syntax highlighting is the light one using? It's not a11y (the light version of a11y-dark. It's very difficult to read. Otherwise, I'd be ok with even if it doesn't necessarily match the rest of the highlighting.

[georgestagg]

It's a11y-dark's syntax highlighting rules, but with an inverted background and base text colour. The base text colour is broken in the same way as described above.

We're working on exporting both the correct background and base text colours in #10722 so that Quarto Live can set them correctly in the editor.

For the moment a short term workaround is to avoid mixing a light Quarto theme with a dark highlighting theme (i.e setting a11y-light should work okay, if I'm understanding everything correctly).

[cderv]

This is now to follow up on #10722.

In next quarto 1.6, any SCSS variable will be made available as CSS root variable with namespace --quarto-scss-export-*

We don't have yet a full extensive list of available variable, and this is quite new, but still can be used to access value set to color like code background.

Should help solve this issue in quarto-live.

[georgestagg]

Apologies for the delay but the latest commit of Quarto Live now makes use of the --quarto-scss-export-code-block-color and --quarto-scss-export-code-block-bg variables.

We should still deal with the gutter in the future, but for now at least the code should be readable in the main body of the Quarto Live editor and match more closely Quarto's own code blocks.

[georgestagg]

Note that there's still an issue when using a11y-dark with an otherwise light theme. I've written up the technical details at: #10722 (comment)