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

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);
}

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

<hr>

<hr>

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