Markdown语法（进阶篇）

绝地灬酷狼 2021-09-24 03:38 633阅读 0赞

### 文章目录 ###

*  Markdown常用语法（进阶篇）
 *   *  1.1 文本换行
     *  1.2 文本添加缩进
     *  1.3 添加目录
     *  1.4 导出与导入
     *   *  1.4.1 导出
         *  1.4.2导入
     *  1.5 背景色
     *  1.6 脚注
     *  1.7 KaTeX数学公式
     *  1.8 UML图表
     *  1.9 FLowChart流程图
     *  1.10 新的甘特图功能，丰富你的文章
     *  1.11 上标与下标
     *  1.12 普通符号和数学符号使用
     *  1.13 希腊字母
     *  1.14 Unicode码
     *  1.15 字体、字号与颜色
     *  1.16 锚点

# Markdown常用语法（进阶篇） #

**前言**  
该文章介绍的是Markdown语法的进阶使用，如果没有Markdown基础的童鞋，可以先看一下我的另一篇博文[基础语法介绍][Link 1]，入门了以后，再接着往下看。

## 1.1 文本换行 ##

* 连续输入两个或者以上空格，然后回车即可实现文本内容换行
 * 可以使用html语法中的换行标签` `进行换行

## 1.2 文本添加缩进 ##

Markdown缩进有两种方式，语法：

**第一种：**

你好呀，未进行缩进的正常文本
    
     你好呀（缩进1/4个中文）
    
     你好呀（缩进1/4个中文）
    
     你好呀（缩进1/2个中文，1个字符）
    
     你好呀（缩进1/2个中文，1个字符）
    
     你好呀（缩进1个中文，2个字符）
    
     你好呀（缩进1个中文，2个字符）
    
    你好呀，未进行缩进的正常文本

缩进效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70]

**第二种：**

markdown语法支持html语法，所以可以用以下方式：

你好呀
 你好呀

以上几种方式都可以的，可以根据个人偏好进行选择使用。

## 1.3 添加目录 ##

在首行段落中填写`@[TOC]`以显示全文内容的目录结构,当然了，前提是你使用了分级目录（h1~h6）。  
默认显示的是`文章目录`，如果想改变目录标题的名称，可以使用`@[TOC](这里写目录标题)`这种方式。

## 1.4 导出与导入 ##

### 1.4.1 导出 ###

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 **文章导出** ，生成一个.md文件或者.html文件进行本地保存。

### 1.4.2导入 ###

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，  
继续你的创作。

## 1.5 背景色 ##

Markdown本身不支持背景色设置，需要采用内置html的方式实现：借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。举例如下：

<table><tr><td bgcolor=purple>设置的背景色是：purple</td></tr></table>

<table> 
 <tbody> 
 <tr> 
 <td>背景色是：purple</td> 
 </tr> 
 </tbody> 
</table>

## 1.6 脚注 ##

**语法说明：**  
在需要添加注脚的文字后加上脚注名字1，称为加注。 然后在文本的任意位置(一般在最后)添加脚注，脚注前必须有对应的脚注名字。

这是一个注脚[^2]。
    [^2]:注脚就实现了

效果：  
这是一个注脚2。

## 1.7 KaTeX数学公式 ##

您可以使用LaTeX渲染数学表达式 [KaTeX][]：

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分 $$ \Gamma(z) = \int_0^\infty t^{ z-1}e^{ -t}dt\,.
    $$

![在这里插入图片描述][20200411115905621.png]

> 你可以找到更多关于 **LaTeX** 数学表达式的信息[点击这里][Link 2]，当然，也可以在[Markdown数学符号使用][Markdown]学习到一些常用的数学公式。

## 1.8 UML图表 ##

可以使用 [Mermaid][] 对UML图表进行渲染，例如：

*  下面产生的一个`序列图`：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70 1]

张三李四王五你好！李四, 最近怎么样?你最近怎么样，王五？我很好，谢谢!我很好，谢谢!李四想了很长时间, 文字太长了 不适合放在一行.打量着王五...很好... 王五, 你怎么样?张三李四王五

*  使用下图所示方式，这将产生一个`流程图`：  
    ![在这里插入图片描述][20200411120622850.png]

链接

长方形

圆

圆角长方形

菱形

> 关于 **Mermaid** 语法，参考 [这儿][Mermaid]

## 1.9 FLowChart流程图 ##

我们依旧会支持flowchart的`流程图`：  
![在这里插入图片描述][2020041112085865.png]

