Set background color for code output in HTML documents?

[maxdrohde]

I know that you can set the code block background color using the code-block-bg YAML option.

However, is there an option for setting the background color of the output part of the code block? I didn't see it documented on this page: https://quarto.org/docs/output-formats/html-code.html#appearance

[cscheid]

What do you mean by "output part"?

[maxdrohde]

I'm trying to set a background color for the HTML element that contains the results of the evaluated code -- like where the red box is

[cscheid]

If you stick to HTML, then the easiest thing is to just add CSS. The class is cell-output. So in your front matter, do

---
css: my-style.css
---

and then in my-style.css

div.cell-output {
    background-color: red;
}

ok maybe not red but you see the idea :)

[mcanouil]

I think this has already been answered (in some aspects) in #1581 with a follow up to make it available not only with knitr engine (#1581).

See Quarto document content

---
title: "Untitled"
format: html
---

```{=html}
<style>
pre.source-code {
  background-color: #22b222;
}
pre.output-code {
  background-color: #b22222;
}
</style>
```

```{r}
#| class-source: source-code
#| class-output: output-code
1 + 1
```

[cderv]

Thanks @mcanouil for linking issues.

#1581 is a bit more specific IMO. You don't need such chunk options if you only want to style background color. I used that as example there because it was easier to show.

Here, solution above using CSS seems the more generic as no SASS variable specific for this.

[mcanouil]

Well, it depends if the styling should be applied on the whole document or not though.
@cscheid example will overrides everything while the class-* allow for more fine-grained control, i.e., to highlight source/output differently for different context, etc.

@cderv I added this mostly as an alternative/reference.

[cderv]

Yes I agree, it is an alternative on for Quarto document with R when needing different style for different code output type.

Generalization of this may happen in #2040 in the future.