文章目录

前言

MathJax渲染过程简单模拟
模拟MathJax渲染原理

Markdown输入数学符号

1.1 公式定界符
1.2 上下标
1.3 括号和分隔符的使用
1.4 分数
1.5 开方
1.6 省略号
1.7 矢量
1.8 积分
1.9 极限
1.10 累加和累乘
1.11 希腊字母
1.12 使用指定字体
1.13 数学符号汇总

前言

在网页上显示漂亮的数学公式，是多年来数学工作者和学者的愿望。最容易实现的方式就是使用离线编辑器如word，Latex等编写完公式，然后截图作为图片在html网页中显示。
然而这种方式存在很多缺点：

无法在线修改，离线修改后必须重新截图
放大显示会失真，这是位图的天生缺陷
不同的离线编辑器生成的显示效果不同，很难统一
由于无法直接编辑，所以即使看到了公式，也无法在此基础上进一步修改，不利于交流、

当然，位图显示公式也有一个最大的优点，那就是兼容所有浏览器，不需要任何插件就可以浏览。
随着html，css的持续发展，使用纯html+css来显示公式已经非常可行，于是大名鼎鼎的MathJax出现了。它是一个开源的JavaScript库，用来把特定格式的公式描述转换为html+css或者svg代码，从而在浏览器上显示数学公式。

MathJax渲染过程简单模拟

MathJax最简示例
先来看一个带公式的最简网页实例mathjax.html

<!DOCTYPE html>
<html>
    <head>
        <title>MathJax TeX Test Page</title>
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
        </script>
        <script type="text/javascript"
            src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
            </script>
        </head>
        <body>
            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}.$$
        </body>
    </html>

在浏览器中打开mathjax.html，会显示如下图：
在这里插入图片描述
其对应的html代码如下图：

模拟MathJax渲染原理

从前面的例子可以看出，MathJax中数学公式是用一些特殊字符串表示的，这些字符串被特定的边界 $ $ 和$$ $$包围。然后MathJax引擎会根据边界提取公式表达式，然后把它们替换成用户显示公式的html+css代码。

下面我们来模拟这一过程。用math.js模拟MathJax.js，如下所示：

window.onload = function()
{
    var body = document.getElementsByTagName('body')[0];
    var oldBody = body.innerHTML;
    var newBody = oldBody.replace(/[^$]\$([^$]+)\$[^$]/g, function(str, r1){
            return MathJax_inline(r1);
            });
    newBody = newBody.replace(/\$\$([^$]+)\$\$/g, function(str, r1){
            return MathJax_block(r1);
            });
    body.innerHTML  = newBody;
}

// 把公式内容描述转换为显示描述
function MathJax_inline(r1)
{
    return '<span style="color:red">' + r1 + '</span>';
}

function MathJax_block(r1)
{
    return '<div style="color:red">' + r1 + '</div>';
}

修改html相应页面：

<!DOCTYPE html>
<html>
    <head>
        <title>MathJax TeX Test Page</title>
        <script type="text/javascript" src="math.js"></script>
    </head>
    <body>
        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}.$$
    </body>
</html>

来看看效果：
在这里插入图片描述
虽然没有正确显示出公式，但是已经识别出了公式边界，并把公式部分用红色显示出来。真正的MathJax是把公式表达式替换成显示公式的html代码，而不是简单的设置为红色，但是这其中的处理原理是一致的。

Markdown输入数学符号

文档中包含数学符号，这个是很常见的，这里做一下简单总结，日后会用到。
MathJax支持多种公式输入输出规范，输入格式可以是MathML, TeX，ASCIImath中的任何一种，输出格式可以是html+css，或svg，或MathML。下面仅对最常用的Tex输入规范进行说明。
想获取更多关于数学公式的信息，具体可以参考：
https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
https://www.mathjax.org/

1.1 公式定界符

公式定界符为$和$$，单个美元符号包围的是行内数学公式，美元符号包围的是块公式。

数学块（以$$开头并且以$$结尾）
举例：
$$ \lim_{x \to \infty} \exp(-x) = 0 $$
效果：
$\lim_{x \to \infty} \exp(-x) = 0$
行内数学公式（以$开头并且结尾）
例如： $\lim_{x \to \infty} \exp(-x) = 0$
效果： $\lim_{x \to \infty} \exp(-x) = 0$

Tex关键字（字符转义序列）表示特殊显示符号，如\frac表示分数，其后面可以跟随参数，参数多少与关键字有关。

1.2 上下标

