英文:
How to make code chunk output scrollable horizontally in quarto revealjs presentation
问题
我之前使用R中的xaringan包创建了一个带有可滚动代码块输出的演示文稿，就像下面的照片所示。
我想在quarto revealjs演示文稿中创建相同的可滚动代码块输出。有谁知道如何在quarto演示中实现这一点？
可滚动代码块输出：
如果有帮助的话，以下是我之前在xaringan中制作演示时使用的CSS代码。
提前感谢！
/* 可滚动代码块输出 */
.remark-code {
display: block;
overflow-x: auto;
max-height: 100%;
padding: .5em;
color: #fff;
background: rgb(131, 139, 139);
}
英文:
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);
}
答案1
得分: 3
只需要两个步骤就可以在Quarto revealjs中完成相同的操作。首先，定义一个带有overflow-x: auto的CSS类，然后将该类传递给代码块选项class-output，以便输出具有水平滚动。
第一个例子：
.hscroll {
overflow-x: auto;
white-space: nowrap;
}
第二个例子：
knitr:
opts_chunk:
class-output: hscroll
英文:
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;
}
```
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论