How to make code chunk output scrollable horizontally in quarto revealjs presentation

Question

I made a presentation with a scrollable code chunk output using the xaringan package in R before like the photo shown below.

I want to make the same scrollable code chunk output in quarto revealjs presentation. Anyone knows how to do it in quarto presentation?

scrollable code chunk output:

If it helps, here is the css code I used before when making a presentation in xaringan.

Thank you in advance!

/* scrollable code chunk output */
.remark-code {
  display: block;
  overflow-x: auto;
  max-height: 100%;
  padding: .5em;
  color: #fff;
  background: rgb(131, 139, 139);
}

Answer 1

You just need two steps to do the same in Quarto revealjs. At first, define a css class with overflow-x: auto and then pass the class to the chunk option class-output so that output of that will have horizontal scrolling.

---
title: Output Horizontal scrolling
format: revealjs
engine: knitr
---

## Quarto

```{r}
#| class-output: hscroll

library(gapminder)
df <- dplyr::bind_cols(gapminder, gapminder, .name_repair = "minimal")

head(df)
```

```{css, echo=FALSE}
.hscroll {
  overflow-x: auto;
  white-space: nowrap;
}
```

---

---

And if you want to do this for code chunks, instead of passing the .hscroll class as a chunk option to a specific chunk, use the knitr opts_chunk key in the yaml section.

---
title: Output Horizontal scrolling
format: revealjs
engine: knitr
knitr:
  opts_chunk: 
    class-output: hscroll
---

## Quarto

```{r}
library(gapminder)
df <- dplyr::bind_cols(gapminder, gapminder, .name_repair = "minimal")

head(df)
```

```{css, echo=FALSE}
.hscroll {
  overflow-x: auto;
  white-space: nowrap;
}
```