^表示上标，_表示下标，如果上（下）标内容多于一个字符就需要使用{}，注意不是( ), 因为( )经常是公式本身组成部分，为避免冲突，所以选用了{} 将其包起来。

示例： $x^{y^z}=(1+e^x)^{-3xy^n}$

效果： $x^{y^z}=(1+e^x)^{-3xy^n}$

1.3 括号和分隔符的使用

( )和[ ]就是自身了，由于{ } 是Tex的元字符，所以表示它自身时需要转义。

示例：$f(x,y) = x^2 + y^2, x \epsilon [0,100]$，y \epsilon \{5,6,7\}

效果： $f(x,y) = x^2 + y^2, x\epsilon[0,100]，y\epsilon\{5,6,7\}$

有时候括号需要大号的，普通括号不好看，此时需要使用\left和\right加大括号的大小。

示例：$(\frac {x} {y} )^2$，$\left(\frac {x} {y} \right)^2$

效果： $(\frac {x} {y} )^2$ ， $\left(\frac {x} {y} \right)^2$

\left和\right必须成对出现，对于不显示的一边可以使用 .代替。

示例： $\left. \frac {du} {dx} \right | _{x=1}$

效果： $\left. \frac{du}{dx} \right| _{x=1}$

常见的用法汇总：

$(x)$ $[x]$ $\{x\}$
$\Vert x \Vert$ $\langle x \rangle$
$\lceil x \rceil$ $\lfloor x \rfloor$
$\lbrace$ $\rbrace$
$\left.\frac1 2 \right \rbrace is 12$
$\Biggl(\biggl(\Bigl(\bigl((x)\bigr)\Bigr)\biggr)\Biggr) gives (((((x)))))$

效果：
$(x)$ $[x]$ $\{x\}$
$\Vert x \Vert$ $\langle x \rangle$
$\lceil x \rceil$ $\lfloor x \rfloor$
$\lbrace$ $\rbrace$
$\left.\frac1 2 \right \rbrace is 12$
$\Biggl(\biggl(\Bigl(\bigl((x)\bigr)\Bigr)\biggr)\Biggr) gives (((((x)))))$

1.4 分数

使用\frac{分子}{分母}格式，或者分子\over 分母。

示例：$\frac{1}{3x+2}$或者$1\over{3x+2}$

效果： $\frac{1}{3x+2}$ 或者 $1\over{3x+2}$

1.5 开方

示例：$\sqrt[3]{12}$ 和 $\sqrt{4}$

效果： $\sqrt[3]{12}$ 和 $\sqrt{4}$

1.6 省略号

有两种省略号，\ldots 表示语文本底线对其的省略号，\cdots表示与文本中线对其的省略号。

示例： $f(x_1, x_2, \ldots, x_n)=x_1^2 + x_2^2+ \cdots + x_n^2$

效果： $f(x_1, x_2, \ldots, x_n)=x_1^2 + x_2^2+ \cdots + x_n^2$

1.7 矢量

示例： $\vec{a} \cdot \vec{b}=0$

效果: $\vec{a} \cdot \vec{b}=0$

1.8 积分

示例： $\int_0^1x^3{\rm d}x$ 或者 $\int_0^1x^3dx$

效果： $\int_0^1x^3{\rm d}x$

1.9 极限

示例： $\lim_{n\rightarrow+\infty}\frac{1}{n(n+1)}$

效果： $\lim_{n\rightarrow+\infty}\frac{1}{n(n+1)}$

1.10 累加和累乘

示例1：

$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$

效果：
$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$

示例2： $\sum_1^n\frac{1}{x^3}$ ， $\prod_{i=0}^n\frac{1}{x^3}$

效果： $\sum_1^n\frac{1}{x^3}$ ， $\prod_{i=0}^n\frac{1}{x^3}$

1.11 希腊字母

希腊字符示例：$$\alpha　A　\beta　B　\gamma　\Gamma　\delta　\Delta　\epsilon　E \varepsilon　　\zeta　Z　\eta　H　\theta　\Theta　\vartheta \iota　I　\kappa　K　\lambda　\Lambda　\mu　M　\nu　N \xi　\Xi　o　O　\pi　\Pi　\varpi　　\rho　P \varrho　　\sigma　\Sigma　\varsigma　　\tau　T　\upsilon　\Upsilon \phi　\Phi　\varphi　　\chi　X　\psi　\Psi　\omega　\Omega$$

