在网页中嵌入 LaTeX 的最佳方法是什么？答案

【问题标题】：What is the best way to embed LaTeX in a webpage?在网页中嵌入 LaTeX 的最佳方法是什么？
【发布时间】：2008-09-22 16:51:29
【问题描述】：

我不是在询问如何将 LaTeX 文档转换为 html。

我想做的是有一些方法可以在 html 文档中使用 LaTeX 数学命令，并让它在浏览器中正确显示。这可以在服务器端或客户端完成。

【问题讨论】：

有谁知道这里用的是什么解决方案？看起来真不错：mathwiki.ucdavis.edu/Algebra/Linear_algebra/…
@EthanAlvaree 是的，LaTeX。
@PythonGuy 谢谢。但是什么是 LaTeX 实现呢？例如。 Texvc、Mathjax、MathML，还有别的吗？有什么办法知道吗？
@EthanAlvaree 这是 MathJax。我查看了源代码，在底部，有两个从 MathJax CDN 导入 MathJax.js 的脚本标签。它非常易于使用，只需复制粘贴脚本标签即可。
还有：tex.stackexchange.com/questions/23804/…

标签： html latex

【解决方案1】：

我更喜欢MathJax，而不是选择渲染图像的解决方案（这会导致锯齿问题）。

MathJax 是一个开源的 Javascript 数学渲染引擎。它使用 CSS 和 Webfonts 而不是图像或 Flash，并且可以渲染 LaTeX 或 MathML。这样您就不会遇到缩放问题，甚至可以兼容屏幕阅读器。

【讨论】：

我发现的一个页面似乎表明 MediaWiki（这个问题的公认答案）由 MathJax 提供支持，这是真的吗？ github.com/mathjax/MathJax-docs/wiki/MathJax-and-MediaWiki

【解决方案2】：

我曾经开发过一个 jQuery 插件，它实际上是这样做的：jsLaTeX

这是一个最简单的使用示例：

$(".latex").latex();


<div class="latex">  
    \int_{0}^{\pi}\frac{x^{4}\left(1-x\right)^{4}}{1+x^{2}}dx =\frac{22}{7}-\pi  
</div>

以上将在您的页面上生成以下 LaTeX 方程：

插件的Demo Page 包含更多代码示例和演示。

【讨论】：

WTFPL-LICENSE.txt 是一个非常好的开始 ;) 并且 jsLaTeX 运行良好！
我喜欢这个想法，但它看起来有点模糊：/
这只是使用外部服务来渲染图像（在本例中为 latex.codecogs.com） - 商业用途需要此服务的额外许可。

【解决方案3】：

