Css 如何使代码块输出在 quarto revealjs 演示文稿中水平滚动

发布于02月16日

在此之前，我使用R中的xaringan包使用可滚动的代码块输出进行了演示，如下图所示.

我想让同样的可滚动代码块输出在Quarto Discrealjs演示文稿中.有谁知道如何在四重奏演奏中做到这一点？

scrollable code chunk output:

如果有帮助，下面是我以前在用xaringan进行演示时使用的CSS代码.

提前谢谢您！

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

推荐答案

您只需执行两个步骤即可在Quarto Discrealjs中执行相同的操作.首先，使用overflow-x: auto定义一个css类，然后将该类传递给Chunk选项class-output，以便其输出将具有水平滚动.

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

如果您想对代码块执行此操作，而不是将.hscroll类作为Chunk选项传递给特定的块，请使用YAML部分中的Coynr opts_chunk键.

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