效果：
$\alpha　A　\beta　B　\gamma　\Gamma　\delta　\Delta　\epsilon　E \varepsilon　　\zeta　Z　\eta　H　\theta　\Theta　\vartheta \iota　I　\kappa　K　\lambda　\Lambda　\mu　M　\nu　N \xi　\Xi　o　O　\pi　\Pi　\varpi　　\rho　P \varrho　　\sigma　\Sigma　\varsigma　　\tau　T　\upsilon　\Upsilon \phi　\Phi　\varphi　　\chi　X　\psi　\Psi　\omega　\Omega$

1.12 使用指定字体

可以设置字体，如：
使用古代德国人字体： ${\mathfrak hello world}$
效果： ${\mathfrak hello world}$

其他的字体还有：
\it 意大利体
\rm 罗马字体
\bf 黑体
\cal花体
\sl 倾斜体
\sf 等线体
\mit 数学斜体　　　　　　
\tt 打字机字体
\sc 小体大写字母
\mathit 斜体字
\mathscr script letters
\mathfrak 古代德国人字体

1.13 数学符号汇总

普通符号
```
$\times$ $\div$ $\pm$ $\bot$ $\angle$ $30^\circ$
$\mid$ $\cdot$ $\circ$ $\ast$ $\partial$
$\bigodot$ $\bigotimes$ $\bigoplus$
$\geq$ $\leq$ $\neq$ $\equiv$ $\approx$ $\sum$ $\prod$ $\coprod$
$\alpha$ $\beta$ $\omega$ $\Gamma$ $\Delta$ $\nabla$ $\Omega$
```
效果：
$\times$ $\div$ $\pm$ $\bot$ $\angle$ $30^\circ$
$\mid$ $\cdot$ $\circ$ $\ast$ $\partial$
$\bigodot$ $\bigotimes$ $\bigoplus$
$\geq$ $\leq$ $\neq$ $\equiv$ $\approx$ $\sum$ $\prod$ $\coprod$
$\alpha$ $\beta$ $\omega$ $\Gamma$ $\Delta$ $\nabla$ $\Omega$
数学中逻辑运算符
```
$\because$ $\therefore$ 
$\not=$ $\not>$ $\not<$
$\forall$ $\exists$ $\not\subset$
```
效果：
$\because$ $\therefore$
$\not=$ $\not>$ $\not<$
$\forall$ $\exists$ $\not\subset$
对数运算符
$\log$ $\lg$ $\ln$ $\log_2x$

效果： $\log$ $\lg$ $\ln$ $\log_2x$
三角函数运算符
```
$\sin$ $\cos$ $\tan$ $\cot$ $\sec$ $\csc$
```
效果：
$\sin$ $\cos$ $\tan$ $\cot$ $\sec$ $\csc$
集合运算符
```
$\subset$ $\supset$ $\subseteq$ $\supseteq$
$\bigcap$ $\bigcup$ $\bigvee$ $\bigwedge$ $\biguplus$ 
$\emptyset$ $\in$ $\notin$ $\bigsqcup$
```
效果：
$\subset$ $\supset$ $\subseteq$ $\supseteq$
$\bigcap$ $\bigcup$ $\bigvee$ $\bigwedge$ $\biguplus$
$\emptyset$ $\in$ $\notin$ $\bigsqcup$
微积分运算符
```
$\prime$ $y{\prime}x$  $\int$ $\iint$ $\iiint$  $\oint$ $\lim$ $\infty$
```
对应的效果：
$\prime$ $y{\prime}x$ $\int$ $\iint$ $\iiint$ $\oint$ $\lim$ $\infty$
箭头表示方式：
```
$\uparrow$ $\downarrow$ $\leftarrow$ $\rightarrow$
$\Uparrow$ $\Downarrow$ $\Leftarrow$ $\Rightarrow$ 
$\longleftarrow$ $\longrightarrow$ $\Longleftarrow$ $\Longrightarrow$
```
效果：
$\uparrow$ $\downarrow$ $\leftarrow$ $\rightarrow$
$\Uparrow$ $\Downarrow$ $\Leftarrow$ $\Rightarrow$
$\longleftarrow$ $\longrightarrow$ $\Longleftarrow$ $\Longrightarrow$

本文参考链接：
https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
https://www.mathjax.org/
https://blog.csdn.net/smstong/article/details/44340637

写博客是为了记住自己容易忘记的东西，另外也是对自己工作的总结，希望尽自己的努力，做到更好，大家一起努力进步！

如果有什么问题，欢迎大家一起探讨，代码如有问题，欢迎各位大神指正！

给自己的梦想添加一双翅膀，让它可以在天空中自由自在的飞翔！

Markdown数学符号使用