![如何将 TeX 数学融入网站?](https://linux22.com/image/239023/%E5%A6%82%E4%BD%95%E5%B0%86%20TeX%20%E6%95%B0%E5%AD%A6%E8%9E%8D%E5%85%A5%E7%BD%91%E7%AB%99%EF%BC%9F.png)
我应该如何在网站中整合 TeX 来呈现数学公式?如果有多种方法,最简单的方法是什么?
答案1
答案2
这里你可以找到 MathJaX 的一个示例:
http://latex.userpage.fu-berlin.de/math.html
源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Mathedemo</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<h2>Math in TeX notation</h2>
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}.$$
$$ \begin{array}{rcll}
y & = & x^{2}+bx+c\\
& = & x^{2}+2\times\dfrac{b}{2}x+c\\
& = & \underbrace{x^{2}+2\times\dfrac{b}{2}x+\left(\frac{b}{2}\right)^{2}}-
{\left(\dfrac{b}{2}\right)^{2}+c}\\
& & \qquad\left(x+{\dfrac{b}{2}}\right)^{2}\\
& = & \left(x+\dfrac{b}{2}\right)^{2}-\left(\dfrac{b}{2}\right)^{2}+c
& \left|+\left({\dfrac{b}{2}}\right)^{2}-c\right.\\
y+\left(\dfrac{b}{2}\right)^{2}-c & = & \left(x+
\dfrac{b}{2}\right)^{2} & \left|\strut(\textrm{vertex form})\right.\\
y-y_{S} & = & (x-x_{S})^{2}\\
S(x_{S};y_{S}) & \,\textrm{or}\,
& S\left(-\dfrac{b}{2};\,\left(\dfrac{b}{2}\right)^{2}-c\right)
\end{array} $$
<h2>Math in MathML notation</h2>
When <math><mi>a</mi><mo>≠</mo><mn>0</mn></math>,
there are two solutions to <math>
<mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo> <mi>b</mi><mi>x</mi>
<mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math> and they are
<math mode="display">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
<mtext>.</mtext>
</math>
</body>
</html>
答案3
我将添加两种数学渲染替代方案,仅供参考。就我个人而言,我更喜欢使用 MathML 或 MathJaX。
MimeTeX 和 MathTeX 都是cgi
用 C 编写的程序。
MimeTeX 是在 gpl 下授权的,它可让您轻松地将 LaTeX 数学嵌入到 html 页面中。它解析 LaTeX 数学表达式并立即生成相应的
gif
图像,而不是通常的 TeXdvi
。而且 mimeTeX 是一个完全独立的小程序,它不以任何方式使用 TeX 或其字体。它只是cgi
您放在站点cgi-bin/
目录中的一个程序,没有其他依赖项。因此 mimeTeX 非常容易安装。而且它同样易于使用。只需在文档中您想要查看相应 LaTeX 表达式的任何位置放置一个 html<img>
标记即可。例如,
<img src="../cgi-bin/mimetex.cgi?f(x)=\int_{-\infty}^xe^{-t^2}dt"
alt="" border=0 align=middle>
立即动态生成相应的 gif 图像,显示您放置该
<img>
标签的任何位置。 MimeTeX 不需要中间dvi-to-gif
转换,也不会gif
为每个转换后的表达式创建单独的文件。(但您可以使用 mimeTeX 的-DCACHEPATH=\"path/\"
编译选项缓存图像。)
MathTeX 是 gpl 授权的
cgi
程序,它可让您轻松地将 LaTeX 数学嵌入到您自己的 html 页面、博客、wiki 等中。它解析 LaTeX 数学表达式并立即生成相应的gif
(或png
)图像,而不是通常的 TeX 。因此,只需在文档中您想要查看相应 LaTeX 表达式的位置dvi
放置一个 html 标签即可。例如,<img>
<img src="/cgi-bin/mathtex.cgi?f(x)=\int_{-\infty}^xe^{-t^2}dt"
alt="" border=0 align="middle">
立即生成相应的
gif
,显示放置该<img>
标签的任何位置。
mathTeX 依赖项
MathTeX 使用TeX 发行版中的
latex
和dvipng
程序以及所有必要的字体等。有时,您可能需要dvipng
单独下载。如果您无法或不想安装dvipng
,则可以在编译 mathTeX 时选择性地指定–DDVIPS
和–DCONVERT
开关。然后 mathTeX 使用dvips
TeX 发行版中的 ,并从 ImageMagick 包中转换,而不是dvipng
。
[...]
这些依赖项(始终
latex
和任一dvipng
)dvips/convert
必须全部安装在您的服务器上,然后才能运行 mathTeX。如果您在安装它们时遇到任何问题或问题,请咨询您的 ISP 或系统管理员。如果您无法安装它们,请参阅 mimeTeX。
答案4
卡泰克斯
我也强烈建议研究https://katex.org/
它与 MathJax 非常相似,但它有一个基本的惊人功能:服务器端渲染。也许 MathJax 3 实现了它:http://docs.mathjax.org/en/v3.2-latest/upgrading/whats-new-3.0.html#server-side-mathjax但不确定。
有了它,您可以在服务器上将公式完全呈现为 div 和 span 等 HTML 元素,然后仅使用相应的 CSS 即可在浏览器上正确呈现这些公式。
这与 MathJax(肯定是 3.0 之前的版本)不同,据我所知,它仅在浏览器上呈现,因此用户最终可能会看到他们的 LaTeX 公式扩展为呈现的字符串。如果从 LaTeX 输入到呈现的输出的高度发生变化,这还可能意味着页面重新排版。
您所要做的就是:
katex.renderToString('\\frac{1}{\\sqrt{2}}')
然后将该字符串添加到文档并包含 CSS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css" integrity="sha512-J8je2SgrCzA7hNBeiCJiA6oETHTTdp3We3EriOgJp6POycGLcDXj5dSwWlAPQcYGeaQ4N3uf30aOg/Nt5pxW2g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
这是一个最简单的例子。它不是严格意义上的服务器端,但显然可以通过在katex.renderToString
渲染页面时调用 Node.js 服务器来轻松实现,我现在每天都在使用它,所以我确信它可以正常工作:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Client-side KaTeX</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.js" integrity="sha512-1kNZVA50gKlorLAWU83+SdOAUwABzfFFQ4WuOAZTeS/UhNhnm9zU7rDv/Q5NEzSnr5u2L6uhR/+8icjjmHjSnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css" integrity="sha512-J8je2SgrCzA7hNBeiCJiA6oETHTTdp3We3EriOgJp6POycGLcDXj5dSwWlAPQcYGeaQ4N3uf30aOg/Nt5pxW2g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
</body>
<script>
document.getElementsByTagName('body')[0].innerHTML = katex.renderToString('\\frac{1}{\\sqrt{2}}')
</script>
</html>