非jQuery环境下AJAX加载内容的KaTeX渲染JavaScript失效问题

问题的核心很明确：KaTeX默认只会在页面首次加载完成时自动扫描并渲染现有DOM中的数学公式，而通过AJAX动态插入的新内容，KaTeX不会自动识别处理。所以我们需要在内容成功加载并插入到页面后，手动触发KaTeX的渲染操作。

步骤1：完善AJAX逻辑并添加渲染触发 #

下面分原生JS和jQuery两种常用场景给出完整代码示例：

原生JavaScript版本

// 假设PHP已经生成了math目录下的文件列表数组x
x.forEach(function(file) {
  // 跳过目录本身和上级目录的占位符
  if (file === '.' || file === '..') return;
  
  // 发起AJAX请求加载文件内容
  const xhr = new XMLHttpRequest();
  xhr.open('GET', './math/' + file, true);
  
  xhr.onload = function() {
    if (this.status === 200) {
      // 将加载的内容插入到#main容器中
      const mainContainer = document.getElementById('main');
      mainContainer.innerHTML += this.responseText;
      
      // 关键操作：插入内容后手动调用KaTeX批量渲染
      renderMathInElement(mainContainer, {
        throwOnError: false, // 可选：忽略渲染错误，避免单个公式问题影响全局
        displayMode: false, // 可选：控制公式是否以块级元素显示
        // 可根据需求添加其他KaTeX配置项
      });
    }
  };
  
  xhr.send();
});

jQuery版本

$.each(x, function(index, file) {
  if (file === '.' || file === '..') return;
  
  $.get('./math/' + file, function(data) {
    const $main = $('#main');
    $main.append(data);
    
    // 手动触发KaTeX渲染
    renderMathInElement($main[0], {
      throwOnError: false,
      displayMode: false
    });
  });
});

步骤2：确认KaTeX依赖文件完整 #

你提到已经通过CDN引入了KaTeX库，但要注意：auto-render.min.js是实现批量渲染DOM元素的关键，必须确保引入它：

<!-- KaTeX核心样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
<!-- KaTeX核心脚本 -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
<!-- 批量渲染必备的扩展脚本 -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js"></script>

步骤3：优化PHP生成文件列表的代码 #

确保PHP生成的JS数组x格式正确，避免语法错误：

echo "var x = [];";
$dir = "./math/";
$a = scandir($dir);
foreach ($a as $file) {
  // 只加载目录下的文件，跳过子目录
  if (is_file($dir . $file)) {
    // 转义文件名中的特殊字符，防止JS语法报错
    echo "x.push('" . addslashes($file) . "');";
  }
}

这样调整后，AJAX加载的内容里的数学公式就会被KaTeX正确渲染了。

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