【问题标题】: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 的脚本标签。它非常易于使用,只需复制粘贴脚本标签即可。

标签: html latex


【解决方案1】:

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

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

【讨论】:

【解决方案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”可能意味着任何东西。 信息已不可挽回地丢失。 这有很多好处:
    1. TeX 可以转换成 HTML,反之则不行。这意味着在 服务器端我们总是可以 变换一个公式,根据它的 复杂性和位置 文本、用户偏好、类型 浏览器等。因此,在哪里 可能,HTML 的所有好处都可以 被保留,连同 TeX 的好处。确实如此 目前的情况并不理想,但 这不是放弃的好理由 信息/内容。它更像是一个 有理由帮助改善这种情况。
    2. 对于支持它的浏览器,TeX 可以转换为 MathML,因此 保持其语义并允许它 渲染为矢量。
  • TeX 是专门为排版公式而设计的,所以输入是 更容易更自然,输出是 更美观。
  • 使用 TeX 编写时,编辑者无需担心浏览器支持,因为 它被渲染成图像 服务器。另一方面,HTML 公式 手,最终可能会被渲染 与编辑意图不一致 (或根本不),通过某些浏览器或 旧版本的浏览器。

【讨论】:

【解决方案4】:

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

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

【讨论】:

    【解决方案5】:

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

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

    【讨论】:

      【解决方案6】:

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


      长话短说(在撰写本文时)

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

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


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

      • KaTeX 主网站声称支持大部分但不是全部的 LaTeX。他们列出了他们支持的功能here。 MathJax 也表达了它的一些limitations。尽管通过快速浏览这些内容很难知道最终谁拥有“更好”的支持。我遇到的一些博客说 KaTeX 的支持较少,但其他人则说 KaTeX 近年来显着改进了支持。
      • MathJax 网站宣传对 MathML 的输入和输出支持。 github 网站 herehere 上的一些 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,根据我的经验,这是最有效的解决方案,加载速度快且易于实施。

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

          这是一个带有实现的最小 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

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2010-10-17
                  • 2017-10-10
                  • 2022-08-23
                  • 2011-09-19
                  • 2010-09-09
                  • 1970-01-01
                  相关资源
                  最近更新 更多