在浏览器中使用 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

使用 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>$+\frac{1}{x}$$</span></div>
    <script>
        renderMathInElement(document.body);
    </script>
</body>
</html>

Answer 2

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

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

我将我想要在 katex 中渲染的所有内容都包装在 span 标签内，并给它们 class '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]);
}

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

编辑：我们应该使用 textContent 而不是 innerHTML。我运行遇到了使用 innerHTML 的问题。参见

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

Render math with KaTeX in the browser

javascript

node.js

mathjax

katex