用KaTeX或MathJax渲染TeX

我有一个html文档

<div>
  <p>One paragraph</p>
  <p>Another paragraph</p>
</div>

在一些段落中，我有

<p>Some text and a formula $a = b + c$.</p>

，我希望$-符号内的文本使用KaTeX渲染为TeX数学。

问题是如果我想在浏览器中使用它，我必须使用

katex.render("c = \pm\sqrt{a^2 + b^2}", element);

所以我需要赋值一个元素

我真的应该这样写我的html文档吗?还是有其他的选择:

<div>
  <p>One paragraph</p>
  <p>Another paragraph</p>
  <p>Some text and a formula <span id="firstFormula"></span>.</p>
  <p>More text and another formula <span id="secondFormula"></span>.</p>
</div>
<script>
  const firstFormula = document.getElementById('firstFormula');
  katex.render("c = \pm\sqrt{a^2 + b^2}", firstFormula);
  const secondFormula = document.getElementById('secondFormula');
  katex.render("c = \pm\sqrt{a^2 + b^2}", secondFormula);
</script>

并对每个公式重复相同的模式?

这似乎有点奇怪，我不能只是写文本和替换所有的文本公式与tex渲染输出。

例如，可汗学院如何在这个页面上将文本和公式结合起来?他们是否渲染服务器上的所有内容并将其发送给客户端?

在这种情况下使用MathJax更好吗?我只是更喜欢KaTeX，因为它快得多。

默认情况下，MathJax不使用$作为分隔符。所以你必须手动配置它们。

以下使用MathJax的示例来自其文档。

<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}});
</script>
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
When $a ne 0$, there are two solutions to (ax^2 + bx + c = 0) and they are
$$x = {-b pm sqrt{b^2-4ac} over 2a}.$$
</body>
</html>

如果你想使用KaTeX，你需要包含脚本来自动渲染，并使它使用$作为分隔符。请参阅https://github.com/Khan/KaTeX/blob/master/contrib/auto-render/README.md获取说明。下面是一个例子:

相关内容

最新更新

热门标签：