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。

我将我想要的所有内容都包含在span标签内的katex中，并为它们提供“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].innerText, math[i]);
}

因此，只要我在带有类数学的元素中写入数学文本，它就会被katex呈现。

Answer 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>

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

2 个答案: