javascript - 在浏览器中使用KaTeX渲染数学

我正在使用KaTeX在浏览器中渲染数学。

现在我正在使用类似

document.getElementById('el').innerHTML = function () {
  const span = document.createElement('span');
  katex.render('2+\frac{1}{x}', span);
  return span.innerHTML;
});

但是我必须将其应用于某个元素，然后从该元素中获取html并插入我的字符串中，这看起来确实很愚蠢。

我已经浏览了KaTeX文档，但是找不到任何可以帮助我直接在浏览器中使用katex.render('2+3+4')之类的文本呈现的内容。

最佳答案

我不知道您是否还在寻找答案，但这也许会有所帮助。

首先，我从CDN链接到katex.min.js和katex.min.css。

我将要渲染在katex中的所有内容包装在span标签内，并给它们提供“数学”类

例如:

<span class='math'>2+\frac{1}{x}</span>

然后，在一对脚本标签中添加以下内容:

var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
  katex.render(math[i].textContent, math[i]);
}

因此，只要我将数学文本写在带有class math类的元素内，它就会由katex呈现。

编辑:我们应该使用 textContent 而不是innerHTML。我在使用innerHTML时遇到了问题。参见using katex, '&' alignment symbol displays as 'amp;'