使用 KaTeX 或 MathJax 渲染 TeX

Question

我有一个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 渲染输出替换所有文本公式，这似乎有点奇怪。

例如，可汗学院如何在 this page 上结合文本和公式？他们是否在服务器上呈现所有内容并将其发送到客户端？

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

Answer 1

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

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

<!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 for instructions. Here 示例。

使用 KaTeX 或 MathJax 渲染 TeX

Render TeX with KaTeX or MathJax

javascript

node.js

mathjax

tex

katex