【markdown从入门到出门】

Markdown 是一种轻量级标记语言，是互联网上最流行的写作语言，很多网站，博客，wiki都是用markdown去编写的，它允许人们使用易读易写的纯文本格式编写文档，编写的文档可以导出 HTML 、Word、图像、PDF等多种格式的文档。

Markdown的语言非常非常简单，如果想学，10分钟就完全可以学完90%的常用的语法。

1 基本语法

1.1标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

一到六级标题 效果如下

WDK eat what？

WDK eat what？

WDK eat what？

WDK eat what？

WDK eat what？

WDK eat what？

1.2 字体

markdown里的字体包括 斜体 、 粗体 和 斜粗体
星号 * 与下划线 _ 都可以表示斜体和粗体，一个符号包括是斜体，两个符号是粗体，三个是粗斜体
如 斜体

*WDK eat what*
_WDK eat what_

WDK eat what
WDK eat what
粗体：

**WDK eat what**
__WDK eat what__

WDK eat what
WDK eat what

斜粗体

***WDK eat what***
___WDK eat what___
*__WDK eat what__*   // 也可以混用

WDK eat what
WDK eat what
WDK eat what

1.3 引用

Markdown 中引用通过符号 > 来实现引用，并且可以通过多个>来实现嵌套的引用，如：

>WDK eat what？
>>WDK eat hamburger
>>>He wants to eat fried chicken

WDK eat what？

WDK eat hamburger

He wants to eat fried chicken

1.4链接

插入链接的方式有两种，分别是：

[链接名称](链接地址)
<链接地址>

如

wkd eat what?
http://www.lxjchina.cn/info.asp?base_id=3&second_id=3006

1.5 图片

Markdown中插入图片的使用方式是：

