欢迎关注Hadoop、Spark、Flink、Hive、Hbase、Flume等大数据资料分享微信公共账号:iteblog_hadoop
  1. 文章总数:961
  2. 浏览总数:11,490,358
  3. 评论:3873
  4. 分类目录:103 个
  5. 注册用户数:5846
  6. 最后更新:2018年10月17日
过往记忆博客公众号iteblog_hadoop
欢迎关注微信公众号:
iteblog_hadoop
大数据技术博客公众号bigdata_ai
大数据猿:
bigdata_ai

MathJax:在浏览器上显示LaTeX等数学公式的JS引擎

什么是MathJax

  MathJax是一个显示网络上数学公式的开源JavaScript引擎库,它可以在所有浏览器上面工作,其中就支持LaTeX,MathML和AsciiMath 符号,里面的数字会被MathJax使用JavaScript引擎解析成HTML,SVG或者是MathML 方程式,然后在现代的浏览器里面显示。 它的设计目标是利用最新的web技术,构建一个支持math的web平台。支持主要的浏览器和操作系统,包括那些移动设备。 对大部分用户而言它不需要安装,即没有插件需要下载也没有软件需要安装,所以网页作者可以编写包含数学公式的页面并有信心可以自然而容易的浏览到它们。 只需要在页面中包含MathJax脚本和一些数学公式,其他的事情交给MathJax来处理吧。

  MathJax使用网络字体(大部分浏览器都支持)去产生高质量的排版,使其在所有分辨率都可缩放和显示,这远比使用包含公式的图片要有效得多。 MathJax也可以用于屏幕阅读器,让视力受损者也可以使用。

  使用MathJax显示数学公式是基于文本的,而非图片。它可以被搜索引擎使用,这意味着方程式和页面上的文字一样是可以被搜索的。 MathJax允许页面作者使用TeX、LaTeX符号和 MathML 或者 AsciiMath 去书写公式。 MathJax甚至可以将Tex格式转化为MathML格式,使其可以被原生支持MathML格式的浏览器更多的渲染。转化为MathML格式后你可以复制粘贴它们到其他程序中。

  MathJax是模块化的,所以它仅仅在需要时才加载它的组件,同时也可以被扩展以实现更多功能。 MathJax同时也是高度可配置的,允许作者作出更适宜网站自身的自定义。 最重要的,MathJax的API可以让你在你的网页上动态的创建公式。

如何使用

  使用MathJax很简单,只需要引入MathJax.js库,然后所有的都交给MathJax处理,我们可以去https://github.com/mathjax/MathJax下载最新版本的MathJax到自己网站,也可以使用MathJax提供的CDN直接使用。本文就简单地使用MathJax提供的CDN来介绍。首先我们引入athJax.js

<script type="text/javascript"
 src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

  可以通过上面的从MathJax分布式服务器上获取最新的MathJax.js文件。而且加上TeX-AMS-MML_HTMLorMML使得我们可以支持Tex和MathML公式,如果浏览器支持MathML解析,那么就使用它,否则会使用HTML-with-CSS来显示数学公式。而且config=TeX-AMS-MML_HTMLorMML是最常用的,更多的config可以去参加官方文档(http://docs.mathjax.org/en/latest/start.html)。
  下面使用TeX和LaTeX进行说明
   TeX 和 LaTeX 格式的公式使用主要有两种形式,(1)、包含在段落之中的;(2)、独立于其他文字的。TeX 和 LaTeX 格式的默认分隔符是$$...$$ \[ ...\],这个是独立于其他文字的,其实如果想要在段落之中显示TeX 和 LaTeX 格式的公式使,需要使用\(...\)。比如显示行内公式\(\alpha+\beta=\gamma\)可以使用:

\(\alpha+\beta=\gamma\)

\[
\newcommand{\R}{\mathbb{R}}
\newcommand{\E}{\mathbb{E}}
\newcommand{\x}{\mathbf{x}}
\newcommand{\y}{\mathbf{y}}
\newcommand{\wv}{\mathbf{w}}
\newcommand{\av}{\mathbf{\alpha}}
\newcommand{\bv}{\mathbf{b}}
\newcommand{\N}{\mathbb{N}}
\newcommand{\id}{\mathbf{I}}
\newcommand{\ind}{\mathbf{1}}
\newcommand{\0}{\mathbf{0}}
\newcommand{\unit}{\mathbf{e}}
\newcommand{\one}{\mathbf{1}}
\newcommand{\zero}{\mathbf{0}}
\]

独立于其他文字的
$$\alpha+\beta=\gamma$$
或者
\[\alpha+\beta=\gamma\]
可以使用

$$\alpha+\beta=\gamma$$
或者
\[\alpha+\beta=\gamma\]

更复杂的公式显示:

loss function $L(\wv; \x, y)$gradient or sub-gradient
hinge loss$\max \{0, 1-y \wv^T \x \}, \quad y \in \{-1, +1\}$$\begin{cases}-y \cdot \x & \text{if $y \wv^T \x <1$}, \\ 0 &
\text{otherwise}.\end{cases}$
logistic loss$\log(1+\exp( -y \wv^T \x)), \quad y \in \{-1, +1\}$$-y \left(1-\frac1{1+\exp(-y \wv^T \x)} \right) \cdot \x$
squared loss$\frac{1}{2} (\wv^T \x - y)^2, \quad y \in \R$$(\wv^T \x - y) \cdot \x$

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$


$$\left[-\frac{\mathrm{SW}\;\mathrm{periods}}{\epsilon_1}\right] $$
$$ {{\Lambda}} = \frac{2\,\sin \,\phi }{{\sqrt 3 \,\left( {3 - \sin \,\phi } \right)}} $$
$$\mathrm{\mathcal{B}}\left({\Lambda}_{\mathrm{b}}^0\to \Lambda \beta^{\prime}\right) $$
$$\LARGE XX大学,数学与应用数学 \hfill 2009年至今 $$


   更多关于数学公式的使用可以参照http://docs.mathjax.org/en/latest/start.html文档。

本博客文章除特别声明,全部都是原创!
转载本文请加上:转载自过往记忆(https://www.iteblog.com/)
本文链接: 【MathJax:在浏览器上显示LaTeX等数学公式的JS引擎】(https://www.iteblog.com/archives/1319.html)
喜欢 (35)
分享 (0)
发表我的评论
取消评论

表情
本博客评论系统带有自动识别垃圾评论功能,请写一些有意义的评论,谢谢!
(3)个小伙伴在吐槽
  1. Latex 有不少宏包,在MathJax上面怎么使用这些宏包?
    Alex2016-08-17 13:46 回复
  2. 博主,我公司最近在使用LaTex显示公式,我发现公司给我的文本中有些公式不识别,是我配置错了还是说这个公式的文本有问题啊?下面的 \hfill 、 \upepsilon 、 \uplambda 、 \upeta 这些在显示的时候都报红,最后面那个直接显示公式文本$$ \large XX大学,数学与应用数学 \hfill 2009年至今\\ $$$$ \left[-\frac{\mathrm{SW}\;\mathrm{periods}}{\upepsilon_1}\right] $$$$ {{\uplambda}} = \frac{2\,\sin \,\phi }{{\sqrt 3 \,\left( {3 - \sin \,\phi } \right)}} $$ $$ \mathrm{\mathcal{B}}\left({\Lambda}_{\mathrm{b}}^0\to \Lambda \upeta^{\prime}\right) $$$$ \large XX大学,数学与应用数学 \hfill 2009年至今 $$
    Alex2016-08-17 09:34 回复
    • 你看看我文章上面显示的是不是你需要的?变成红色说明是你写的有问题,你可以参考:http://docs.mathjax.org/en/latest/tex.html,里面显示了很多用法。
      w3970907702016-08-28 16:55 回复