Created with Raphaël 2.2.0开始我的操作确认？结束yesno

*  关于 **Flowchart流程图** 语法，参考 [这儿][Link 3]

## 1.10 新的甘特图功能，丰富你的文章 ##

使用下图所示方式，可以做出甘特图效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70 2]

Mon 06Mon 13Mon 20已完成 进行中 计划一 计划二现有任务Adding GANTT diagram functionality to mermaid

*  关于 **甘特图** 语法，参考 [这儿][Mermaid]

## 1.11 上标与下标 ##

上标用法：使用双`^`括住内容  
如：`x^2^`  
效果：x2

下标用法：使用双`~`括住内容  
例如：`H~2~0`  
效果：H20

## 1.12 普通符号和数学符号使用 ##

[Markdown数学符号使用][Markdown]中，详细介绍了一些常用的数学公式。  
为了更方便使用MathJax表达数学符号，整理一部分如下表格：

*  普通符号

<table> 
 <thead> 
 <tr> 
 <th>MathJax语法值</th> 
 <th>对应的数学符号</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td><code>$\times$</code></td> 
 <td> × \times ×</td> 
 </tr> 
 <tr> 
 <td><code>$\div$</code></td> 
 <td> ÷ \div ÷</td> 
 </tr> 
 <tr> 
 <td><code>$\pm$</code></td> 
 <td> ± \pm ±</td> 
 </tr> 
 <tr> 
 <td><code>$\bot$</code></td> 
 <td> ⊥ \bot ⊥</td> 
 </tr> 
 <tr> 
 <td><code>$$\angle$</code></td> 
 <td> ∠ \angle ∠</td> 
 </tr> 
 <tr> 
 <td><code>$30^\circ$</code></td> 
 <td> 3 0 ∘ 30^\circ 30∘</td> 
 </tr> 
 <tr> 
 <td><code>$\mid$</code></td> 
 <td> ∣ \mid ∣</td> 
 </tr> 
 <tr> 
 <td><code>$\cdot$</code></td> 
 <td> ⋅ \cdot ⋅</td> 
 </tr> 
 <tr> 
 <td><code>$\circ$</code></td> 
 <td> ∘ \circ ∘</td> 
 </tr> 
 <tr> 
 <td><code>$\ast$</code></td> 
 <td> ∗ \ast ∗</td> 
 </tr> 
 <tr> 
 <td><code>$\partial$</code></td> 
 <td> ∂ \partial ∂</td> 
 </tr> 
 <tr> 
 <td><code>$\bigodot$</code></td> 
 <td> ⨀ \bigodot ⨀</td> 
 </tr> 
 <tr> 
 <td><code>$\bigotimes$</code></td> 
 <td> ⨂ \bigotimes ⨂</td> 
 </tr> 
 <tr> 
 <td><code>$\bigoplus$</code></td> 
 <td> ⨁ \bigoplus ⨁</td> 
 </tr> 
 <tr> 
 <td><code>$\geq$</code></td> 
 <td> ≥ \geq ≥</td> 
 </tr> 
 <tr> 
 <td><code>$\leq$</code></td> 
 <td> ≤ \leq ≤</td> 
 </tr> 
 <tr> 
 <td><code>$\neq$</code></td> 
 <td> ≠ \neq =</td> 
 </tr> 
 <tr> 
 <td><code>$\equiv$</code></td> 
 <td> ≡ \equiv ≡</td> 
 </tr> 
 <tr> 
 <td><code>$\approx$</code></td> 
 <td> ≈ \approx ≈</td> 
 </tr> 
 <tr> 
 <td><code>$\sum$</code></td> 
 <td> ∑ \sum ∑</td> 
 </tr> 
 <tr> 
 <td><code>$\prod$</code></td> 
 <td> ∏ \prod ∏</td> 
 </tr> 
 <tr> 
 <td><code>$\coprod$</code></td> 
 <td> ∐ \coprod ∐</td> 
 </tr> 
 <tr> 
 <td><code>$\alpha$</code></td> 
 <td> α \alpha α</td> 
 </tr> 
 <tr> 
 <td><code>$$\beta$</code></td> 
 <td> β \beta β</td> 
 </tr> 
 <tr> 
 <td><code>$\omega$</code></td> 
 <td> ω \omega ω</td> 
 </tr> 
 <tr> 
 <td><code>$\Gamma$</code></td> 
 <td> Γ \Gamma Γ</td> 
 </tr> 
 <tr> 
 <td><code>$\Delta$</code></td> 
 <td> Δ \Delta Δ</td> 
 </tr> 
 <tr> 
 <td><code>$\nabla$</code></td> 
 <td> ∇ \nabla ∇</td> 
 </tr> 
 <tr> 
 <td><code>$\Omega$</code></td> 
 <td> Ω \Omega Ω</td> 
 </tr> 
 </tbody> 
