Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Revealjs: code block at the end of a callout lost its bottom spacing since 1.8.15

オープン 初心者向け
#15,014 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
72/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
html, scss
領域
frontend

調査の方向性

2つのルールは src/resources/formats/revealjs/quarto.scss の919~926行目および975~977行目付近にあり、末尾の div.sourceCode にはマッチしますが、HTML後処理によって追加される div.code-copy-outer-scaffold ラッパーにはマッチしません(src/format/reveal/format-reveal.ts の260行目付近を参照)。コードブロックで終わるcalloutを含むrevealjsスライドをレンダリングし、ブラウザでコードの下の余白を確認してください。両方のセレクタが scaffold を最後の子要素としてもマッチし、両方のcalloutタイプの余白が1.7.34と一致すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

bug callouts regression revealjs

In Revealjs, when a code block is the last element of a callout, it now sits against the bottom of the callout. With appearance="simple" and no title, the code block border touches the callout border.

Gap between the bottom of the code block and the bottom of the callout, measured with Chromium on the example below:

Callout 1.7.34 main
Default, titled, ending with code 12.03px 8.33px
Simple, untitled, ending with code 15.74px 0.93px

The 0.93px is only the 1px callout border. Callouts ending with a paragraph render the same in both versions.

#13024 is first released in 1.8.15, so I expect the change to start there. I only rendered with 1.7.34 and main, not with 1.8.14 or 1.8.15.

Reproducible example

---
title: Callout last child code
format: revealjs
---

## Titled ending with code

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

Some text.

```python
x = 1
```
:::

## Simple untitled ending with code

::: {.callout-note appearance="simple"}
Some text.

```python
x = 1
```
:::

What happens

Since #13024, the HTML postprocessor wraps code blocks in a div.code-copy-outer-scaffold for the copy button. Revealjs uses the same postprocessor with copyCode: true:

https://github.com/quarto-dev/quarto-cli/blob/e63ace9e50f55dd3ab3152d068738ed44a0987d0/src/format/reveal/format-reveal.ts#L260

So the last child of .callout-content is now the scaffold div and not div.sourceCode. Two rules added in #11251 to handle a code block in last position no longer match.

For simple untitled callouts, #11251 added a margin below a last div.sourceCode so that the code border does not merge with the callout border. This rule never matches now, which is the visible part:

https://github.com/quarto-dev/quarto-cli/blob/e63ace9e50f55dd3ab3152d068738ed44a0987d0/src/resources/formats/revealjs/quarto.scss#L975-L977

For titled callouts, the last child gets padding-bottom: 0.5rem and no margin, except when it is a div.sourceCode, which keeps the var(--r-block-margin) margin. This exclusion was there to avoid the duplicated background color on a code block in last position. The scaffold is not excluded, so it gets the 8px padding instead of the 12px margin. This one is more cosmetic.

https://github.com/quarto-dev/quarto-cli/blob/e63ace9e50f55dd3ab3152d068738ed44a0987d0/src/resources/formats/revealjs/quarto.scss#L919-L926

We could make both selectors also target div.code-copy-outer-scaffold when it is the last child.

Related: #13446 and #13238 are about the same scaffold change on HTML callouts, which use different rules in the Bootstrap stylesheets.

主要言語
JavaScript
スター
6.1k
フォーク
463
平均マージ
21時間 14分
マージ済み PR(30日)
60

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。