Inline `code.sourceCode` does not use syntax highlighting theme's background colour

[mcanouil]

Bug description

Inline Code elements with a language class (e.g. `x = 1`{.python}) do not receive the syntax highlighting theme's background-color.
The theme background is applied to block code (div.sourceCode) but not to inline code.sourceCode, resulting in token colours designed for one background appearing on a different one.

How each format handles inline code background

Format	Block code background	Inline code background	Source
HTML	Theme's background-color via $code-block-bg	Bootstrap $code-bg (defaults to $gray-100), with a fragile fallback to $code-block-bg-color	L932-950
Reveal.js	Theme's background-color via div.sourceCode	$code-bg with no fallback to theme background	L367-373
Typst	#Skylighting(bgcolor: rgb("..."), ...)	No background at all (bare token function calls)	Pandoc Typst writer

What Pandoc generates for inline code

With a language class (`x = 1`{.python}):

• HTML: <code class="sourceCode python">x <span class="op">=</span> <span class="dv">1</span></code> with token spans but no background.
• Typst: #NormalTok("x ");#OperatorTok("=");#NormalTok(" ");#DecValTok("1"); with no wrapping element.

Without a language class (`x = 1`):

• HTML: <code>x = 1</code> (no highlighting, no token spans).
• Typst: `x = 1` (plain raw markup).

In both cases, the theme's background-color is only applied to block-level div.sourceCode, never to inline code.sourceCode.

HTML: the $code-block-bg-color fallback

The SCSS applies $code-block-bg-color to p code.sourceCode as a fallback, but only when $code-bg == $gray-100 (the Bootstrap default):

• https://github.com/quarto-dev/quarto-cli/blob/6201b3daa/src/resources/formats/html/bootstrap/_bootstrap-rules.scss#L932-L950

This fallback breaks in two situations:

1. Customised $code-bg: If a user or Bootstrap theme sets $code-bg to anything other than $gray-100, the condition at L938 fails and inline highlighted code gets the generic $code-bg instead of the theme background.
2. Adaptive themes: The adaptive theme guard from Adaptive syntax highlighting themes do not apply code block background colour #14090 prevents $code-block-bg from being set, so $code-block-bg-color never carries the theme background.

Where the theme background is injected

The theme's background-color is read in resolveTextHighlightingLayer() and emitted as $code-block-bg, guarded by !isAdaptive:

• https://github.com/quarto-dev/quarto-cli/blob/6201b3daa/src/format/html/format-html-scss.ts#L289-L316

There is no equivalent $code-inline-bg variable.

The token colour CSS is generated by generateThemeCssClasses(), which targets code span.{abbr} (matching both block and inline) but applies the background only to div.sourceCode (block only):

• https://github.com/quarto-dev/quarto-cli/blob/6201b3daa/src/command/render/pandoc-html.ts#L516-L587

Reveal.js: no fallback at all

The Reveal.js SCSS applies $code-bg to all code elements with no reference to $code-block-bg-color:

• https://github.com/quarto-dev/quarto-cli/blob/6201b3daa/src/resources/formats/revealjs/quarto.scss#L367-L373

Typst: no background mechanism

Pandoc's Typst writer emits inline highlighted tokens as bare function calls (#NormalTok("x ");#OperatorTok("=");) without any wrapping #Skylighting() block or #box().
The PANDOC_WRITER_OPTIONS.highlight_method['background-color'] value is available but unused for inline code.

Accessibility impact

Combined with #14099 (missing base text colour for some dark themes), this creates a contrast failure: token colours designed for a specific background (e.g. light text for github-dark's #24292e) end up on an unrelated background (e.g. Bootstrap's light grey $gray-100), potentially failing WCAG contrast requirements.

Steps to reproduce

---
title: "Inline code background"
format:
  html: default
  revealjs: default
  typst: default
highlight-style: github-dark
---

Inline code with language: `x = 1`{.python} in a paragraph.

Inline code without language: `x = 1` in a paragraph.

```python
x = 1
```

Actual behavior

• HTML: Inline `x = 1`{.python} renders as <code class="sourceCode python"> with token colours from github-dark (light text for dark backgrounds) but a light-grey background from Bootstrap $code-bg.
  When $code-bg happens to equal $gray-100 (the default) and the theme is non-adaptive, the fallback to $code-block-bg-color activates and the theme background is applied, but this is fragile and breaks when $code-bg is customised or an adaptive theme is used.
• Reveal.js: Inline code gets $code-bg from .reveal code { background-color: $code-bg } with no fallback to the theme background.
• Typst: Inline highlighted code gets no background at all.

Block code uses the correct theme background in all three formats (when using explicit, non-adaptive theme names).

Expected behavior

Inline code.sourceCode elements should use the syntax highlighting theme's background-color, matching block code.

For HTML, the $code-bg == $gray-100 guard could be replaced with a dedicated $code-inline-bg variable derived from the theme, or $code-block-bg-color could be applied unconditionally to p code.sourceCode.

For Reveal.js, .reveal code could reference $code-block-bg-color the same way the HTML rules attempt to.

For Typst, inline highlighted tokens could be wrapped in a background element (e.g. #box(fill: <theme-bg>, ...)).

Related issues

Issue	Title	Relevance
#14090	Adaptive syntax highlighting themes do not apply code block background colour	Direct. The !isAdaptive guard prevents $code-block-bg from being set, which also blocks the inline code fallback.
#14099	Dark syntax highlighting themes don't override light theme's base .sourceCode text color	Direct. Same generateThemeCssClasses() function, same pattern: theme properties not fully propagating to inline code contexts. Combined with this issue, both text colour and background can be wrong for inline code.
#6781	monobackgroundcolor ignored by document title and section title	Tangential. About monobackgroundcolor not reaching certain contexts (title/heading selectors).
#4746	monobackgroundcolor being ignored	Historical (closed). The fix for this issue led to the current _bootstrap-rules.scss L954-962 block.
#13390	Code blocks nested in list have two background colours	Tangential. Related to code-bg / code-block-bg interaction in nested contexts.

Your environment

• IDE: Terminal
• OS: macOS 15.5 (Darwin 25.3.0, arm64)

Quarto check output

Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.8.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.4.5: OK
      Typst version 0.14.2: OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 6201b3daa74b5a0f34758d969d6281d3a69acb5d