quarto-dev / quarto-dev/quarto-cli

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

Open
#14,135 8 comments 1 reaction 1 assignee View on GitHub

@cderv is already working on this.

Since Jun 22, 2026.

accessibility bug themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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):

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 #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:

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):

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:

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.