Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Code annotation gutter keeps a grey background when code blocks have none (`code-block-bg: false`)

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,059 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
76/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
scss
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ .code-annotation-gutter trong src/resources/formats/html/bootstrap/_bootstrap-rules.scss và so sánh với quy tắc div.sourceCode trong cùng tệp, quy tắc này đã quay về $body-bg khi $code-block-bg là false. Hãy làm cho gutter tuân theo cùng điều kiện đó, sau đó hiển thị bản tái hiện với code-block-bg: false và kiểm tra xem màu nền đã tính toán của gutter không còn là màu xám nữa. Việc hoàn thành khi gutter không có nền riêng trong cấu hình này và màu xám mặc định vẫn hiển thị khi code-block-bg được đặt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug code-annotation 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

With code-block-bg: false, code blocks have no background, but the code annotation gutter still gets one.
A grey strip shows on the right of every annotated block.

The HTML code blocks documentation lists code-block-bg as a boolean or a colour, and the option sets the $code-block-bg Sass variable.
In src/resources/formats/html/bootstrap/_bootstrap-rules.scss, div.sourceCode checks $code-block-bg and falls back to $body-bg when it is false.
.code-annotation-gutter does not check it and always uses $code-block-bg-color:

.code-annotation-gutter {
  background-color: $code-block-bg-color;
}

An annotated Python code block on a white page with no code background. A light grey strip holding the two annotation markers runs down its right edge.

Steps to reproduce
---
title: "Annotation gutter"
format: html
code-block-bg: false
code-annotations: below
---

```python
import math  # <1>
x = math.pi  # <2>
```

1. Import.
2. Assign.

Two other set-ups give the same result:

  • $code-block-bg: false in a theme file.
  • code-block-border-left: "#31BAE9" without code-block-bg, because Quarto then sets $code-block-bg to false itself (src/format/html/format-html-scss.ts).
Actual behavior

The computed background colours are:

  • div.sourceCode: rgb(255, 255, 255), the page colour.
  • .code-annotation-gutter: rgba(233, 236, 239, 0.65).
Expected behavior

The gutter follows code-block-bg, so it has no background of its own when code blocks have none.

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...
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
466
Merge trung bình
21 giờ 36 phút
Pull request đã merge (30 ngày)
79

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.