文章目录

前言
- 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→∞exp⁡(−x)=0\lim_{x \to \infty} \exp(-x) = 0 x→∞limexp(−x)=0
行内数学公式（以$开头并且结尾）
例如： $\lim_{x \to \infty} \exp(-x) = 0$
效果：lim⁡x→∞exp⁡(−x)=0\lim_{x \to \infty} \exp(-x) = 0limx→∞exp(−x)=0

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

1.2 上下标

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

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

效果：xyz=(1+ex)−3xynx^{y^z}=(1+e^x)^{-3xy^n}xyz=(1+ex)−3xyn

1.3 括号和分隔符的使用

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

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

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

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

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

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

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

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

效果：dudx∣x=1\left. \frac{du}{dx} \right| _{x=1}dxdu∣∣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) [x][x][x] {x}\{x\}{x}
∥x∥\Vert x \Vert∥x∥ ⟨x⟩\langle x \rangle⟨x⟩
⌈x⌉\lceil x \rceil⌈x⌉ ⌊x⌋\lfloor x \rfloor⌊x⌋
{\lbrace{ }\rbrace}
12}is12\left.\frac1 2 \right \rbrace is 1221}is12
(((((x)))))gives(((((x)))))\Biggl(\biggl(\Bigl(\bigl((x)\bigr)\Bigr)\biggr)\Biggr) gives (((((x)))))(((((x)))))gives(((((x)))))

1.4 分数

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

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

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

1.5 开方

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

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

1.6 省略号

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

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

效果：f(x1,x2,…,xn)=x12+x22+⋯+xn2f(x_1, x_2, \ldots, x_n)=x_1^2 + x_2^2+ \cdots + x_n^2f(x1,x2,…,xn)=x12+x22+⋯+xn2

1.7 矢量

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

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

1.8 积分

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

效果：∫01x3dx\int_0^1x^3{\rm d}x∫01x3dx

1.9 极限

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

效果： lim⁡n→+∞1n(n+1)\lim_{n\rightarrow+\infty}\frac{1}{n(n+1)}limn→+∞n(n+1)1

1.10 累加和累乘

示例1：

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

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

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

效果：∑1n1x3\sum_1^n\frac{1}{x^3}∑1nx31， ∏i=0n1x3\prod_{i=0}^n\frac{1}{x^3}∏i=0nx31

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

效果：
αAβBγΓδΔϵEεζZηHθΘϑιIκKλΛμMνNξΞoOπΠϖρPϱσΣςτTυΥϕΦφχXψΨωΩ\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α　A　β　B　γ　Γ　δ　Δ　ϵ　Eε　　ζ　Z　η　H　θ　Θ　ϑι　I　κ　K　λ　Λ　μ　M　ν　Nξ　Ξ　o　O　π　Π　ϖ　　ρ　Pϱ　　σ　Σ　ς　　τ　T　υ　Υϕ　Φ　φ　　χ　X　ψ　Ψ　ω　Ω

1.12 使用指定字体

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

其他的字体还有：
\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∘30^\circ30∘
∣\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⁡\loglog lg⁡\lglg ln⁡\lnln log⁡2x\log_2xlog2x
三角函数运算符
```
$\sin$ $\cos$ $\tan$ $\cot$ $\sec$ $\csc$
```
效果：
sin⁡\sinsin cos⁡\coscos tan⁡\tantan cot⁡\cotcot sec⁡\secsec csc⁡\csccsc
集合运算符
```
$\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′xy{\prime}xy′x ∫\int∫ ∬\iint∬ ∭\iiint∭ ∮\oint∮ lim⁡\limlim ∞\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数学符号使用相关推荐

【Tools】Markdown数学符号公式（史上最全公式表）
Markdown数学符号&公式文章目录 Markdown数学符号&公式 1. 希腊字母表 2. 希腊字母 3. 数学符号表 4. 数学符号 5. 数学符号补充表 6. 数学符号补充 ...
Markdown数学符号公式
Markdown数学符号&公式符号代码描述 ∑ \sum ∑ $\sum$ 求和公式 ∑ i = 0 n \sum_{i=0}^n ∑i=0n $\sum_{i=0}^n$ 求和上下标 ...
Markdown 数学符号、公式、花体字母
1. 公式 1.1 公式表达显示代码行内公式行内公式行内公式 $数学公式$ 独立公式独立公式独立公式 $$数学公式$$ 1.2 上下标显示代码 x2x^2x2 $x^2$ x2x_2x2 ...
MarkDown数学符号查阅手册和最佳入门教程【持续更新】
标记函数前言随着越来越多的小伙伴喜欢使用MarKDown文件作为自己的笔记记录工具,在没有接触到数学公式等只是文本表示的内容的时候,小伙伴们只需要记住我们常用的文件标识键就可以了,当我们用Mark ...
MarkDown数学符号之--微分
文章目录常用微分符号常用微分符号语法效果语法效果 $\nabla$ ∇ \nabla ∇ $\partial x$ ∂ x \partial x ∂x $\mathrm{d}x$ d x ...
markdown数学符号整理
由于网上的相关文章大多数也是转载,我在这里就不列出我转自哪篇博文了.持续更新,打造最全的markdown符号表: 符号代码 ∑∑\sum $\sum$ ∑ni=0∑i=0n\sum_{i=0}^n ...
Markdown数学符号
https://blog.csdn.net/garfielder007/article/details/51646604
markdown常用数学符号小结⌈ ⌉⌊ ⌋
文章目录上下标: 运算符: 向量: 微积分: 求和求极限: 括号: 省略号: 转义字符: 数学符号集合运算符: 对数符号: 箭头符号: 三角运算符: 希腊字母: 更多矩阵 markdown 数学 ...
Markdown 最全数学符号与公式速查
Markdown 数学符号与公式 1. 字母 1.1 希腊字母 1.2 数学模式重音符 1.3 字体转换 2. 关系符与运算符 2.1 二元关系符 2.2 二元运算符 2.3 其他符号 3. 公式 4 ...

Markdown数学符号使用