Html 在网页中嵌入 LaTeX 的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/116054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to embed LaTeX in a webpage?
提问by Phenwoods
I'm not asking about converting a LaTeX document to html.
我不是在问将 LaTeX 文档转换为 html。
What I'd like to be able to do is have some way to use LaTeX math commands in an html document, and have it appear correctly in a browser. This could be done server or client side.
我希望能够做的是有某种方法在 html 文档中使用 LaTeX 数学命令，并让它在浏览器中正确显示。这可以在服务器端或客户端完成。
采纳答案by ine
MediaWiki can do what you are looking for. It uses Texvc (http://en.wikipedia.org/wiki/Texvc) which "validates (AMS) LaTeX mathematical expressions and converts them to HTML, MathML, or PNG graphics." Sounds like what you are looking for.
MediaWiki 可以满足您的需求。它使用 Texvc ( http://en.wikipedia.org/wiki/Texvc) “验证 (AMS) LaTeX 数学表达式并将它们转换为 HTML、MathML 或 PNG 图形”。听起来像你在找什么。
Check out Wikipedia's article on how they handle math equations here: http://en.wikipedia.org/wiki/Help:Formula. They also have an extensive reference on LaTeX and pros/cons of the different rendering types (PNG/MathML/HTML).
在此处查看维基百科关于他们如何处理数学方程的文章：http: //en.wikipedia.org/wiki/Help: Formula。他们还对 LaTeX 和不同渲染类型（PNG/MathML/HTML）的优缺点有广泛的参考。
MediaWiki uses a subset of TeX markup, including some extensions from LaTeX and AMS-LaTeX, for mathematical formulae. It generates either PNG images or simple HTML markup, depending on user preferences and the complexity of the expression. In the future, as more browsers are smarter, it will be able to generate enhanced HTML or even MathML in many cases. (See blahtex for information about current work on adding MathML support.)
More precisely, MediaWiki filters the markup through Texvc, which in turn passes the commands to TeX for the actual rendering. Thus, only a limited part of the full TeX language is supported; see below for details. ...
Pros of HTML
- In-line HTML formulae always align properly with the rest of the HTML text.
- The formula's background, font size and face match the rest of HTML contents and the appearance respects CSS and browser settings.
- Pages using HTML will load faster.
Pros of TeX
- TeX is semantically superior to HTML. In TeX, "x" means "mathematical variable x", whereas in HTML "x" could mean anything. Information has been irrevocably lost. This has multiple benefits:
- TeX can be transformed into HTML, but not vice-versa. This means that on the server side we can always transform a formula, based on its complexity and location within the text, user preferences, type of browser, etc. Therefore, where possible, all the benefits of HTML can be retained, together with the benefits of TeX. It's true that the current situation is not ideal, but that's not a good reason to drop information/contents. It's more a reason to help improve the situation.
- TeX can be converted to MathML for browsers which support it, thus keeping its semantics and allowing it to be rendered as a vector.
- TeX has been specifically designed for typesetting formulae, so input is easier and more natural, and output is more aesthetically pleasing.
- When writing in TeX, editors need not worry about browser support, since it is rendered into an image by the server. HTML formulae, on the other hand, can end up being rendered inconsistent of editor's intentions (or not at all), by some browsers or older versions of a browser.
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 的浏览器，可以将 TeX 转换为 MathML，从而保持其语义并允许将其呈现为向量。
- TeX 专为排版公式而设计，因此输入更容易、更自然，输出更美观。
- 用 TeX 编写时，编辑器不必担心浏览器支持，因为它是由服务器渲染成图像的。另一方面，HTML 公式最终可能会被某些浏览器或旧版本的浏览器呈现与编辑器的意图不一致（或根本没有）。
回答by user1433688
I prefer MathJaxover solutions that choose to render images (which causes aliasing problems).
我更喜欢MathJax而不是选择渲染图像的解决方案（这会导致锯齿问题）。
MathJax is an open source Javascript render engine for mathematics. It uses CSS and Webfonts instead of images or flash and can render LaTeX or MathML. That way you don't have problems with zoom and it's even screenreader compatible.
MathJax 是一个开源的 Javascript 数学渲染引擎。它使用 CSS 和 Webfonts 而不是图像或 Flash，并且可以渲染 LaTeX 或 MathML。这样你就不会遇到缩放问题，它甚至与屏幕阅读器兼容。
回答by Andreas Grech
I once developed a jQuery plugin that does in fact this: jsLaTeX
我曾经开发过一个 jQuery 插件，它实际上是这样做的：jsLaTeX
Here's the simplest example of how it can be used:
这是如何使用它的最简单示例：
$(".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>
The above will generate the following LaTeX equation on your page:
以上将在您的页面上生成以下 LaTeX 方程：
The Demo Pageof the plugin contains more code examples and demos.
插件的演示页面包含更多代码示例和演示。
回答by godbyk
If you want to embed the mathematics as images, you may take a look at MathTran.
如果你想将数学嵌入图像，你可以看看MathTran。
If you'd prefer to have the math inserted into the page primarily as text (using images only when necessary), jsMathmay be what you're looking for.
如果您希望将数学主要作为文本插入页面（仅在必要时使用图像），那么 jsMath可能就是您要找的。
回答by Matt J
Historically, rendering the LaTeX and extracting an image has been your best bet for cross-platform, cross-browser math stuff. More and more, MathML is becoming a reasonable alternative. Here'san online converter that will emit MathML from Tex markup, which you can then embed in your webpage. I know Gecko-based browsers like Firefox and Camino play nice with MathML, as does Opera. IE doesn't work out of the box, but there are plugins available (like this one).
从历史上看，渲染 LaTeX 和提取图像一直是跨平台、跨浏览器数学内容的最佳选择。MathML 越来越成为一种合理的选择。 这是一个在线转换器，它将从 Tex 标记发出 MathML，然后您可以将其嵌入到您的网页中。我知道像 Firefox 和 Camino 这样的基于 Gecko 的浏览器与 MathML 配合得很好，Opera 也是如此。IE 不能开箱即用，但有可用的插件（例如这个）。
Texvc is a great find! The vanilla HTML output should work well if you're mostly interested in superscripts/subscripts/italics/common symbols, but for more complex things, be aware that the most popular math-oriented sites out there (e.g. Wolfram) generate images, so there may be only so much you can do if you're interested in cross-browser compatibility :-(
Texvc 是一个很棒的发现！如果您对上标/下标/斜体/常用符号最感兴趣，vanilla HTML 输出应该可以很好地工作，但对于更复杂的事情，请注意最流行的面向数学的网站（例如Wolfram）生成图像，所以有如果您对跨浏览器兼容性感兴趣，您可以做的只有这么多:-(
回答by Anoyz
I read all the answers here, and I'm surprised no one mentioned the convertion from PDF to HTML. If you use pdf2htmlEXit will create perfect webpages from a pdf. You just have to compile your latex to pdf (pdflatex).
我阅读了这里的所有答案，我很惊讶没有人提到从 PDF 到 HTML 的转换。如果您使用pdf2htmlEX，它将从 pdf 创建完美的网页。您只需要将您的乳胶编译为 pdf (pdflatex)。
By default it generates a single html file, with the contents of your PDF made out of CSS, javascript and html. I tried a lot of tools to convert latex to html and this is by far the best and easiest solution I found.
默认情况下，它会生成一个 html 文件，其中 PDF 的内容由 CSS、javascript 和 html 组成。我尝试了很多工具来将 latex 转换为 html，这是迄今为止我发现的最好和最简单的解决方案。
回答by pwilcox
I'm starting to look into this myself and it seems things have evolved. I have come across thiscomparison demo of KaTeXand MathJax.
我自己开始研究这个问题，似乎事情已经发生了变化。我遇到了KaTeX和MathJax 的这个比较演示。
Long story short (as of this writing):
长话短说（截至撰写本文时）：
- Fractions inside a matrix run into each other in KaTeX, but not MathJax (see "cross product")
- Inside the square (or nth) root symbol, exponents and nested square roots seem to run up against the horizontal top line (see "Repeating Fractions" and "nth root".)
- MathJax has slightly bolder and larger font, KaTeX is slightly leaner.
- 矩阵内的分数在 KaTeX 中相互碰撞，但不是 MathJax（参见“交叉积”）
- 在平方（或第 n 个）根符号内，指数和嵌套平方根似乎与水平顶线相抵触（参见“重复分数”和“第 n 个根”。）
- MathJax 的字体稍大一些，KaTeX 的字体稍大一些。
But perhaps most decisive of all, I found that the total MathJax processing for the page averaged to 1674 msfor three runs. In contrast, KaTeX averaged 128 ms, which is an order of magnitude better!
但也许最重要的是，我发现页面的 MathJax 总处理时间平均为1674 毫秒，运行 3 次。相比之下，KaTeX 平均为128 ms，这要好一个数量级！
There are some other points of comparison to consider when looking through their respective websites:
在浏览各自的网站时，还有一些其他比较点需要考虑：
- The KaTeX main website claims to support most, but not all, of LaTeX. They list their supported functions here. MathJax expresses some of its limitationsas well. Though it's hard knowing from a quick skim of these who in the end has "better" support. Some blogs I've run across say KaTeX has less support, but others have said that KaTeX has improved support significantly in recent years.
- The MathJax website advertises support of MathML for both input and output. Some KaTeX issues on its githubsite hereand hereindicate that they support MathML for output, but not for input (I don't know much about MathML, but it at least seems important if you want to help out users with visual disabilities).
- KaTeX renders synchronously, so it doesn't reflow the page (part of what makes it faster). But in exchange it temporarily locks the browser.
- StackOverflow is a partner of MathJax (see here). It's used on someStackExchange sites, though not on StackOverflow itself due to page load time performance. In contrast, KaTeX was developed by Kahn Academy.
- KaTeX 主网站声称支持大部分但不是全部的 LaTeX。他们在这里列出了他们支持的功能。MathJax 也表达了它的一些局限性。尽管很难从这些人的快速浏览中知道谁最终拥有“更好”的支持。我遇到的一些博客说 KaTeX 的支持较少，但其他人说 KaTeX 近年来显着改善了支持。
- MathJax 网站宣传对 MathML 的输入和输出支持。此处和此处github站点上的一些 KaTeX 问题表明它们支持 MathML 输出，但不支持输入（我对 MathML 了解不多，但如果您想帮助有视觉障碍的用户，这至少看起来很重要）。
- KaTeX同步呈现，因此它不会重排页面（部分原因是使其更快）。但作为交换，它会暂时锁定浏览器。
- StackOverflow 是 MathJax 的合作伙伴（请参阅此处）。它在一些StackExchange 站点上使用，但由于页面加载时间性能而不在 StackOverflow 本身上使用。相比之下，KaTeX 是由卡恩学院开发的。
回答by eduffy
You could try LaTexRenderer. I don't know if it's the best, but it does work.
你可以试试LaTexRenderer。我不知道它是否是最好的，但它确实有效。
