Quarto RevealJS演示中代码折叠按钮的实现方案问询

Reveal.js 格式默认不支持 code-fold 选项，这就是你配置后没看到折叠按钮的原因——Quarto 的 code-fold 主要适配普通 HTML、书籍等文档类型，Reveal.js 演示文稿需要用以下两种方式实现代码折叠：

方案1：使用官方 code-tools 扩展（推荐） #

Quarto 官方维护的 code-tools 扩展专门为 Reveal.js 补充了代码折叠等功能，步骤如下：

1. 安装扩展，在终端执行：

quarto add quarto-ext/code-tools

2. 修改文档 YAML 头部，启用扩展并全局配置代码折叠：

---
title: "Code-fold in revealjs"
format: revealjs
filters:
  - code-tools
code-fold: true
---

3. 代码块级别配置保持你原来的写法即可：

```{r}
#| code-fold: true
#| code-summary: "expand for full code"
library(ggplot2)
dat <- data.frame(cond = rep(c("A", "B"), each=10),
                  xvar = 1:20 + rnorm(20,sd=3),
                  yvar = 1:20 + rnorm(20,sd=3))

ggplot(dat, aes(x=xvar, y=yvar)) +
  geom_point(shape=1) + 
  geom_smooth() 

这种方式的样式和 Quarto 原生 `code-fold` 完全一致，体验更统一。

## 方案2：自定义 CSS + JavaScript 实现
如果不想安装扩展，可以手动添加自定义脚本实现折叠功能：
1. 在 YAML 头部插入自定义样式和脚本：
```yaml
---
title: "Code-fold in revealjs"
format: revealjs
include-in-header:
  - text: |
      <style>
        .code-fold-container {
          position: relative;
        }
        .code-fold-btn {
          position: absolute;
          top: 10px;
          right: 10px;
          background: #f0f0f0;
          border: none;
          padding: 4px 8px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 12px;
        }
        .code-fold-content {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease;
        }
        .code-fold-content.expanded {
          max-height: 500px;
        }
      </style>
      <script>
        document.addEventListener('DOMContentLoaded', function() {
          document.querySelectorAll('.code-fold').forEach(block => {
            const container = document.createElement('div');
            container.className = 'code-fold-container';
            block.parentNode.insertBefore(container, block);
            container.appendChild(block);
            
            const btn = document.createElement('button');
            btn.className = 'code-fold-btn';
            btn.textContent = '展开代码';
            container.appendChild(btn);
            
            const codeContent = block.querySelector('pre');
            codeContent.className += ' code-fold-content';
            
            btn.addEventListener('click', function() {
              codeContent.classList.toggle('expanded');
              btn.textContent = codeContent.classList.contains('expanded') ? '收起代码' : '展开代码';
            });
          });
        });
      </script>
---

2. 给需要折叠的代码块添加类名：

```{r}
#| class: code-fold
library(ggplot2)
dat <- data.frame(cond = rep(c("A", "B"), each=10),
                  xvar = 1:20 + rnorm(20,sd=3),
                  yvar = 1:20 + rnorm(20,sd=3))

ggplot(dat, aes(x=xvar, y=yvar)) +
  geom_point(shape=1) + 
  geom_smooth() 

这种方式可以自由修改按钮样式、动画效果等，灵活性更高。

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