ine*_*ine 15
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过滤标记,然后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公式最终可能会被某些浏览器或旧版本的浏览器与编辑器的意图(或根本没有)一致.
And*_*ech 14
我曾经开发过一个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>
Run Code Online (Sandbox Code Playgroud)
以上将在您的页面上生成以下LaTeX等式:
公式http://img16.imageshack.us/img16/5462/gifwm.gif
该插件的演示页面包含更多代码示例和演示.
Mat*_*gro 12
这个问题只有一个(非常好的)答案引用了KaTeX,根据我的经验,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>
Run Code Online (Sandbox Code Playgroud)