R Markdown html_document中如何合并无输出的连续代码块

不需要手动为每个代码块配置ref.label，通过注入自定义JavaScript搭配少量CSS即可实现需求，全程不需要修改现有代码块的参数配置。

实现逻辑 #

R Markdown渲染为html_document格式后，每个代码块会被包裹在class="chunk"的div容器中：

• 无输出的代码块（设置eval=FALSE/results="hide"/运行后无任何输出内容）：容器内仅包含<pre class="r">代码节点，不存在输出、警告、消息、报错类的子节点
• 有输出的代码块：容器内除代码节点外，还会存在对应输出内容的节点
  页面加载完成后，遍历所有chunk容器，将DOM结构上相邻、且均属于无输出纯代码类型的代码块内容合并，移除多余容器即可，不会破坏文档原有结构。

具体操作 #

1. 添加自动合并的JavaScript逻辑 #

直接在Rmd文档末尾（最后一个代码块之后）添加如下JS代码块即可，注意设置代码块参数为echo=FALSE：

```{js, echo=FALSE}
document.addEventListener('DOMContentLoaded', function() {
  const allChunks = Array.from(document.querySelectorAll('div.chunk'));
  let currentMergeTarget = null;

  allChunks.forEach(chunk => {
    // 判定当前块是否为无输出纯代码块
    const codeNode = chunk.querySelector('pre.r');
    const hasOutput = chunk.querySelector('pre:not(.r), div.message, div.warning, div.error');
    const isPureCodeBlock = codeNode && !hasOutput;

    if (isPureCodeBlock) {
      if (!currentMergeTarget) {
        // 记录合并序列的第一个块
        currentMergeTarget = chunk;
      } else {
        // 追加当前块代码到合并目标块，换行分隔
        const appendCode = codeNode.querySelector('code').innerText;
        const targetCodeNode = currentMergeTarget.querySelector('pre.r code');
        targetCodeNode.innerText += '\n' + appendCode;
        // 移除已被合并的冗余块
        chunk.remove();
      }
    } else {
      // 遇到非纯代码块，终止当前合并序列
      currentMergeTarget = null;
    }
  })
})
```

如果需要在多个Rmd文档中复用该逻辑，可以把上述JS代码保存为独立的.js文件，在YAML头部配置全局引入，无需每个文档重复编写：

output:
  html_document:
    includes:
      after_body: "path/to/merge-code-chunks.js"

2. （可选）添加CSS优化合并后样式 #

合并后的代码块默认会保留原有的边框和圆角，可能出现衔接处样式割裂的问题，添加如下CSS即可修复：

```{css, echo=FALSE}
/* 移除相邻合并代码块的多余间距和重复圆角 */
div.chunk + div.chunk:has(pre.r) {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
div.chunk:has(+ div.chunk pre.r) pre.r {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
```

效果说明 #

使用提供的示例文档渲染后：

• 开头相邻的eval=FALSE块、results="hide"块会自动合并为同一个代码块，连续显示两段代码
• 带正常输出的1+3代码块会独立保留，正常展示运行结果
• 中间夹了文本内容的eval=FALSE块（1+4）不会和其他块错误合并，完全符合使用需求

该方案仅会合并渲染后在页面中紧挨着的纯代码块，两个无输出代码块之间如果存在标题、文本、图片、表格等任何其他内容，都不会触发合并。

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