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

Question

我正在使用 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')。

Answer 1

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

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

我将我想要在 katex 中渲染的所有内容都包装在 span 标签内，并给它们类“math”

例如:

<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]);
}

所以只要我将我的数学文本写在一个带有 math 类的元素中，它就会被 katex 渲染。

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