CSDN Markdown简明教程3-表格和公式

0. 目录

1. 前言

Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown，希望可以对大家有所帮助。

系列教程目录

• 关于Markdown
• Markdown基本使用
• Markdown表格和公式
• Markdown UML图
• CSDN Markdown快速上手
• Markdown 参考手册

本文为《Markdown简明教程》系列教程的第3篇Markdown表格和公式，主要讲解Markdown实现表格、公式。下一篇文章我们来研读Markdown UML图。

2. 表格

2.1 表格

Markdown使用管线图的方式实现表格，表格里面可以使用强调、链接等行内格式。
下面代码所示为一个基本的表格：

<code class="language-markdown hljs  has-numbering">教程标题| 主要内容
<span class="hljs-horizontal_rule">-------|----------</span>
关于Markdown | 简介Markdown，Markdown的优缺点
Markdown基础 | Markdown的<span class="hljs-strong">**基本语法**</span>，格式化文本、代码、列表、链接和图片、分割线、转义符等
Markdown表格和公式 | Markdown的<span class="hljs-strong">**扩展语法**</span>，表格、公式</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

解析html如下：

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">table</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">thead</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">th</span>></span>教程标题<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">th</span>></span>主要内容<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">thead</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">tbody</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>关于Markdown<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>简介Markdown，Markdown的优缺点<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Markdown基础<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Markdown的<span class="hljs-tag"><<span class="hljs-title">strong</span>></span>基本语法<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>，格式化文本、代码、列表、链接和图片、分割线、转义符等<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Markdown扩展<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Markdown的<span class="hljs-tag"><<span class="hljs-title">strong</span>></span>扩展语法<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>，表格、公式、UML图<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">tbody</span>></span>
<span class="hljs-tag"></<span class="hljs-title">table</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li></ul>

在网页中结果如下：

教程标题	主要内容
关于Markdown	简介Markdown，Markdown的优缺点
Markdown基础	Markdown的基本语法，格式化文本、代码、列表、链接和图片、分割线、转义符等
Markdown表格和公式	Markdown的扩展语法，表格、公式

注意，为了美观起见，可以把前后端管线补齐，如下面代码所示。

<code class="language-markdown hljs  has-numbering">|  教程标题   | 主要内容                      |
|------------|------------------------------|
|关于Markdown | 简介Markdown，Markdown的优缺点|
|Markdown基础 | Markdown的<span class="hljs-strong">**基本语法**</span>，格式化文本、代码、列表、链接和图片、分割线、转义符等|
|Markdown扩展 | Markdown的<span class="hljs-strong">**扩展语法**</span>，表格、公式、UML图|</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

注意，表头下面的虚线为了更好的分隔表头和表格内容，长度随意。

2.2 表格对齐方式

注意，我们同时可以指定表格单元格的对齐方式，如下面代码所示。

<code class="language-markdown hljs  has-numbering">| Day     | Meal     | Price   |
|:--------|---------:|:-------:|
| Monday  | pasta    | $6      |
| Tuesday | chicken  | $8      |</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

显示在网页上结果为：

Day	Meal	Price
Monday	pasta	$6
Tuesday	chicken	$8

注意，表格列的宽度设置不能设置。Markdown更加关注内容，因此格式设置性能较弱，如果确实需要设置，请使用CSS。

3. 公式

通过使用MathJax，我们可以让Markdown解析LaTeX数学表达式，通常情况下，我们需要引入MathJax插件才可能工作。

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

CSDN已经内置了这个插件，我们就不需要手动插入了，可以直接写数学公式了。

3.1 行内公式

我们使用$...$的方式来包含行内公式，例如

<code class="language-markdown hljs  has-numbering">一个简单的数学公式,求圆的面积$S=\pi r^2$。</code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

编译之后表现在网页上，结果为：
一个简单的数学公式,求圆的面积 S=πr2 。

3.2 陈列公式（displayed formulas）

陈列公式使用$$...$$来表示，例如。

<code class="language-markdown hljs  has-numbering">如果使用陈列公式，结果为：
一个简单的数学公式，求圆的面积。
$$
<span class="hljs-code">	S=\pi r^2</span>
$$</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

解析在网页上结果为：
一个简单的数学公式，求圆的面积。

S=πr2

3.3 MathJax语法

1. 使用\alpha、\beta、\gamma表示希腊字母α、β、γ， 使用\Gamma表示大写希腊字母Γ等，如下表所示。

