Quarto revealjs: increase relative font size of code chunks

Question

.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.

shafee · Accepted Answer · 2023-04-01T18:51:10.017

8

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

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

edited Apr 01 '23 at 18:51

answered Apr 01 '23 at 16:34

shafee

15,566
3
19
47

Perfect. I now see that the chunk output is relatively small. Do you happen to know the property controlling that? And is there a standard site where can I find this information, e.g. a list of the properties and what they control? – Robert McDonald Apr 01 '23 at 17:59
Do you want both code and output of the same size? – shafee Apr 01 '23 at 18:06
@RobertMcDonald, you can check the underlying HTML code after opening the slide in any browser and find what classes control what, and change the CSS property of those classes to get what you want. – shafee Apr 01 '23 at 18:08
Possibly but not necessarily. I'm teaching a course using revealjs, I'm new to it, and I'm trying to figure out what works with the material – Robert McDonald Apr 01 '23 at 18:08
Looking at the html, the immediate line over the output is `
`. Using either or both of those as a property doesn't do anything.
– Robert McDonald Apr 01 '23 at 18:39
Probably your change is getting overwritten. Try with `!important` in the css rule. I have updated my answer. – shafee Apr 01 '23 at 18:51
Just to close this, I find that if both `code` and `code.sourceCode` are used, the first controls the output and the second controls the controls the chunk font. – Robert McDonald Apr 01 '23 at 19:06
@RobertMcDonald, it is because of [`CSS specificity`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) – shafee Apr 01 '23 at 19:23

score 7 · Answer 2 · answered Apr 01 '23 at 16:52

If you only want to do this for some code, you could define a new CSS class and use it only when you want:

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)
```

Quarto revealjs: increase relative font size of code chunks

2 Answers2