How can I change the background of a static code cell in HTML?

[alex180500]

Description

I'm using a custom format called clean-revealjs (https://github.com/grantmcdermott/quarto-revealjs-clean) which formats the code nicely but I have some static code blocks that I want to format differently

---
format: clean-revealjs
title: Test
---
# Testslide
```{.bash}
winget install julia -s msstore
```

I want these static (not rendered) code blocks to be rendered with a dark background, not white, the default style for example would be also nice! How can I do this on a code-block by code-block basis?

[mcanouil]

Look at:

• https://quarto.org/docs/output-formats/html-code.html#highlighting
• https://quarto.org/docs/presentations/revealjs/themes.html (in combination with your favourite browser inspect/developer mode)

Note that the above is mostly for default formats.
If the author of your custom format hardcoded things, it's not a Quarto issue and you should check with the author or make your own S(CSS) rules using your favourite browser inspect/developer mode.

[cderv]

@alex180500 to add to the links shared above, in context of your question

• highlighting style can't be applied by code block. It will be same style for all code blocks in the document. Quarto offers various styles that you can inspect in a rendered presentation to see the difference, include dark theming, but you will need to get inspiration on theme, and create you own CSS.
• This is where second link share comes into play. Revealjs is HTML so CSS applies. This means you can tweak colors for all, some or one element. So in your case, touching highlighing style is not easy because applying a darker background usually means you need to also shift some of the color of the highlighted code.

So overall there is nothing built-in for per-code cell style. Pandoc's does not allow it, and we inherit on Pandoc for this feature.

However, with some inspection, you could try create a CSS with rules that fits the hightligting style you want - this is all manual though, and could break in time with newer version if something changed in the underlying assumption (how things are highlighted for example).

Anyhow, just wanted to add more context to what was already shared.

Hope it helps.

[alex180500]

Thank you! alright, but is there a way to have a different CSS for a single slide? or to alter just a CSS parameter on a single slide?

[mcanouil]

Add a class to the block and make your CSS rule to use it.