CODEWITHSUNDEEP
cssrquartoreveal.js
Robert McDonald
Robert McDonald

Reputation: 1340

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.

Upvotes: 7

Views: 3245

Answers (3)

Mario Reutter
Mario Reutter

Reputation: 359

Building upon the answer by @shafee: If you want code and output to be bigger but not other verbatim elements enclosed in backtics (e.g., text `verbatim` text), you can use this:

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

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

Upvotes: 1

Shafee
Shafee

Reputation: 20107

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

Upvotes: 11

DaveArmstrong
DaveArmstrong

Reputation: 22074

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

enter image description here

Upvotes: 7

Related Questions