56

我不是在询问将 LaTeX 文档转换为 html 的问题。

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

4

11 回答 11

24

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

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

于 2012-06-03T15:22:05.453 回答
18

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

方程

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

于 2010-01-22T11:14:13.237 回答
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 过滤标记，然后将命令传递给 TeX 以进行实际渲染。因此，仅支持完整 TeX 语言的有限部分；详情见下文。...

HTML 的优点

  • 内联 HTML 公式始终与 HTML 文本的其余部分正确对齐。
  • 公式的背景、字体大小和字体与 HTML 内容的其余部分相匹配，并且外观符合 CSS 和浏览器设置。
  • 使用 HTML 的页面将加载得更快。

TeX 的优点

  • TeX 在语义上优于 HTML。在 TeX 中，“x”表示“数学变量 x”，而在 HTML 中，“x”可以表示任何东西。信息已不可挽回地丢失。这有很多好处：
    1. TeX 可以转换为 HTML，反之则不行。这意味着在服务器端，我们总是可以根据公式的复杂性和在文本中的位置、用户偏好、浏览器类型等来转换公式。因此，在可能的情况下，可以保留 HTML 的所有优点，以及TeX 的好处。确实，目前的情况并不理想，但这不是删除信息/内容的好理由。这更多的是帮助改善情况的原因。
    2. TeX 可以为支持它的浏览器转换为 MathML，从而保持其语义并允许将其呈现为向量。
  • TeX 专为排版公式而设计，因此输入更轻松自然，输出更美观。
  • 使用 TeX 编写时，编辑者不必担心浏览器支持，因为它是由服务器渲染成图像的。另一方面，HTML 公式最终可能会被某些浏览器或旧版本的浏览器渲染为与编辑器的意图不一致（或根本不一致）。
于 2008-09-22T16:53:30.400 回答
10

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

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

于 2008-09-22T20:57:13.060 回答
4

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

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

于 2008-09-22T16:55:40.380 回答
4

我自己开始研究这个，似乎事情已经发展了。我遇到了这个KaTeX和MathJax的比较演示。

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

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

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

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

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

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

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

于 2014-03-18T10:26:41.243 回答
2

这个问题只有一个（非常好的）答案引用了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>
于 2021-01-02T15:28:05.513 回答
1

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

于 2008-09-22T16:58:18.873 回答
0

如果这符合您的要求，我肯定会鼓励您查看 MathML，但是使用JsTeX进行一些工作可以为您提供所需的一切。

于 2008-09-22T18:03:21.200 回答
0

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

您还可以检查tex2png。

于 2009-01-05T16:45:35.637 回答