</table>

*  三角函数运算符

<table> 
 <thead> 
 <tr> 
 <th>MathJax语法值</th> 
 <th>对应的数学符号</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td><code>$\sin$</code></td> 
 <td> sin ⁡ \sin sin</td> 
 </tr> 
 <tr> 
 <td><code>$\cos$</code></td> 
 <td> cos ⁡ \cos cos</td> 
 </tr> 
 <tr> 
 <td><code>$\tan$</code></td> 
 <td> tan ⁡ \tan tan</td> 
 </tr> 
 <tr> 
 <td><code>$\cot$</code></td> 
 <td> cot ⁡ \cot cot</td> 
 </tr> 
 <tr> 
 <td><code>$\sec$</code></td> 
 <td> sec ⁡ \sec sec</td> 
 </tr> 
 <tr> 
 <td><code>$\csc$</code></td> 
 <td> csc ⁡ \csc csc</td> 
 </tr> 
 </tbody> 
</table>

*  微积分运算符

<table> 
 <thead> 
 <tr> 
 <th>MathJax语法值</th> 
 <th>对应的数学符号</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td><code>$\prime$</code></td> 
 <td> ′ \prime ′</td> 
 </tr> 
 <tr> 
 <td><code>$y{\prime}x$</code></td> 
 <td> y ′ x y{\prime}x y′x</td> 
 </tr> 
 <tr> 
 <td><code>$\int$</code></td> 
 <td> ∫ \int ∫</td> 
 </tr> 
 <tr> 
 <td><code>$\iint$</code></td> 
 <td> ∬ \iint ∬</td> 
 </tr> 
 <tr> 
 <td><code>$\iiint$</code></td> 
 <td> ∭ \iiint ∭</td> 
 </tr> 
 <tr> 
 <td><code>$\oint$</code></td> 
 <td> ∮ \oint ∮</td> 
 </tr> 
 <tr> 
 <td><code>$\lim$</code></td> 
 <td> lim ⁡ \lim lim</td> 
 </tr> 
 <tr> 
 <td><code>$\infty$</code></td> 
 <td> ∞ \infty ∞</td> 
 </tr> 
 </tbody> 
</table>

## 1.13 希腊字母 ##

*  希腊字母  
    [希腊字母百度百科][Link 4]

MarkDown中，使用希腊字母格式：`$\epsilon$` (行内数学公式)，当然，也可以使用双`$$`引起来（数学块），如：`$$\epsilon$$`  
效果：  
 ϵ \\epsilon ϵ

$\alpha$ $\beta$ $\gamma$ $\delta$ $\epsilon$ $\varepsilon$ $\zeta$ $\eta$ $\theta$ $\vartheta$
    $\Alpha$ $\Beta$ $\Gamma$ $\Delta$ $\Epsilon$ $\Zeta$ $\Eta$ $\Theta$

效果：  
 α \\alpha α  β \\beta β  γ \\gamma γ  δ \\delta δ  ϵ \\epsilon ϵ  ε \\varepsilon ε  ζ \\zeta ζ  η \\eta η  θ \\theta θ  ϑ \\vartheta ϑ  
 A \\Alpha A  B \\Beta B  Γ \\Gamma Γ  Δ \\Delta Δ  E \\Epsilon E  Z \\Zeta Z  H \\Eta H  Θ \\Theta Θ

$\sigma$ $\varsigma$ $\tau$ $\upsilon$ $\phi$ $\pi$ $\varpi$ $\rho$ $\varrho$
    $\Sigma$ $\Tau$ $\Upsilon$ $\Phi$ $\Pi$  $\Rho$

效果：  
 σ \\sigma σ  ς \\varsigma ς  τ \\tau τ  υ \\upsilon υ  ϕ \\phi ϕ  π \\pi π  ϖ \\varpi ϖ  ρ \\rho ρ  ϱ \\varrho ϱ  
 Σ \\Sigma Σ  T \\Tau T  Υ \\Upsilon Υ  Φ \\Phi Φ  Π \\Pi Π  P \\Rho P

