如何在Quarto RevealJS演示文稿中实现代码块水平滚动

要在Quarto RevealJS演示文稿里实现类似xaringan的可滚动代码块，只需调整CSS选择器并配置Quarto的样式引用，具体步骤如下：

1. 编写自定义CSS样式 #

新建一个CSS文件（比如命名为custom.css），将你原xaringan的CSS代码修改为适配Quarto RevealJS的选择器：

/* 可滚动代码块样式 */
.reveal pre code {
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 300px; /* 可根据幻灯片布局调整高度 */
  padding: .5em;
  color: #fff;
  background: rgb(131, 139, 139);
}

• 替换原.remark-code为.reveal pre code：这是Quarto RevealJS中代码块的默认选择器
• 新增overflow-y: auto：确保代码纵向超出高度时显示滚动条
• 把max-height: 100%改为固定像素值（如300px）：避免代码块占满整个幻灯片高度，影响滚动体验

如果只想让特定代码块生效，可改用类选择器：

/* 仅针对带scrollable类的代码块 */
.reveal pre.scrollable code {
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 300px;
  padding: .5em;
  color: #fff;
  background: rgb(131, 139, 139);
}

2. 在Quarto文档中引用CSS #

打开你的Quarto演示文稿（.qmd文件），在YAML配置块中添加自定义CSS的引用：

---
title: "你的演示文稿标题"
format:
  revealjs:
    css: custom.css
---

3. （可选）针对特定代码块启用滚动 #

如果用了类选择器的CSS，在需要滚动的代码块中指定class参数即可：

# 示例长代码
long_code <- function() {
  for (i in 1:50) {
    cat("这是第", i, "行测试内容\n")
  }
}
long_code()

内容的提问来源于stack exchange，提问作者Chris_030500