如何在RMarkdown中运行JavaScript并将console.log输出渲染到文档？

方法1：全局重写console.log定向输出 #

在RMarkdown文档的开头（比如放在单独的HTML代码块里）插入以下初始化脚本，它会重写原生的console.log，将输出内容自动追加到当前代码块下方的输出区域：

<script>
// 保存原生console.log
window._originalConsoleLog = console.log;

console.log = function(...args) {
  // 获取当前代码块对应的输出容器
  const lastChunkOutput = document.querySelector('.chunk:last-child .sourceCode + .output');
  if (lastChunkOutput) {
    // 处理输出内容，对象转为格式化JSON
    const outputContent = args.map(item => 
      typeof item === 'object' ? JSON.stringify(item, null, 2) : String(item)
    ).join(' ');
    // 创建符合格式的输出元素
    const preElement = document.createElement('pre');
    preElement.textContent = `> ${outputContent}`;
    lastChunkOutput.appendChild(preElement);
  }
  // 保留控制台日志功能
  window._originalConsoleLog.apply(console, args);
};
</script>

之后直接写标准的JS代码块即可，无需额外配置，console.log的内容会自动渲染到代码块下方：

function foo() {
   return "foo"
}

console.log(foo())

方法2：用knitr钩子实现代码块级捕获 #

如果需要更灵活的控制（比如只为特定JS代码块启用输出捕获），可以在R的setup代码块中定义一个自定义knitr钩子：

knitr::knit_hooks$set(capture_js_log = function(before, options, envir) {
  if (before) {
    # 代码块执行前插入捕获脚本
    return('<script>
      const _tempLog = console.log;
      const _outputBox = document.createElement("div");
      document.currentScript.parentElement.appendChild(_outputBox);
      console.log = function(...args) {
        const _text = args.map(a => typeof a === "object" ? JSON.stringify(a, null, 2) : String(a)).join(" ");
        _outputBox.innerHTML += `<pre>&gt; ${_text}</pre>`;
        _tempLog.apply(console, args);
      };
    </script>')
  } else {
    # 代码块执行后恢复原生console.log
    return('<script>console.log = _tempLog;</script>')
  }
})

在需要捕获输出的JS代码块中添加hook='capture_js_log'属性：

function foo() {
   return "foo"
}

console.log(foo())

方法3：封装简化的输出函数 #

如果不想修改全局console.log，可以封装一个极简的输出函数，替代原生console.log来生成文档内的输出：

// 定义全局输出函数
function logToDoc(content) {
  const outputEl = document.createElement('pre');
  outputEl.textContent = `> ${content}`;
  // 将输出追加到当前代码块的父元素中
  document.currentScript.parentElement.appendChild(outputEl);
  // 同时保留控制台日志
  console.log(content);
}

// 业务代码
function foo() {
   return "foo"
}

// 调用自定义输出函数
logToDoc(foo())

内容的提问来源于stack exchange，提问作者Adam B.