如何让RMarkdown折叠代码块显示自定义标签/描述？

要实现折叠代码块旁显示自定义描述，你可以通过自定义knitr钩子+CSS或者客户端JavaScript+CSS两种方式来搞定，下面是具体实现步骤：

方法一：用knitr钩子生成带标签的折叠结构 #

这种方法在渲染阶段就把标签和按钮整合到代码块容器里，兼容性更好。

1. 先在文档的setup代码块里添加自定义钩子函数：

knitr::knit_hooks$set(source = function(x, options) {
  # 读取代码块的fold-label参数
  label <- options$`fold-label`
  if (!is.null(label)) {
    # 生成包含按钮和标签的HTML结构
    paste0(
      '<div class="folded-code-container">',
      '<button class="btn btn-default code-folding-btn" type="button" data-toggle="collapse" data-target="#', options$label, '" aria-expanded="false" aria-controls="', options$label, '">',
      'Show',
      '</button>',
      '<span class="code-fold-label">', label, '</span>',
      '<pre class="collapse" id="', options$label, '"><code class="r">', x, '</code></pre>',
      '</div>'
    )
  } else {
    # 无标签时用默认的折叠逻辑
    knitr:::hook_source(x, options)
  }
})

2. 添加CSS样式来区分标签和普通文本：

<style>
.code-fold-label {
  margin-left: 10px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.95em;
  opacity: 0.8;
}

.folded-code-container {
  margin: 1.2em 0;
}
</style>

3. 使用时直接给代码块加fold-label参数：

library(tidyverse)
raw_data <- read_csv("raw_data.csv")
clean_data <- raw_data %>% drop_na() %>% mutate(date = as.Date(date))

{fold-label="导入并清洗数据"}

方法二：用JavaScript动态添加标签 #

这种方法不需要修改knitr渲染逻辑，而是在页面加载后动态读取代码块的自定义属性并添加标签，适合不想改动钩子的场景。

1. 添加JS脚本和CSS：

<style>
.code-fold-label {
  margin-left: 10px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.95em;
  opacity: 0.8;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  // 遍历所有折叠代码块的按钮
  document.querySelectorAll('.code-folding-btn').forEach(btn => {
    // 找到对应的代码块容器
    const codePre = btn.parentElement.querySelector('pre.collapse');
    if (!codePre) return;
    // 读取自定义属性里的标签文本
    const labelText = codePre.getAttribute('data-fold-label');
    if (labelText) {
      const labelSpan = document.createElement('span');
      labelSpan.className = 'code-fold-label';
      labelSpan.textContent = labelText;
      btn.after(labelSpan);
    }
  });
});
</script>

2. 使用时给代码块加data-fold-label属性：

library(ggplot2)
ggplot(clean_data, aes(x = date, y = value)) + 
  geom_line(color = "#3498db") +
  labs(title = "数据趋势图")

{data-fold-label="绘制数据趋势图"}

两种方法都能实现你要的效果：折叠状态下，Show按钮旁会显示自定义描述，且样式和普通文本区分开。

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