如何在网页中嵌入LaTeX最佳方法？

Question

如何在网页中嵌入LaTeX最佳方法？

66

我不是在询问如何将LaTeX文档转换为HTML。我希望能够以某种方式在HTML文档中使用LaTeX数学命令，并且在浏览器中正确显示。这可以在服务器端或客户端完成。

- Phenwoods

有人知道这里使用的解决方案是什么吗？它看起来非常好：http://mathwiki.ucdavis.edu/Algebra/Linear_algebra/08._Permutations_and_the_determinant/8.1_Permutations - EthanAlvaree

@EthanAlvaree 对，LaTeX。 - user3917838

@PythonGuy 谢谢。但是LaTeX的实现方式是什么？例如Texvc、Mathjax、MathML或其他方式？有没有办法知道呢？ - EthanAlvaree

@EthanAlvaree 这是MathJax。我查看了源代码，在底部有两个脚本标签，它们从MathJax CDN导入MathJax.js。使用起来非常简单，只需复制粘贴脚本标签即可。 - user3917838

@EthanAlvaree，链接已失效，这是存档版本链接：https://web.archive.org/web/20151128154809/http://mathwiki.ucdavis.edu/Algebra/Linear_algebra/08._Permutations_and_the_determinant/8.1_Permutations - alfC

显示剩余2条评论

12个回答

23

我曾经开发过一个 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方程式：

该插件的演示页面包含更多代码示例和演示。

- Andreas Grech

1

WTFPL-LICENSE.txt是一个非常好的开始 ;) 而且jsLaTeX运行非常顺畅！ - MattAllegro

我喜欢这个想法，但它看起来有点模糊 :/ - duhaime

1

这只是使用外部服务来渲染图像（在这种情况下是latex.codecogs.com）-商业用途需要额外的许可证。 - Tomasz Gandor

17

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

看看维基百科关于如何处理数学方程的文章：http://en.wikipedia.org/wiki/Help:Formula。他们还对LaTeX进行了广泛的参考，并列出了不同渲染类型（PNG/MathML/HTML）的优缺点。

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

更精确地说，MediaWiki通过Texvc过滤标记，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 公式可能会被某些浏览器或旧版浏览器不一致地呈现（或根本无法呈现）。

- amdfan

1

HTML可以转换为TeX，看一下Pandoc。 - Mica

MediaWiki不是由MathJax驱动的吗？这个页面似乎表明它是：https://github.com/mathjax/MathJax-docs/wiki/MathJax-and-MediaWiki - EthanAlvaree

10

如果您想将数学公式嵌入为图片，可以查看MathTran。

如果您更喜欢将数学公式主要插入到页面中作为文本（仅在必要时使用图像），则jsMath可能是您要寻找的东西。

- godbyk

10

只有一个（非常好的）回答提到了 KaTeX，它是我经验中最有效的解决方案，加载速度快，易于实现。

您需要在<head> 中添加一个<link>标签（用于样式表），以及两个<script>标签。然后在<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>

- MattAllegro

1

在我看来，这应该是被接受的答案。对于动态内容，KaTeX比MathJax要优秀得多。对我来说，使用katex.renderToString来渲染脚本中的数学公式是非常宝贵的。 - undefined

4

我开始自己研究这个问题，似乎事情已经有所发展。我找到了this比较演示KaTeX和MathJax。

简而言之（截至本文写作时）：

KaTeX中矩阵内的分数会相互重叠，但MathJax不会（参见“叉积”）。
在平方根（或第n个根号）符号内，指数和嵌套的平方根似乎会与水平顶部线接触（参见“重复分数”和“第n个根号”）。
MathJax字体略粗且较大，KaTeX则略瘦。

但也许最决定性的是，我发现页面的总MathJax处理平均为1674毫秒，而KaTeX平均为128毫秒，这是一个数量级的改进！

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

KaTeX主网站声称支持大部分但并非全部的LaTeX语法，他们在这里列出了所支持的函数。MathJax也有一些限制，但很难从快速浏览中知道谁最终支持得更好。我看过一些博客说KaTeX支持较少，但其他人则说近年来KaTeX的支持显著提高。
MathJax网站宣传支持MathML的输入和输出。一些KaTeX问题在其github网站上这里和这里表明他们支持MathML的输出，但不支持输入（我对MathML不是很了解，但如果你想帮助视力障碍用户，它至少似乎很重要）。
KaTeX是同步渲染的，因此它不会重新排版页面（这是使它更快的部分原因）。但作为交换，它会暂时锁定浏览器。
StackOverflow是MathJax的合作伙伴（请参阅这里）。它在一些 StackExchange 网站上使用，但由于页面加载时间的性能问题，它没有在StackOverflow本身上使用。相比之下，KaTeX是由Kahn Academy开发的。

- pwilcox

4

历史上，将LaTeX渲染并提取图像一直是在跨平台、跨浏览器的数学环境中最好的选择。越来越多的情况下，MathML正成为一个合理的替代方案。这里有一个在线转换器，可以从Tex标记中生成MathML，然后嵌入到您的网页中。我知道基于Gecko的浏览器（如Firefox和Camino）以及Opera都能很好地处理MathML。IE不支持MathML，但有可用的插件（例如这个）。

Texvc是一个很好的发现！如果您主要关注上下标/斜体/常见符号，则香草HTML输出应该能够很好地工作，但对于更复杂的事情，请注意，最流行的面向数学的站点（例如Wolfram）生成图像，因此如果您关心跨浏览器兼容性，可能只能做到这么多 :-(

- Matt J

3

我阅读了所有的答案，惊讶的是没有人提到从PDF转换为HTML。

如果您使用pdf2htmlEX，它将会从PDF中创建完美的网页。您只需将latex编译为pdf（pdflatex）即可。

默认情况下，它生成一个单独的html文件，其中包含由CSS、javascript和html构成的PDF内容。我尝试了很多工具来将latex转换为html，这绝对是我发现的最好且最容易的解决方案。

- Anoyz

1

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

- eduffy

0

你可以使用tex2gif。它可以获取LaTeX代码片段，运行LaTeX并生成PNG（或GIF）文件。易于嵌入，易于脚本化。我用了很好用。

你也可以查看tex2png。

- jetxee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1433688 · Accepted Answer

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

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