2016-10-08 94 views
0

我有一个html文件渲染的TeX与Katex公司或MathJax

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

并在某些段落,我有

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

,我想文withing的$ -signs被渲染作为TeX数学使用KaTeX

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

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更加热衷,因为它速度更快。

+0

可能的重复[如何使用KaTeX渲染$ .. $中的所有内联公式?](https://stackoverflow.com/questions/27375252/how-can-i-render-all-inline-formulas- in-with-katex) – Vincent

回答

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.mdHere就是一个例子。

+0

未来的注意事项:cdn.mathjax.org即将结束其生命周期,请查看https://www.mathjax.org/cdn-shutting-down/获取迁移提示。 –