Markdown数学符号使用

布满荆棘的人生 2021-09-24 03:38 726阅读 0赞

### 文章目录 ###

*  前言
 *   *  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，会显示如下图：  
![在这里插入图片描述][20200411123539607.png]  
其对应的html代码如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70]

## 模拟MathJax渲染原理 ##

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

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

修改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>

来看看效果：  
![在这里插入图片描述][20200411124734318.png]  
虽然没有正确显示出公式，但是已经识别出了公式边界，并把公式部分用红色显示出来。真正的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_math.meta.stackexchange.com_questions_5020_mathjax-basic-tutorial-and-quick-reference]  
[https://www.mathjax.org/][MathJax]

## 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) = 0 limx→∞exp(−x)=0

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

## 1.2 上下标 ##

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

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

效果： x y z = ( 1 + e x ) − 3 x y n x^\{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 ) = x 2 + y 2 , 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$`

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

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

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

效果： d u d x ∣ 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 \}  
 1 2 \} i s 12 \\left.\\frac1 2 \\right \\rbrace is 12 21\}is12  
 ( ( ( ( ( x ) ) ) ) ) g i v e s ( ( ( ( ( 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}$`

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

## 1.5 开方 ##

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

效果： 12 3 \\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 ( x 1 , x 2 , … , x n ) = x 1 2 + x 2 2 + ⋯ + x n 2 f(x\_1, x\_2, \\ldots, x\_n)=x\_1^2 + x\_2^2+ \\cdots + x\_n^2 f(x1,x2,…,xn)=x12\+x22\+⋯\+xn2

## 1.7 矢量 ##

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

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

## 1.8 积分 ##

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

效果： ∫ 0 1 x 3 d x \\int\_0^1x^3\{\\rm d\}x ∫01x3dx

## 1.9 极限 ##

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

效果：  lim ⁡ n → + ∞ 1 n ( 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 = 0 n i 2 = ( n 2 + n ) ( 2 n + 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}$`

效果： ∑ 1 n 1 x 3 \\sum\_1^n\\frac\{1\}\{x^3\} ∑1nx31，  ∏ i = 0 n 1 x 3 \\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 ξ 　 Ξ 　 o 　 O 　 π 　 Π 　 ϖ 　 　 ρ 　 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}$`  
效果：  h e l l o w o r l d \{\\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 ∠  3 0 ∘ 30^\\circ 30∘  
     ∣ \\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 ⁡ \\log log  lg ⁡ \\lg lg  ln ⁡ \\ln ln  log ⁡ 2 x \\log\_2x log2x
 *  三角函数运算符
    
        $\sin$ $\cos$ $\tan$ $\cot$ $\sec$ $\csc$
    
    效果：  
     sin ⁡ \\sin sin  cos ⁡ \\cos cos  tan ⁡ \\tan tan  cot ⁡ \\cot cot  sec ⁡ \\sec sec  csc ⁡ \\csc csc  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70 1]
 *  集合运算符
    
        $\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 ′ x y\{\\prime\}x y′x  ∫ \\int ∫  ∬ \\iint ∬  ∭ \\iiint ∭  ∮ \\oint ∮  lim ⁡ \\lim 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_math.meta.stackexchange.com_questions_5020_mathjax-basic-tutorial-and-quick-reference]  
[https://www.mathjax.org/][MathJax]  
[https://blog.csdn.net/smstong/article/details/44340637][https_blog.csdn.net_smstong_article_details_44340637]

> 写博客是为了记住自己容易忘记的东西，另外也是对自己工作的总结，希望尽自己的努力，做到更好，大家一起努力进步！  
>   
> 如果有什么问题，欢迎大家一起探讨，代码如有问题，欢迎各位大神指正！  
>   
> 给自己的梦想添加一双翅膀，让它可以在天空中自由自在的飞翔！

[MathJax]: https://www.mathjax.org/
[20200411123539607.png]: /images/20210923/35bae5927a464fbf9d13f92a58ba7bfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70]: /images/20210923/b18aa1d653804e1aaacd39d1e7037177.png
[20200411124734318.png]: /images/20210923/ae852d09653040948b0a6a9651c88de2.png
[https_math.meta.stackexchange.com_questions_5020_mathjax-basic-tutorial-and-quick-reference]: https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70 1]: /images/20210923/d9d6f34a13b9476db3276db8dbbc8811.png
[https_blog.csdn.net_smstong_article_details_44340637]: https://blog.csdn.net/smstong/article/details/44340637