![图片描述，可写可不写，但是中括号要有](图片地址，本地链接或者URL地址。)
如：
![王老师今晚吃啥](http://www.lxjchina.cn/upload/2022-5/2022050937234121.jpg)

同时我们还可以通过在图片url后添加 #pic_center空格=长x宽 的方式来修改图片的大小
如：

![王老师今晚吃啥](https://img-blog.csdnimg.cn/img_convert/b439658af9a0d7214a093e72b8f23b2d.jpeg#pic_center =100x50)

1.6 列表

分为有序列表和无序列表

• 无序列表，使用*、+、-，再加一个空格作为列表的标记
• 有序列表，使用数字并加上.号，再加一个空格作为列表的标记
• 如果要控制层级，还可以通过在列表符号前加入tab
  如：

* wdk breakfast eat what？
+ wdk lunch eat what？
	+ noodle
- wdk dinner eat what？

1. wdk breakfast eat what？
	1.1 noodle
2. wdk lunch eat what？
3. wdk dinner eat what？

效果：

• wdk breakfast eat what？

• wdk lunch eat what？
  • noodle

• wdk dinner eat what？

1. wdk breakfast eat what？
   1.1 noodle
2. wdk lunch eat what？
3. wdk dinner eat what？

1.7 分割线、下划线、删除线

// 分割线
---
***
- - -
* * *
// 下划线
<u>王老师吃不了一点辣</u>

// 删除线
~~王老师吃不了一点辣~~

---

---

// 下划线
王老师能吃一点点辣

// 删除线
王老师吃不了一点辣

1.8 代码块

Markdown中引入代码块，需要在引用的代码块的前一行和后一行使用三个反引号，同时在前一个反引号后写入代码的语言
如：

```cpp
#include<iostream>
int main(){
   printf("HelloWorld");
}
```

#include<iostream>
int main(){
   printf("HelloWorld");
}

1.9 表格

表格使用|来分割不同的单元格，使用-来分隔表头和其他行

:- 将表头及单元格内容左对齐
-: 将表头及单元格内容右对齐
:-: 将表头及单元格内容居中
如

| 菜名        | 价格   |  数量  | 炒菜师傅 |
| --------   | -----:  | :----:  | :----- |
| 土豆烧鸡     | \$1600 |   5     | wdk |
| 地三鲜        |   \$12   |   12   | wdk |
| 牛肉饺子        |    \$1    |  234  | wdk |

菜名	价格	数量	炒菜师傅
土豆烧鸡	$1600	5	wdk
地三鲜	$12	12	wdk
牛肉饺子	$1	234	wdk

2 高级用法

2.1 复选框

格式为、-[] 表示未勾选；-[x]表示已勾选

- [ ] 广式烧腊
- [ ] 辣椒炒肉
- [x] 排骨年糕
- [x] 毛豆烧鸡
- [x] 新疆大盘鸡

• 广式烧腊
• 辣椒炒肉
• 排骨年糕
• 毛豆烧鸡
• 新疆大盘鸡

2.2 书写公式

Markdown支持书写公式，例如书写一个质能守恒公式。
$$表示整行公式

$$E=mc^2$$

$$E=m{c}^2$$

2.3 流程图

Mermaid 是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。

• Mermaid 支持的图表类型包括：
• 流程图 (Flowchart) : 用关键词 graph 或 flowchart 表示
• 顺序图 (Sequence Diagram) : 用关键词 sequenceDiagram 表示
• 类图 (Class Diagram) : 用关键词 classDiagram 表示
• 状态图 (State Diagram) : 用关键词 stateDiagram 表示
• 实体关系图 (Entity Relationship Diagram) : 用关键词 erDiagram 表示
• 用户旅程图 (User Journey Diagram) : 用关键词 journey 表示
• 甘特图 (Gantt Diagram) : 用关键词 gantt 表示
• 饼图 (Pie Chart Diagram) : 用关键词 pie 表示
• 象限图 (Quadrant Chart) : 用关键词 quadrantChart 表示
• 需求图 (Requirement Diagram) : 用关键词 requirementDiagram 表示
• Gitgraph 图 (Gitgraph Diagram) : 用关键词 gitGraph 表示
• 思维导图 (Mindmap) : 用关键词 mindmap 表示
• 时间线图 (Timeline Diagram) : 用关键词 timeline 表示

这里我们已流程图为例，其他的大家需要使用的时候查阅相关资料即可：

流程图 (Flowchart)
流程图由节点（几何形状）和边（箭头或线）组成。Mermaid 代码定义了如何创建节点和边，并适应不同的箭头类型、多向箭头以及与子图之间的任何链接。

节点

flowchart LR
    id

带有文本的节点

flowchart LR
    A[王老师早上饿了]

方向 节点之间的连接

可在图表关键词后添加方向关键词来控制图表方向，流程图可用的方向关键词有以下几种：

TB (Top to bottom) : 从上到下
TD (Top-down) : 同 TB，从上到下
BT (Bottom to top) : 从下到上
RL (Right to left) : 从右到左
LR (Left to right) : 从左到右
如：

flowchart LR
    A[王老师早上饿了] --> B[王老师在路边买了煎饺]

flowchart TB
    A[王老师中午饿了] --> B[王老师在老乡鸡点了肥肠挂面]

节点之间可用箭头或者线连接，箭头或线的类型可通过关键词来指定。需要至少三个 - 符号才能表示线
线连接：

flowchart LR
    A[王老师早上饿了] --- B[王老师在路边买了煎饺]

带有文本的线链接

flowchart LR
    A[王老师早上饿了] -- 他发现没带手机 --- B[王老师早上挨饿]

需要注意的是线右边同样需要至少三个 - 符号才能表示线

节点形状

节点的默认形状为矩形，我们可以通过改变包裹文本的符号来改变节点的形状。
如：圆角矩形

flowchart LR
    A(wdk eat what)

胶囊形节点

flowchart LR
    A([wdk eat what])

圆形节点

flowchart LR
    A((wdk eat what))

卷轴形节点

flowchart LR
    A[[wdk eat what]]

不同的形状有不同的组合，本次介绍到这里了。