Quarto revealjs：增加代码块的相对字体大小

Question

在quarto revealjs中，代码块的字体大小比文本要小。改变基础字体（使用fontsize）只会按比例改变一切。我希望能够调整代码块的相对字体大小。我猜这涉及到自定义CSS，但我不确定需要改变什么。

---
format:
  revealjs
---

* Here is text

```{r echo=TRUE, eval=FALSE}
str(mtcars)
```

输出的样子是这样的：

更新：修改font-size的code.sourceCode回答了我提出的问题。修改font-size的code会改变代码、输出和所有等宽元素的字体大小。不幸的是，这对许多用例来说会改变得太多。

- Robert McDonald

---

你可以通过将code.sourceCode和div.cell-output-stdout都放入你的CSS中来增加代码和输出，但不能增加逐字元素。 - undefined

Answer 1

增加 code.sourceCode CSS 选择器的 font-size。

---
format:
  revealjs
---

* Here is text

```{r echo=TRUE, eval=FALSE}
str(mtcars)
```


```{css}
code.sourceCode {
  font-size: 1.3em;
  /* or try font-size: xx-large; */
}
```

---

---

要更改代码块代码和输出的字体大小，请仅使用code标签作为CSS选择器。

---
format:
  revealjs
---

* Here is text

```{r echo=TRUE}
str(mtcars)
```


```{css}
code {
  font-size: 1.3em;
  /* or try font-size: xx-large; */
}
```

- shafee

---

好的。我现在看到块输出相对较小。您知道控制它的属性吗？是否有一个标准网站可以找到这些信息，例如属性列表和它们所控制的内容？ - Robert McDonald

@RobertMcDonald，您可以在任何浏览器中打开幻灯片后检查底层HTML代码，找到控制什么的类，并更改这些类的CSS属性以获得您想要的效果。 - shafee

可能但不一定。我正在使用revealjs教授一门课程，对此还很陌生，正试图弄清楚哪些内容适用于这个材料。 - Robert McDonald

查看 HTML，输出上方的直接行是 <div class="cell-output cell-output-stdout">。使用其中一个或两个作为属性都没有任何作用。 - Robert McDonald

仅供结束此讨论，我发现如果同时使用 code 和 code.sourceCode，则前者控制输出，后者控制代码块字体。 - Robert McDonald

Answer 2

如果您只想针对某些代码执行此操作，可以定义一个新的CSS类，并仅在需要时使用它：

---

title: "Untitled"
format: revealjs
---

## First Slide

```{css echo=FALSE}
.big-code{
  font-size: 200%  
}
```

<div class=big-code>
```{r echo=TRUE, eval=FALSE}
str(mtcars)
```
</div>

## Next Slide


```{r echo=TRUE, eval=FALSE}
str(mtcars)
```

- DaveArmstrong

Answer 3

在 @shafee 的回答基础上进行扩展：如果你想要代码和输出变大，但不包括在反引号中的其他逐字元素（例如，文本 `verbatim` 文本），你可以使用以下方法：

```{css}
code.sourceCode div.cell-output-stdout {
  font-size: 1.4em;
}

div.cell-output-stdout {
  font-size: 1.4em;
}
```

- Mario Reutter