code-block-bg: true has no apparent effect

[stuvjordan-uroc]

Description

Here is my _quarto.yml:

book:
  title: "BLW Data Visualization Bootcamp"
  author: "Stu"
  date: "May 29, 2025"
  chapters:
    - index.qmd
    - 01_intro.qmd
    - 02_tools.qmd
    - 03_set_up_a_project.qmd
    - 04_check_out_your_assignment.qmd
    - 05_basic_html.qmd
    - 06_basic_css.qmd
    - 07_svg.qmd
    - 08_basic_javascript.qmd
    
bibliography: references.bib



format:
  html:
    theme: cosmo
    code-block-bg: true
    code-block-border-left: "#31BAE9"
  pdf:
    documentclass: scrreprt

Yet when I quarto preview, the code block backgrounds are not highlighted. For instance, here is a screenshot of the html output of an excerpt that includes a code block:

What am I doing wrong? Thanks!

[mcanouil]

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

---

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[mcanouil]

To be clear, I don't see any issue with:

---
format:
  html:
    theme: cosmo
    code-block-bg: true
    code-block-border-left: "#31BAE9"
---

```r
print("Hello, World!")
print("This is a test of the Quarto document.")
print("This is a test of the Quarto document with a code block.")
```

[cderv]

Looking at your screenshot, I see not highlighting, so I am assuming you did not set a class on the code cell

---
format:
  html:
    code-block-bg: true
---

```
<button type="button">Press me!</button>
```

```default
<button type="button">Press me!</button>
```

```html
<button type="button">Press me!</button>
```

Highlighting (including background) will only be set for highlighted code cell. For the other, they will follow regular pre code style and code-block-bg does not apply.