Search code examples
cssrquartoreveal.js

Quarto revealjs: increase relative font size of code chunks

.In quarto revealjs the font size for code chunks is smaller than that for text. Changing the base font (using fontsize) just changes everything proportionally. I would like to be able to adjust the relative font size for code chunks. I assume this involves custom CSS but I'm not sure what to change.

---
format:
  revealjs
---

* Here is text

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

The output looks like this:

revealjs output

UPDATE: Modifying font-size for code.sourceCode answers the question I asked. Modifying font-size for code changes the size of code, output, and it also changes the font size for all verbatim elements. Unfortunately it will change too much for many use cases.

Solution

  • Increase the font-size for code.sourceCode css selector.

    ---
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; */
}
```

    increased code font size

    To change the font size of both code chunk code and output, use only the code tag as css selector.

    ---
format:
  revealjs
---

* Here is text

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


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