RevealJS code block animations not working on several themes

[fuhrmanator]

Bug description

Some RevealJS themes (beige, league, sky) don't support animation of code line number highlighting per https://quarto.org/docs/presentations/revealjs/#line-highlighting (see the example where one can advance with space-bar to show highlighted lines). In the faulty themes, it seems the "background" code is not properly grayed out (so the highlighted code appears to stand out).

Here's a MWE for the problem:

---
format: 
    revealjs: 
        theme: beige # doesn't work
        # theme: blood # works
        # theme: dark # works
        # theme: default # works
        # theme: league # doesn't work
        # theme: moon # works
        # theme: night # works
        # theme: serif # works
        # theme: simple # works
        # theme: sky # doesn't work
        # theme: solarized # works
---

# Animated slide

```{.python code-line-numbers="|6|9"}
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

This could very well be a bug in the highlight.js or even the CSS of the themes. I didn't have time to dig deeper, but wanted to document it.

Checklist

• Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
• Please format your issue so it is easier for us to read the bug report.
• Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
• Please document the operating system you're running. If on Linux, please provide the specific distribution.

[cderv]

Thanks for the report

In the faulty themes, it seems the "background" code is not properly grayed out (so the highlighted code appears to stand out).

Yes in those theme that does not work the background color is set to transparent. As the highlighting of lines rely on changing the opacity level, it does not work for those themes.
Example of rule with transparent.

.reveal pre.sourceCode code {
    background-color: transparent;
    padding: 6px 9px;
    max-height: 500px;
    white-space: pre;
}

It is possibly a revealjs theme issue indeed as we use the theme CSS value for there. I'll check that out.

[cderv]

It seems it comes from us setting code block bg to transparent for those themes only

quarto-cli/src/resources/formats/revealjs/themes/sky.scss

Line 23 in b36d574

$code-block-bg: transparent !default;

quarto-cli/src/resources/formats/revealjs/themes/beige.scss

Line 26 in b36d574

$code-block-bg: transparent !default;

quarto-cli/src/resources/formats/revealjs/themes/league.scss

Line 28 in b36d574

$code-block-bg: transparent !default;

It conflicts with our implementation of line number highlight that is suppose to work with Pandoc's syntax highlighting.

I need to check why this is needed.

• Either transparent should not be set
• Or we need to tweak the feature (CSS probably) to handle this correctly