在浏览器中使用 KaTeX 渲染数学答案

【问题标题】：Render math with KaTeX in the browser在浏览器中使用 KaTeX 渲染数学
【发布时间】：2016-10-10 13:34:46
【问题描述】：

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

【问题讨论】：

stackoverflow.com/questions/39930756/…的可能重复
为什么不简单地katex.render('2+\\frac{1}{x}', document.getElementById('el'));？

标签： javascript node.js mathjax katex

【解决方案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]);
}

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

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

【讨论】：

【解决方案2】：

使用 KaTeX 的 auto-render extension，它可以让您使用 $$ 之类的分隔符将 KaTeX 直接添加到 HTML 中，然后一次性渲染：

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js"></script>
</head>
<body>
    <div id="el"><span>$$2+\frac{1}{x}$$</span></div>
    <script>
        renderMathInElement(document.body);
    </script>
</body>
</html>

【讨论】：

如何在 Node 中使用这个扩展？ npm install katex 不包含此扩展