Quarto中代码注释与collapse: TRUE特性的兼容性问题

这个问题本质是两个特性的渲染逻辑冲突：collapse: TRUE默认逐行执行代码并穿插输出，而code-annotations: hover的默认处理会把整个代码块的输出统一后置，导致穿插效果丢失。下面提供两种可行的解决方法：

方法1：拆分代码块（通用所有格式） #

把原来的单个长代码块拆分成多个小代码块，每个小代码块同时启用collapse: TRUE和code-annotations: hover，这样每个小块的输出会和代码保持穿插，同时保留悬停注释功能。

示例：

#| collapse: TRUE
#| code-annotations: hover
#> 计算1到10的均值
mean(1:10)

#| collapse: TRUE
#| code-annotations: hover
#> 生成5个正态分布随机数
rnorm(5)

#| collapse: TRUE
#| code-annotations: hover
#> 计算1到5的总和
sum(1:5)

这种方法无需额外自定义代码，对HTML、PDF等所有输出格式都适用，缺点是代码块会被拆分，适合逻辑上可分段的代码。

方法2：自定义JS调整HTML输出（仅HTML格式） #

如果不想拆分代码块，可以通过自定义JavaScript调整输出位置，把后置的输出重新插回对应的代码行下方。在文档开头添加以下JS代码块，再正常使用同时启用两个特性的R代码块即可。

示例文档结构：

---
title: "修复Collapse与注释的输出兼容性"
format: html
---

```{js}
document.addEventListener('DOMContentLoaded', function() {
  // 定位同时启用两个特性的代码块
  const targetBlocks = document.querySelectorAll('.code-annotations.cell.collapse');
  
  targetBlocks.forEach(block => {
    const codeLines = block.querySelectorAll('.source-line');
    const outputElements = block.querySelectorAll('.cell-output');
    let outputIdx = 0;
    
    // 遍历代码行，将输出插入到对应行的下方
    codeLines.forEach(line => {
      if (outputIdx < outputElements.length && line.textContent.trim() !== '') {
        line.parentElement.insertBefore(outputElements[outputIdx], line.nextSibling);
        outputIdx++;
      }
    });
  });
});

#| collapse: TRUE
#| code-annotations: hover
#> 第一步：计算均值
mean(1:10)

#> 第二步：生成随机数
rnorm(5)

#> 第三步：求和
sum(1:5)

这种方法适合长代码块，无需拆分，但仅对HTML输出有效，PDF等其他格式无法使用。

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