当前位置：文江博客话题详情

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

发布于 2024-07-05 10:48:27 字数 110 浏览 4 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

树深时见影 2024-07-12 10:48:27

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

在这里查看维基百科关于如何处理数学方程的文章：http://en.wikipedia.org/wiki /帮助：公式。他们还对 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 公式
手，最终可以被渲染
与编者的本意不符
（或根本不），通过某些浏览器或
旧版本的浏览器。

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.

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).

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.

回复收藏 0 原文

泼猴你往哪里跑 2024-07-12 10:48:27

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

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

I once developed a jQuery plugin that does in fact this: 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:

The Demo Page of the plugin contains more code examples and demos.

回复收藏 0 原文

月朦胧 2024-07-12 10:48:27

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

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

回复收藏 0 原文

悲歌长辞 2024-07-12 10:48:27

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

您需要向添加一个标记（用于样式表）和两个

这是一个带有实现的最小 html5 文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Katex</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Only one (very good) answer to this question cites KaTeX that, in my experience, is the most effective solution, loading fast and easy to implement.

You need to add one <link> tag (for the stylesheet) and two <script>s to your <head>. Then use \( \) as delimiters for inline math and \[ \] as delimiters for displayed math within the <body>.

Here's a minimal html5 file with an implementation:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Katex</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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>

回复收藏 0 原文

暖阳 2024-07-12 10:48:27

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

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

回复收藏 0 原文

奢望 2024-07-12 10:48:27

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

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

回复收藏 0 原文

姐不稀罕 2024-07-12 10:48:27

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

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

矩阵内的分数在 KaTeX 中彼此相交，但在 MathJax 中则不然（参见“叉积”）
在平方（或第 n 个）根符号、指数和嵌套的平方根似乎与水平顶线相抵（参见“重复分数”和“n次方根”。）
MathJax 的字体稍粗且较大，KaTeX 稍显精简。

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

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

KaTeX 主网站声称支持大多数（但不是全部）LaTeX。他们在此处列出了支持的函数。 MathJax 也表达了它的一些限制。尽管快速浏览一下很难知道谁最终得到了“更好”的支持。我遇到的一些博客说 KaTeX 的支持较少，但其他博客则说 KaTeX 近年来显着改善了支持。
MathJax 网站宣传对 MathML 输入和输出的支持。 github 网站此处和此处表示它们支持 MathML 输出，但不支持输入（我对 MathML 不太了解，但如果您想帮助有视觉障碍的用户，它至少看起来很重要）。
KaTeX 渲染同步，因此它不会重排页面（这是使其速度更快的部分原因）。但作为交换，它会暂时锁定浏览器。
StackOverflow 是 MathJax 的合作伙伴（请参阅此处）。它在一些 StackExchange 站点上使用，但由于以下原因不在 StackOverflow 本身上使用页面加载时间性能。相比之下，KaTeX 是由卡恩学院开发的。

回复收藏 0 原文

傲性难收 2024-07-12 10:48:27

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

您还可以检查 tex2png。

回复收藏 0 原文

一身骄傲 2024-07-12 10:48:27

我不是最有经验的程序员，但我找到了另一种解决方案来解决在网页中放置 LaTex 方程的问题。

首先，让我们看一下：
echo "

";
echo "此 div 内有一些内容。";
回显“

”； ?>

以上是部分内容的划分。使用 CSS div 'test1' 可以放置在网页中的任何位置。
现在考虑以下事项；我知道这很不寻常，但请看：

echo "

";
?>

`\[`
`5^{e}+\sin \left( 2\uppi \right)`
`\]`

`<?php`
`echo "</div>";`

// Continue with php code...

在第二个示例中，div 被分解；它从顶部的 php 开始，然后 php 结束；然后用 HTML 编写 LaTex 方程。然后 php 恢复并且 div 结束。

HTML 位于 div 内。它可以使用 CSS 放置在网页中的任何位置，并且您正在 HTML 中编写纯 LaTex，因此您知道它会是什么样子。以这种方式定位 LaTex 对我来说很有效——祝你好运！

I am not the most experienced programmer, but I have found another solution to the issue of placing LaTex equations in a webpage.

First, let us look at this:
<?php
echo "<div id='test1'>";
echo "Some content is within this div.";
echo "</div>";
?>

The above is a division with some content. Using CSS div 'test1' can be placed anywhere in a webpage.
Now consider the following; I know it is unusual but please look:

<?php
echo "<div id='test2'>";
?>

`\[`
`5^{e}+\sin \left( 2\uppi \right)`
`\]`

`<?php`
`echo "</div>";`

// Continue with php code...

In the second example the div is broken up; it begins in php on the top then php ends; a LaTex equation is then written in HTML. Then php resumes and the div is ended.

The HTML is within the div. It can be placed anywhere in a webpage using CSS, and you are writing pure LaTex in HTML so you know what it will look like. Positioning LaTex in this way works for me--good luck!

回复收藏 0 原文