R Markdown列表中设置代码与图可折叠区域失效问题咨询

• 第一类：修正静态HTML与代码块的排版规则，消除pandoc解析歧义
  该问题的核心成因是pandoc的解析边界规则：HTML容器与内部块级元素之间必须满足严格的排版要求，否则会被自动拆分。ggplot生成的绘图是knitr插入的图片元素，属于邻近块级内容，轻度解析错位时依然会留在<details>容器范围内，因此可以正常展示；但代码块是<pre>包裹的强块级元素，只要排版不符合要求就会被完全剥离出details容器，最终导致点击折叠区域时看不到内容。
  具体调整方式：

  • 确保<details>、<summary>、</details>标签全部顶格书写，不要嵌套在其他文本块的缩进层级里
  • 标签与内部的R代码块之间插入空行，代码块的三反引号分隔符不要加任何前置缩进
  • 列表项与后面的<details>块之间也要加空行，避免pandoc把details标签识别成列表项的内嵌内容
  • 代码块的分隔符用标准的三个反引号（`），不要用单引号，否则pandoc不会将其识别为有效代码块
    合规排版示例：

  - 第一行列表文本
  - 第二行列表文本
  
  <details>
  <summary>See code</summary>
  
  ```{r, echo=TRUE}
  library(ggplot2)
  data(cars)
  

  See plot

  ggplot(cars, aes(speed, dist)) + geom_point()
  

  ```

• 第二类：启用R Markdown内置的代码折叠功能，替代手写HTML
  不需要自己手写<details>标签，直接在文档YAML配置中开启HTML输出的内置代码折叠选项，所有R代码块会自动套用符合解析规则的折叠容器，从根源上避免解析错位。
  配置示例：

  output:
    html_document:
      code_folding: show # 所有代码块默认展开，用户可手动点击折叠
      # 可搭配设置 hide 让代码块默认折叠
  

  该方式对ggplot绘图块完全兼容，不会出现内容脱离容器的问题。

• 第三类：添加内嵌脚本修正元素归属，适配已有的旧文档
  对于已经写了大量手写<details>标签、不想大幅调整原有排版的场景，可以在文档末尾加一段轻量的内嵌JS，在页面加载完成后，自动把错位的代码块挪回对应的折叠容器中：

  <script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('details').forEach(detailsEl => {
      // 检查下一个相邻元素，如果是被pandoc剥离的代码块，就挪回当前details容器
      let sibling = detailsEl.nextElementSibling;
      while (sibling && sibling.tagName === 'PRE') {
        detailsEl.appendChild(sibling);
        sibling = detailsEl.nextElementSibling;
      }
    })
  })
  </script>
  

  这种方式不需要修改原有文档的内容，哪怕代码块被pandoc解析到了details标签外面，也会自动归位，保证折叠区域可以正常展示内容。

• 第四类：用专用辅助函数生成折叠容器，提升稳定性
  避免直接手写HTML标签，使用专门处理R Markdown折叠内容的函数生成容器，函数内部已经适配了pandoc的解析规则，不会出现内容错位。调用时直接把代码块、绘图结果作为参数传入函数即可，不需要考虑排版的缩进、空行要求。

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