字母	实现	字母	实现
A	A	α	\alhpa
B	B	β	\beta
Γ	\Gamma	γ	\gamma
Δ	\Delta	δ	\delta
E	E	ϵ	\epsilon
Z	Z	ζ	\zeta
H	H	η	\eta
Θ	\Theta	θ	\theta
I	I	ι	\iota
K	K	κ	\kappa
Λ	\Lambda	λ	\lambda
M	M	μ	\mu
N	N	ν	\nu
Ξ	\Xi	ξ	\xi
O	O	ο	\omicron
Π	\Pi	π	\pi
P	P	ρ	\rho
Σ	\Sigma	σ	\sigma
T	T	τ	\tau
Υ	\Upsilon	υ	\upsilon
Φ	\Phi	ϕ	\phi
X	X	χ	\chi
Ψ	\Psi	ψ	\psi
Ω	\v	ω	\omega

2. 利用{}实现优先级。
例如$ x_i^2 $实现 x2i ，而$ x_{i^2} $实现 xi2 。
例如$ \lim_{x\to\infty} $实现 limx→∞ 。
3. 常用数学运算符表示如下。

运算符	说明	运算符案例	案例实现
+	加	x+y	$ x + y $
-	减	x−y	$ x - y $
\times	乘	x×y	$ x \times y $
\cdot	乘	x⋅y	$ x \cdot y $
\ast	乘	x∗y	$ x \ast y $
\div	除	x÷y	$ x \div y $
\frac	分数	xy	$ \frac{x}{y} $
^	上标	xy	$ x ^ y $
_	下标	xy	$ x _ y $
\sqrt	开二次方	x√	$ \sqrt x $
\sqrt	开方	y4+3y−1−−−−−−−−−√x	$ \sqrt[x]{y^4+3y-1} $
\pm	加减	x±y	$ x \pm y $
\mp	减加	x∓y	$ x \mp y $
=	等于	x=y	$ x = y $
\leq	小于等于	x≤y	$ x \leq y $
\geq	大于等于	x≥y	$ x \geq y $
\ngeq	不大于等于	x≱y	$ x \ngeq y $
\not\geq	不大于等于	x≱y	$ x \not\geq y $
\neq	不等于	x≠y	$ x \neq y $
\approx	约等于	x≈y	$ x \approx y $
\equiv	恒等于	x≡y	$ x \equiv y $
\bigodot	定义运算符	x⨀y=x+y2	$ x \bigodot y=x+y^2 $
\bigotimes	定义运算符	x⨂y=x+y2	$ x \bigotimes y=x+y^2 $
\in	属于	x∈y	$ x \in y $
\notin	不属于	x∉y	$ x \notin y $
\subset	子集	x⊂y	x⊂y
\not\subset	非子集	x⊄y	x⊄y
\subseteq	子集	x⊆y	x⊆y
\supset	超集	x⊃y	x⊃y
\supseteq	超集	x⊇y	x⊇y
\cup	并	x∪y	$ x \cup y $
\cap	交	x∩y	$ x \cap y $
\log	对数	log(x)	$ \log(x) $
\overline	平均数	x¯	$ \overline{x} $
\overline	连线符号	a+b+c+d¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯	$ \overline{a+b+c+d} $
\underline	下划线	a+b+c+d−−−−−−−−−−	$ \underline{a+b+c+d} $
\overbrace	上大括号	a+b+c1.0+d2.0	$\overbrace{a+\underbrace{b+c}_{1.0}+d}^{2.0}$
\underbrace	下大括号	a+d3|	$\underbrace{a+d}_3$
\partial	部分	∂x∂y	$ \frac{\partial x}{\partial y} $
\lim	极限	limx→∞	$ \lim_{x\to\infty} $
\displaystyle	块公式格式	limx→∞	$ \displaystyle \lim_{x\to\infty} $
\sum	求和	∑n1	$ \sum_1^n $
\infty	极限	∑∞i=0i2	$ \sum_{i=0}^\infty i^2 $
\int	积分	∫10x2dx	$ \int_0^1 x^2 {\rm d}x $
\ldots	底端对齐的省略号	1,2,…,n	$ 1,2,\ldots,n $
\cdots	中线对齐的省略号	x21+x22+⋯+x2n	x_1^2 + x_2^2 + \cdots + x_n^2
\uparrow	上箭头	↑	$ \uparrow $
\Uparrow	上箭头	⇑	$ \Uparrow $

给个小作业：

Γ(z)=∫∞0tz−1e−tdt.

本文为《Markdown简明教程》系列教程的第3篇Markdown表格和公式，主要讲解Markdown实现表格、公式。下一篇文章我们来研读Markdown UML图。

4. 深入

1. MathJax官方网站
2. MathJax手册
3. MathJax使用LaTeX语法编写数学公式教程
4. Mathjax与LaTex公式简介
5. 小敏纸的博文

5. 声明

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！
欢迎任何形式的转载，烦请注明装载，保留本段文字。
本文原文链接，http://blog.csdn.net/whqet/article/details/44277965
欢迎大家访问独立博客http://whqet.github.io