MediaWiki 可以满足您的需求。它使用 Texvc (http://en.wikipedia.org/wiki/Texvc) “验证 (AMS) LaTeX 数学表达式并将它们转换为 HTML、MathML 或 PNG 图形”。听起来像您正在寻找的东西。

在此处查看 Wikipedia 关于他们如何处理数学方程式的文章：http://en.wikipedia.org/wiki/Help:Formula。他们还对 LaTeX 和不同渲染类型 (PNG/MathML/HTML) 的优缺点有广泛的参考。

MediaWiki 使用 TeX 标记的子集，包括 LaTeX 的一些扩展和 AMS-LaTeX，用于数学公式。它生成 PNG 图片或简单的 HTML 标记，取决于用户的喜好和表达式的复杂性。在里面未来，随着更多浏览器变得更智能，它将能够产生增强的在许多情况下，HTML 甚至是 MathML。（有关以下信息，请参阅 blahtex 目前关于添加 MathML 的工作支持。）

更准确地说，MediaWiki 过滤通过 Texvc 标记，这反过来将命令传递给 TeX 实际渲染。因此，只有有限的完整的 TeX 语言的一部分是支持的;详情见下文。 ...

HTML 的优点

内嵌 HTML 公式始终与 HTML 的其余部分正确对齐文本。

公式的背景、字体大小和字体与 HTML 的其余部分相匹配内容和外观方面 CSS 和浏览器设置。

使用 HTML 的页面加载速度更快。

TeX 的优点

TeX 在语义上优于 HTML。在 TeX 中，“x”表示 “数学变量 x”，而在 HTML“x”可能意味着任何东西。信息已不可挽回地丢失。这有很多好处：

TeX 可以转换成 HTML，反之则不行。这意味着在服务器端我们总是可以变换一个公式，根据它的复杂性和位置文本、用户偏好、类型浏览器等。因此，在哪里可能，HTML 的所有好处都可以被保留，连同 TeX 的好处。确实如此目前的情况并不理想，但这不是放弃的好理由信息/内容。它更像是一个有理由帮助改善这种情况。

对于支持它的浏览器，TeX 可以转换为 MathML，因此保持其语义并允许它渲染为矢量。

TeX 是专门为排版公式而设计的，所以输入是更容易更自然，输出是更美观。

使用 TeX 编写时，编辑者无需担心浏览器支持，因为它被渲染成图像服务器。另一方面，HTML 公式手，最终可能会被渲染与编辑意图不一致（或根本不），通过某些浏览器或旧版本的浏览器。

【讨论】：

html可以转成TeX，看看pandoc吧。
MediaWiki 不是由 MathJax 提供支持吗？此页面似乎表明它是：github.com/mathjax/MathJax-docs/wiki/MathJax-and-MediaWiki

【解决方案4】：

如果您想将数学嵌入图像，您可以查看MathTran。

如果您希望主要将数学作为文本插入页面（仅在必要时使用图像），jsMath 可能就是您要查找的内容。

【讨论】：

【解决方案5】：

从历史上看，渲染 LaTeX 和提取图像一直是跨平台、跨浏览器数学的最佳选择。 MathML 越来越成为一种合理的替代方案。 Here's 一个在线转换器，它将从 Tex 标记发出 MathML，然后您可以将其嵌入到您的网页中。我知道 Firefox 和 Camino 等基于 Gecko 的浏览器与 MathML 配合得很好，Opera 也是如此。 IE 不能开箱即用，但有可用的插件（如this one）。

Texvc 是一个很棒的发现！如果您对上标/下标/斜体/常见符号最感兴趣，则普通 HTML 输出应该可以正常工作，但对于更复杂的事情，请注意最流行的面向数学的网站（例如 Wolfram）会生成图像，因此，如果您对跨浏览器兼容性感兴趣，您可能只能做这么多:-(

【讨论】：

【解决方案6】：

我自己开始研究这个问题，看来事情已经发生了变化。我遇到过this KaTeX 和MathJax 的比较演示。

长话短说（在撰写本文时）：

矩阵中的分数在 KaTeX 中会相互匹配，但在 MathJax 中不会（参见“叉积”）
在平方（或第 n 个）根符号内，指数和嵌套平方根似乎与水平顶线相撞（请参阅“重复分数”和“第 n 个根”。）
MathJax 的字体稍粗大一些，KaTeX 的字体稍显瘦。

但也许最决定性的是，我发现页面的总 MathJax 处理平均为 1674 毫秒 三个运行。相比之下，KaTeX 平均 128 毫秒，要好一个数量级！

在浏览他们各自的网站时，还需要考虑其他一些比较点：

KaTeX 主网站声称支持大部分但不是全部的 LaTeX。他们列出了他们支持的功能here。 MathJax 也表达了它的一些limitations。尽管通过快速浏览这些内容很难知道最终谁拥有“更好”的支持。我遇到的一些博客说 KaTeX 的支持较少，但其他人则说 KaTeX 近年来显着改进了支持。
MathJax 网站宣传对 MathML 的输入和输出支持。 github 网站 here 和 here 上的一些 KaTeX 问题表明它们支持 MathML 用于输出，但不支持输入（我对 MathML 了解不多，但如果你想帮忙，它至少看起来很重要有视力障碍的用户）。
KaTeX 呈现synchronously，因此它不会重排页面（使其更快的部分原因）。但作为交换，它会暂时锁定浏览器。
StackOverflow 是 MathJax 的合作伙伴（请参阅 here）。它在some StackExchange 站点上使用，但由于页面加载时间性能，它不在 StackOverflow 本身上。相比之下，KaTeX 是由卡恩学院开发的。

【讨论】：

【解决方案7】：

我在这里阅读了所有答案，我很惊讶没有人提到从 PDF 到 HTML 的转换。如果您使用pdf2htmlEX，它将从 pdf 创建完美的网页。你只需要将你的乳胶编译成 pdf (pdflatex)。

默认情况下，它会生成一个 html 文件，其中的 PDF 内容由 CSS、javascript 和 html 组成。我尝试了很多工具将乳胶转换为 html，这是迄今为止我发现的最佳和最简单的解决方案。

【讨论】：

【解决方案8】：

这个问题只有一个（非常好的）答案引用了KaTeX，根据我的经验，这是最有效的解决方案，加载速度快且易于实施。

您需要添加一个<link> 标签（用于样式表）和两个<script>s 到您的<head>。然后使用\( \) 作为内联数学的分隔符，使用\[ \] 作为<body> 中显示的数学的分隔符。

这是一个带有实现的最小 html5 文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
  <title>Katex</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>

<body>
<p>Math can be inline like \(2^{2x}=4\), or displayed like:</p>
\[2^{3x}=8\]
</body>
</html>

【讨论】：

【解决方案9】：

你可以试试LaTexRenderer。我不知道它是否是最好的，但它确实有效。

【讨论】：

【解决方案10】：

如果 MathML 符合您的要求，我肯定会鼓励您查看 MathML，但与 JsTeX 一起工作可以为您提供所需的一切。

【讨论】：

【解决方案11】：

您可以使用tex2gif。它需要一个 LaTeX sn-p，运行 LaTeX 并生成一个 PNG（或 GIF）。易于嵌入，易于编写脚本。它对我有用。

您也可以查看tex2png。

【讨论】：