使用KaTeX时对齐符号&显示为amp;的技术问题求助

嘿，这个问题我之前踩过坑！本质是HTML的自动转义在搞鬼——当你把带&的LaTeX代码直接写在HTML标签内容里时，浏览器会自动把&转换成HTML实体&，KaTeX拿到的就不是原本的对齐符号了，自然会显示成amp;。给你几个靠谱的解决办法：

方法1：用data属性存储LaTeX代码 #

把LaTeX代码放在元素的data-*属性里，这样浏览器不会转义其中的特殊字符，JS读取时能拿到原始代码。

示例代码： #

HTML部分：

<span class='math' data-latex='\begin{bmatrix}a & b \\c & d\end{bmatrix}'></span>

JS部分：

var mathElements = document.getElementsByClassName('math');
for (var i = 0; i < mathElements.length; i++) {
  // 从data属性读取原始LaTeX代码
  var latexCode = mathElements[i].dataset.latex;
  katex.render(latexCode, mathElements[i], {
    throwOnError: false // 可选：忽略小错误，避免渲染中断
  });
}

方法2：手动转义回原始符号 #

如果一定要从元素的innerHTML读取代码，可以手动把转义后的&替换回&，再传给KaTeX渲染。

示例代码： #

var mathElements = document.getElementsByClassName('math');
for (var i = 0; i < mathElements.length; i++) {
  // 替换所有转义后的&实体
  var latexCode = mathElements[i].innerHTML.replace(/&amp;/g, '&');
  katex.render(latexCode, mathElements[i], {
    throwOnError: false
  });
}

方法3：使用KaTeX的auto-render扩展（最省心） #

KaTeX官方提供了auto-render扩展，它会自动处理HTML转义问题，还支持多种公式分隔符（比如$...$、$$...$$），不用自己写循环逻辑。

示例代码： #

首先引入扩展脚本：

<script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/auto-render.min.js"></script>

然后初始化渲染：

document.addEventListener("DOMContentLoaded", function() {
  renderMathInElement(document.body, {
    delimiters: [
      {left: "$$", right: "$$", display: true}, // 块级公式
      {left: "$", right: "$", display: false},   // 行内公式
      {left: "\\(", right: "\\)", display: false},
      {left: "\\[", right: "\\]", display: true}
    ],
    throwOnError: false
  });
});

之后你直接在HTML里写公式即可，比如：

<span class='math'>\begin{bmatrix}a & b \\c & d\end{bmatrix}</span>

或者用分隔符包裹：

$$\begin{bmatrix}a & b \\c & d\end{bmatrix}$$

小提醒 #

尽量避免直接在HTML标签的文本内容里写带&、<、>这类特殊字符的LaTeX代码，因为浏览器的HTML解析规则会自动转义它们，容易引发这类问题。用data属性或auto-render扩展是更稳妥的选择。

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