Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Code block in a callout loses its left padding in HTML

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,058 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
1/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
82/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
html, scss
Bereich
frontend

Rechercherichtung

Die fehlerhafte Regel ist .callout pre.sourceCode { padding-left: 0; } in src/resources/formats/html/_quarto-rules.scss. Beginne dort und vergleiche sie mit dem Basis-Padding von pre.sourceCode. Rendere die Reproduktion aus dem Issue und prüfe in einem Browser den berechneten padding-left des Codeblocks innerhalb und außerhalb des Callouts. Fertig ist es, wenn beide Blöcke denselben linken Abstand zeigen und das Callout-Styling weiterhin korrekt aussieht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug callouts code-blocks themes
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

A code block inside a callout loses its left padding in HTML output.
The code sits closer to the left edge of its grey background than the same block outside a callout.

The rule comes from src/resources/formats/html/_quarto-rules.scss:

.callout pre.sourceCode {
  padding-left: 0;
}

The code block still draws its background and border inside the callout, so the missing padding shows.

Two identical Python code blocks. Outside the callout the code has a clear gap from the left edge of its grey background. Inside the callout the code nearly touches that edge.

Steps to reproduce
---
title: "Code in callout"
format: html
---

```python
x = 1  # outside a callout
```

::: {.callout-note}
## Note

```python
x = 1  # inside a callout
```
:::
Actual behavior

The computed padding-left of pre.sourceCode is 0px inside the callout, against about 6px outside it.

Expected behavior

A code block has the same left padding inside and outside a callout.

Your environment
  • IDE: none, rendered from the command line.
  • OS: macOS 27.0.
Quarto check output
quarto check

Quarto 99.9.9

[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
      Project: none found (single-file mode)

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK

[✓] Checking versions of quarto dependencies......OK

[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: b86f98d382940bef6c65f37ea0bdfba844f19b6d
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.07
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
      Version: 2026

[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Checking basic markdown render....OK

ℹ R version 4.6.1 (2026-06-24)
! Config '~/.Rprofile' was loaded!

[✓] Checking R installation...........OK
      Version: 4.6.1
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/mcanouil/Library/R/arm64/4.6/library
        - /Library/Frameworks/R.framework/Versions/4.6/Resources/library
      knitr: 1.51
      rmarkdown: 2.31

[✓] Checking Knitr engine render......OK

[✓] Checking Python 3 installation....OK
      Version: 3.13.11
      Path: /Users/mcanouil/Projects/q2-tests/.venv/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking Julia installation...
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
466
Ø Merge
21 Std. 33 Min.
Gemergte PRs (30 T.)
80

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.