如何将 TeX 数学融入网站？

Question 1

要在网络上显示数学，您有多种选择。有数学语法标准的优点是它得到了维护 HTML 和 CSS 标准的同一机构的认可。然而，它不是基于 LaTeX 的。有工具可以将 LaTeX 代码转换为 MathML。

有“重型”MathJax选项。您可以在自己的服务器上安装它，也可以使用他们的内容分发网络 (CDN)。

最简单的方法可能是使用类似编码齿轮生成只需包含 HTMLimg标签的图像……

Answer

要在网络上显示数学，您有多种选择。有数学语法标准的优点是它得到了维护 HTML 和 CSS 标准的同一机构的认可。然而，它不是基于 LaTeX 的。有工具可以将 LaTeX 代码转换为 MathML。

有“重型”MathJax选项。您可以在自己的服务器上安装它，也可以使用他们的内容分发网络 (CDN)。

最简单的方法可能是使用类似编码齿轮生成只需包含 HTMLimg标签的图像……

Question 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>&#x2260;</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>&#x2212;</mo>
        <mi>b</mi>
        <mo>&#x00B1;</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>&#x2212;</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>

Answer

这里你可以找到 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>&#x2260;</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>&#x2212;</mo>
        <mi>b</mi>
        <mo>&#x00B1;</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>&#x2212;</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>

Question 3

我将添加两种数学渲染替代方案，仅供参考。就我个人而言，我更喜欢使用 MathML 或 MathJaX。

MimeTeX 和 MathTeX 都是cgi用 C 编写的程序。

MimeTeX

MimeTeX 是在 gpl 下授权的，它可让您轻松地将 LaTeX 数学嵌入到 html 页面中。它解析 LaTeX 数学表达式并立即生成相应的gif图像，而不是通常的 TeX dvi。而且 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/\"编译选项缓存图像。）

数学TeX

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 使用dvipsTeX 发行版中的，并从 ImageMagick 包中转换，而不是dvipng。

[...]

这些依赖项（始终latex和任一dvipng）dvips/convert必须全部安装在您的服务器上，然后才能运行 mathTeX。如果您在安装它们时遇到任何问题或问题，请咨询您的 ISP 或系统管理员。如果您无法安装它们，请参阅 mimeTeX。

Answer