$\iota$ $\kappa$ $\lambda$ $\mu$ $\nu$ $\xi$ $\varphi$ $\chi$ $\psi$ $\omega$
    $\Iota$ $\Kappa$ $\Lambda$ $\Mu$ $\Nu$ $\Xi$  $\Chi$ $\Psi$ $\Omega$

效果：  
 ι \\iota ι  κ \\kappa κ  λ \\lambda λ  μ \\mu μ  ν \\nu ν  ξ \\xi ξ  φ \\varphi φ  χ \\chi χ  ψ \\psi ψ  ω \\omega ω  
 I \\Iota I  K \\Kappa K  Λ \\Lambda Λ  M \\Mu M  N \\Nu N  Ξ \\Xi Ξ  X \\Chi X  Ψ \\Psi Ψ  Ω \\Omega Ω

## 1.14 Unicode码 ##

字符对应的Unicode码，可以参考这个网站：[https://unicode-table.com/cn/][https_unicode-table.com_cn]，这网站上可以点击某个需要的字符，查看对应的Unicode码，以及对应的HTML代码。

偶然发现一篇Unicode的介绍文章，推荐下：[彻底弄懂 Unicode 编码][Unicode]

## 1.15 字体、字号与颜色 ##

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能的！  
CSDN平台中，Markdown编辑器是其衍生版本，扩展了Markdown的一些功能（如表格、脚注、内嵌HTML等等）。

使用内嵌HTML的方法来改变字体和字号：

华文彩云
 微软雅黑
 color=gray

效果：  
华文彩云  
微软雅黑  
color=gray

内嵌HTML，更多的使用，给水友们推荐一篇博客：[https://blog.csdn.net/qq\_41511151/article/details/100527328][https_blog.csdn.net_qq_41511151_article_details_100527328]

## 1.16 锚点 ##

锚点其实就是页内超链接。

**语法说明：**  
`[查看特殊字符](#锚点名称 "查看Unicode码")`  
必须以\#开头，\#后面紧跟着是锚点的名称，然后是一个空格，注意是英文半角的，然后用双引号括起来的是链接说明提示，就是鼠标滑过链接时显示的内容。

**效果如下：**

*  查看特殊字符

锚点链接添加完成后，我们就需要定义锚点了，这样浏览器才能根据你锚点链接中指定的锚点名称，定位到对应的位置，我们只能通过手动输入HTML中a标签的形式完成这一步： 
**定义锚点：** 
`<a id="锚点名称"></a>` 
注意：a标签中必须使用id属性，name属性好像不支持。

这样，就实现了锚点，当你点击设置锚点的地方，比如我这里，在查看特殊字符这个地方设置了锚点，在1.14节设置了对应的锚点名称，点击`查看特殊字符`时，就可以链接到1.14节对应的锚点那里。

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

--------------------

1.  注脚的解释 ↩︎
2.  注脚就实现了 ↩︎

[Link 1]: https://blog.csdn.net/smilehappiness/article/details/105067651
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70]: /images/20210923/c02482bb13394b7ba3e190c783c235be.png
[KaTeX]: https://khan.github.io/KaTeX/
[20200411115905621.png]: /images/20210923/a1b29b6dab74497990b4a0211cf5654f.png
[Link 2]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[Markdown]: https://blog.csdn.net/smilehappiness/article/details/105450389
[Mermaid]: https://mermaidjs.github.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70 1]: /images/20210923/6fad3dd76bc14c5da2986fe871ce3970.png
[20200411120622850.png]: /images/20210923/07c5ed35be574e00a0bd3436b3df1717.png
[2020041112085865.png]: /images/20210923/1211a0a5d6ed42e5bb9feb1d2c2bbea1.png
[Link 3]: http://adrai.github.io/flowchart.js/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlaGFwcGluZXNz_size_16_color_FFFFFF_t_70 2]: /images/20210923/1e61d000329443babb6d354ab06d6644.png
[Link 4]: https://baike.baidu.com/item/%E5%B8%8C%E8%85%8A%E5%AD%97%E6%AF%8D/4428067?fr=aladdin
[https_unicode-table.com_cn]: https://unicode-table.com/cn/
[Unicode]: https://blog.csdn.net/hezh1994/article/details/78899683
[https_blog.csdn.net_qq_41511151_article_details_100527328]: https://blog.csdn.net/qq_41511151/article/details/100527328