Question

我不是要求将LaTeX文档转换为html。

我希望能够做的是在html文档中使用LaTeX数学命令，并使其在浏览器中正确显示。这可以在服务器端或客户端完成。

Answer 1

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

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

Answer 2

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。   （有关信息，请参阅blahtex   目前有关添加MathML的工作   支持。）

更准确地说，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公式，另一方面   手，最终可以呈现   编辑的意图不一致   （或根本没有），某些浏览器或   旧版本的浏览器。

Answer 3

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

Equation http://img16.imageshack.us/img16/5462/gifwm.gif

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

矩阵内的分形在KaTeX中彼此碰到，但MathJax却不对（请参阅“叉积”）
在平方（或第n个）根符号内，指数和嵌套的平方根似乎与水平顶线相对（请参见“重复分数”和“第n个根”。）
MathJax的字体稍大一些，字体较大，而KaTeX的字体稍窄。

但是，也许最具有决定性的是，我发现该页面的MathJax总处理次数平均为3次运行 1674 ms 。相反，KaTeX平均 128 ms ，好一个数量级！

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

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

Answer 9

我绝对鼓励你看看MathML是否适合你想要的东西，但是JsTeX的一些工作可以为你提供所需的一切。

Answer 10

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

您还可以查看tex2png。

Answer 11

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

您需要向您的 <link> 添加一个 <script> 标记（用于样式表）和两个 <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>

将LaTeX嵌入网页的最佳方法是什么？

11 个答案: