MathJax(1):简介


陈奕迅-不要说话
$$f(a)= {1 \over 2\pi i}\oint_\gamma {f(z) \over x-a}dz$$
MathJax入门简介,主要翻译MathJax的入门介绍。

what is MathJax?

MathJax官网口号

Beautiful math in all browsers
A JavaScript display engine for mathematics that works in all browsers.

MathJax是为了解决浏览器中数学公式的显示问题而产生的一种解决方案,通过CSS或者SVG(而不是图片或Flash)来生成数学公式,可以实现无损缩放,可以拷贝到Office、LaTeX、wiki等;其输入形式可以是MathML、TeX或者ASCIImath,输出是HTML+CSS、SVG或者MathML.

how to learn?

官网MathJax是最权威的。
推荐使用StackEdit学习MathJax的语法,它支持Markdown和MathJax.

how to use MathJax

CDN


1
2
3
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

放到<head>或者<body>里,然后就是在网页中放上TeX, MathML, 或者 AsciiMath 格式的数学公式就可以通过MathJax来渲染显示了。

其原理是:网页中包含的JS脚本会使网页从CDN服务器加载最新版本的MathJax,识别数学公式(Tex,MathML或者AsciiMath标记的)后输出HTML+CSS来显示数学公式。

local

下载MathJax到本地,然后link到网页。
方法参见Installing Your Own Copy of MathJax.

Put mathematics in web pages

MathJax支持三种标记方法:Tex/LaTex、MathML和AsciiMath,可以配置来告诉MathJax解析哪一种或哪几种标记方法,三种标记方法可以混用。

Tex/LaTex

默认的displayed公式分隔符有$$...$$\[…\],而默认的inline公式分隔符为\(...\),当然这些都是可以自定义的,具体配置请参考文档。由于修改了配置文件,我们在下文中使用$...$作为inline公式分隔符。
看一下效果:

Tex
1
2
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}.$$

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}.$$

MathML

效果参见sample-mml.html

AsciiMath

效果参见sample-asciimath.html

Reference:

  1. Getting Started
  2. Mathjax与LaTex公式简介