200316.Markdown基本语法，尽可能的全
[Markdown]01.Markdown基本语法，尽可能的全
Markdown是一种纯文本格式的轻量级标记语言。通过简单的标记语法，它可以使普通文本内容具有一定的格式。
当前许多网站都广泛使用Markdown来撰写帮助文档或者发布消息再或者发布博客，比如：Github、CSDN博客、简书、有道云笔记、Hexo等。那么下面来简单介绍一下Markdown的语法。
[TOC]
原文与正文内容的区别
Markdown是一种标记语言。
graph LR
原文-->编译器
编译器-->正文
原文是作者编写中使用的，里面包含标记字符。原文中的标记字符具有特殊意义，用来标识某些功能。
编译器用来将原谅转换为正文，将原谅中的标记符号转换为格式及图形。
正文显示时这些标记符号并不会显示。
示例，原文如下：
#### 这是四级标题
**这是加粗正文**
正文显示效果如下：
这是四级标题
这是加粗正文
示例中的，`、#、*都是标记符号，在显示中并不显示。
让标记符号在正文中显示
要想这些标记字符在正文显示出来，必须将\符号放在标记字符前。
示例，原文如下：
#### 原文中拥有标记符号的标题\#
**原文中拥有标记符号\*的正文**
正文显示效果如下：
原文中拥有标记符号的标题
原文中拥有标记符号*的正文
注意：\字符也是标记字符，它表示后面的标记字符不被原文识为标记语言的组成部分，将显示在正文当中。
标题
只要在文字前面加#，即可把这段文字设置为标题。一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。
注意：标准语法一般在#后跟个空格再写文字，虽然现在某些markdown编辑器不用空格也可以，但是最好还是按照标准语法来。比如Typora编辑器中不空格就不会生成标题的样式。
示例，原文如下：
# 这是一级标题
## 这是二级标题
### 这是三级标题
正文显示效果如下：
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
注释
如果你想某些信息不在正文中显示，只在原文中显示，可以使用注释语法。
语法格式如下：
<!-- 要隐藏的内容。 -->
示例，原文如下：
<!-- 这些文字不会在正文中显示，只能在原文件中看到。 -->
正式内容如下：
可以看到，在正文中是无法看到这些信息的。
脚注
脚注功能严格来说属于markdown的扩展语法里面。在使用上也有不同的"表达方式"，例如我在不同的编辑器里面，如typora和mweb，以及Mdnice、坚果云的网页编辑都不一样的代码输入和渲染方式。
原文如下：
茅盾[^1]
[^1]: 我国著名的文学作家
正文内容如下：
茅盾[1]
序号
有时我们需要对文本进行自动编号时，可以使用如下格式来进行。
示例，原文如下：
1. 第一条
2. 第二条
3. 第三条
正文内容如下:
- 第一条
- 第二条
- 第三条
字体样式
在写具体内容的时候，可能需要对某些内容显示不一样的样式，以用于特别标注。那么Markdown支持以下四种样式：
- 加粗 要加粗的文字左右分别用两个*号即可
- 斜体 要倾斜的文字左右分别用一个*号即可
- 斜体加粗 要倾斜和加粗的文字左右分别用三个*号即可
- 删除线
要加删除线的文字左右分别用两个~号即可
示例，原文格式如下:
**加粗效果**
*斜体效果*
***斜体加粗效果***
~~删除效果~~
正文显示效果如下：
加粗效果
斜体效果
斜体加粗效果
删除效果
引用
在需要设为引用的文字前面加上>即可，引用也支持嵌套，原文如下：
> 一级引用
>> 二级引用
>>> 三级引用
以此类推
正文显示效果如下：
一级引用
二级引用
三级引用
分割线
一行连用三个或者三个以上的星号*，减号-，或者下划线_，就可以表示分割线。
示例，原文如下：
***
---
___
可以看到正文显示效果是一样的，如下：
图片
在Markdown中插入图片的语法如下
- Alt text：图片的Alt标签，用来描述图片的关键词，可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字，后来又被用于SEO，可以方便搜索引擎根据Alt text里面的关键词搜索到图片。
图片链接：可以是图片的本地地址或者是网址。 - "optional title"：鼠标悬置于图片上会出现的标题文字，可以不写。
超链接形式
只需要在基础语法的括号中填入图片的网络链接即可，现在已经有很多免费/收费图床和方便传图的小工具可选。
示例，原文内容：
效果如下
正文显示效果如下：
[图片上传失败...(image-21219a-1620097738447)]
本地图片
只需要在基础语法的括号中填入图片的位置路径即可，支持绝对路径和相对路径。
示例，原文内容下：
正文显示效果如下：
[图片上传失败...(image-ffc8b0-1620097738447)]
把图片存入markdown文件
用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。
基础用法：
这个时候会发现插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个id来调用，文章就不会被分割的这么乱了。
高级用法，原文内容如下：
![avatar][base64str]
[base64str]:data:image/png;base64,iVBORw0.....
这种方法Atom、有道云笔记支持，简书不全部支持，并且只支持png图片文件格式，不推荐使用。
超链接
Markdown还支持超链接，语法格式如下：
[超链接名](超链接地址 "超链接title")
注意：title可加可不加
示例，原文内容如下：
[会蹦的小黑的博客](http://blog.dawnguo.cn "那是不可能的事")
正文显示效果如下：
注意：上面语法中[]中的内容为超链接名，那么[]其实可以不用文字，可以换成一张图片，如下
效果如下（微信公众号中暂不支持外部链接的跳转）：
avatar
avatar
表格
Markdown还支持插入表格，语法如下
|表头|表头|表头|
|-|:-:|-:|
|内容|内容|内容|
|内容|内容|内容|
第二行分割表头和内容,同时也是表格居中居左居右的定义：
- -符号有一个就行，多个也可以，只有-符号的话默认是居左
- -符号两边加：表示文字居中
- -符号右边加：表示文字居右
示例，原文显示如下：
| 公众号 | 好感度 | 点赞数 | 好评数 |
| - | :-: | -: |:-|
| 会蹦的小黑 | 99+ | 99+ | 99+ |
| 会蹦的小黑 | 99+ | 99+ | 99+ |
正文显示效率如下：
| 公众号 | 好感度 | 点赞数 | 好评数 |
|---|---|---|---|
| 会蹦的小黑 | 99+ | 99+ | 99+ |
| 会蹦的小黑 | 99+ | 99+ | 99+ |
代码块
Markdown最让人喜欢的一点就是支持代码高亮，并且支持数几十种语言的高亮，语法格式很简单。
多行示例
代码区块使用 4 个空格或者一个制表符（Tab 键）。
原文如下：
print("代码块第一行")
print("代码块第二行")
正文显示效果如下：
print("代码块第一行")
print("代码块第二行")
你也可以用 ``` 包裹一段代码，并指定一种语言（也可以不指定）：
原文内容如下：
```python
print("代码块")
```
正文显示效果如下：
print("代码块")`
适用场景是单独的贴上一整段代码，那么在三个`之间插入代码即可。
单行示例
如你需要在一段文字中加入一小行代码,那么在两个`插入代码即可。
原文内容如下：
我们要在段落中使用代码块，比如`print("代码块")`。
正文显示效果如下：
我们要在段落中使用代码块，比如print("代码块")。
目录
键入[TOC]，之后回车目录便会呈现，目录树会根据文档中的h1~h6标题自动生成，并且支持点击跳转。
[TOC]
注意：[TOC]需要独占一行才能生效。
跳转到指定标题
手动添加跳转到某个标题的链接。使用如下的语法：
[名称](#id)
“名称”可以随便填写，“id”需要填写跳转到的标题的内容。
示例，原文内容：
[目录](#目录)
注意：Markdown会自动给每一个h1~h6标题生成一个锚，其id就是标题内容。
在Markdown中画流程图
如何在Markdown中画流程图呢？当然是用mermaid了，mermaid支持三种图形的绘制, 分别是流程图, 时序图和甘特图, 本节只介绍了mermaid中流程图在markdown的使用。
如何在markdown中使用mermaid
如何在markdown中使用mermaid
graph 流程图方向
流程图内容
流程图方向有下面几个值：
- TB 从上到下
- BT 从下到上
- RL 从右到左
- LR 从左到右
- TD 同TB
graph LR
原文-->编译器
编译器-->正文
正文效果如下：
graph LR
原文-->编译器
编译器-->正文
基本图形
- id + [文字描述]矩形
- id + (文字描述)圆角矩形
- id + >文字描述]不对称的矩形
- id + {文字描述}菱形
- id + ((文字描述))圆形
原文示例如下：
graph TD
id[带文本的矩形]
id4(带文本的圆角矩形)
id3>带文本的不对称的矩形]
id1{带文本的菱形}
id2((带文本的圆形))
正文显示效果如下：
graph TD
id[带文本的矩形]
id4(带文本的圆角矩形)
id3>带文本的不对称的矩形]
id1{带文本的菱形}
id2((带文本的圆形))
节点之间的连接
A --> B A带箭头指向B
A --- B A不带箭头指向B
A -.- B A用虚线指向B
A -.-> B A用带箭头的虚线指向B
A ==> B A用加粗的箭头指向B
A -- 描述 --- B A不带箭头指向B并在中间加上文字描述
A -- 描述 --> B A带箭头指向B并在中间加上文字描述
A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述
mermaid
graph LR
A[A] --> B[B]
A1[A] --- B1[B]
A4[A] -.- B4[B]
A5[A] -.-> B5[B]
A7[A] ==> B7[B]
A2[A] -- 描述 --- B2[B]
A3[A] -- 描述 --> B3[B]
A6[A] -. 描述 .-> B6[B]
A8[A] == 描述 ==> B8[B]
graph LR
A[A] --> B[B]
A1[A] --- B1[B]
A4[A] -.- B4[B]
A5[A] -.-> B5[B]
A7[A] ==> B7[B]
A2[A] -- 描述 --- B2[B]
A3[A] -- 描述 --> B3[B]
A6[A] -. 描述 .-> B6[B]
A8[A] == 描述 ==> B8[B]
子流程图
格式
subgraph title
graph definition
end
示例
mermaid
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
效果：
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
时序图
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
甘特图
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
原文是网页版本，里面添加了不少广告，影响学习使用。本文是自己对原文按照自己的学习方式进行修改改进的，如果不喜欢请看原文链接。
由于原文是是发布在微信当中，微信的分享链接是每天变化的，所以只能提供原文的搜索链接，请见谅。
-
我国著名的文学作家
茅盾1 ↩
