使用KaTeX或MathJax渲染TeX [英] Render TeX with KaTeX or MathJax
问题描述
我有一个HTML文档
< div>
< p>一个段落< / p>
< p>另一段< / p>
< / div>
在某些段落中，我有
< p>一些文字和公式$ a = b + c $。< / p>
我希望带有$ -signs的文本使用 KaTeX 。
问题是，如果我想使用它在浏览器中，我必须使用
katex.render（c = \\\\\\ a ^ 2 + b ^ 2}，元素）;
所以我需要分配一个元素。
<那么我应该真的写这样的html文档还是有其他选择：
< div>
< p>一个段落< / p>
< p>另一段< / p>
< p>一些文字和公式< span id =firstFormula>< / span>。< / p>
< p>更多文字和其他公式< span id =secondFormula>< / span>。< / p>
< / div>
< script>
const firstFormula = document.getElementById（'firstFormula'）;
katex.render（c = \\\\\sqrt {a ^ 2 + b ^ 2}，firstFormula）;
const secondFormula = document.getElementById（'secondFormula'）;
katex.render（c = \\\\\sqrt {a ^ 2 + b ^ 2}，secondFormula）;
< / script>
并为每个公式重复相同的模式？
似乎有点奇怪，我不能只写文本并用tex渲染输出替换所有文本公式。
例如，可汗学院如何做它在这个页面他们结合文本和公式？他们是否在服务器上呈现所有内容并将其发送给客户端？
在这种情况下使用MathJax会更好吗？我对KaTeX更加热衷，因为它更快。
默认情况下，MathJax不使用 $ 作为分隔符。因此，您必须手动配置它们。
以下使用MathJax的示例来自其文档。
<！DOCTYPE html>
< html>
< head>
< title> MathJax TeX测试页< / title>
< script type =text / x-mathjax-config>
MathJax.Hub.Config（{tex2jax：{inlineMath：[['$'，'$']，['\\（'，'\\）']]}}};
< / script>
< script type =text / javascriptasync
src =https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML>
< / script>
< / head>
< body>
当$ a \\\
e 0 $时，\（ax ^ 2 + bx + c = 0 \）有两种解决方案，它们是
$$ x = {-b \ pm \ sqrt {b ^ 2-4ac} \over 2a}。$$
< / body>
< / html>
如果你想使用KaTeX，你需要包含脚本来自动渲染并制作它使用 $ 作为分隔符。请参阅 https://github.com/Khan/KaTeX/ blob / master / contrib / auto-render / README.md 获取说明。 此处就是一个例子。
I have a html document
<div>
<p>One paragraph</p>
<p>Another paragraph</p>
</div>
and in some of the paragraphs, I have
<p>Some text and a formula $a = b + c$.</p>
and I want the text withing the $-signs to be rendered as TeX math using KaTeX.
The problem is that if I want to use it in the browser, I have to use
katex.render("c = \\pm\\sqrt{a^2 + b^2}", element);
so I need to assign an element.
So should I really write my html document like this or are there any other options:
<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>
and repeat the same pattern for each formula?
It seems a bit weird that I cannot just write the text and replace all the text formulas with tex rendered output.
How does, for instance, Khan Academy do it on this page where they combine text and formulas? Do they render everything on the server and send it to the client?
Is it better to use MathJax in this situation? I am just more keen on KaTeX since it is much faster.
By default, MathJax doesn't use $ as delimiters. So you'll have to configure them manually.
The following example using MathJax is from its 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>
If you want to use KaTeX, you'll need to include the script to auto render and make it use $ as delimiters. See https://github.com/Khan/KaTeX/blob/master/contrib/auto-render/README.md for instructions. Here is an example.
这篇关于使用KaTeX或MathJax渲染TeX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
