Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Fechada Para iniciantes
  • Algo errado?
#15,014 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Um pull request relacionado já foi integrado.

  • #15031 de @cderv — integrado

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
72/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
html, scss
Domínio
frontend

Direção de pesquisa

As duas regras estão em src/resources/formats/revealjs/quarto.scss, por volta das linhas 919-926 e 975-977, e casam com o último div.sourceCode, mas não com o wrapper div.code-copy-outer-scaffold adicionado pelo pós-processador HTML (veja src/format/reveal/format-reveal.ts por volta da linha 260). Renderize uma apresentação revealjs com um callout que termina com um bloco de código e depois verifique no navegador o espaçamento abaixo do código. Está pronto quando os dois seletores também casam com o scaffold como último filho e o espaçamento corresponde ao da 1.7.34 para os dois tipos de callout.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
JavaScript
Estrelas
6.1k
Forks
476
Merge médio
16h 57min
PRs com merge (30d)
102

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de quarto-dev/quarto-cli

Todas as issues de quarto-dev/quarto-cli

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.