Markdown的简单用法
关于Markdown
说明
Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。
Markdown语法简明便捷，既弥补了传统纯文本缺少样式的不足，又降低了传统 Word、HTML 等样式文本的技术门槛
文档后缀为 .md 或 .markdown，目前它已是GitHub的御用书写格式
演示工具
当然演示的软件和网站有很多，你自己去度娘找也可以
PC端 ： Typora·已收费丨VSCode·免费
网页端：雷欧的前端客栈丨Marked Demo
标题
以 # 号开头，后面至少一个空格，和H1~H6一样的
输入：
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题列表
列表用的比较多了，逐一来讲
无序列表
以 * 或 + 或 - 开头，后面至少一个空格，标识为实心●圆点
输入：
* 这是第1句
+ 这是第2句
- 这是第3句输出
这是第1句
这是第2句
这是第3句
有序列表
全部使用 1. 即可，生成的时候会自增
说明
也可以手动使用1.、2.、3.
输入：
1. 我的天哪
1. 这么神奇
1. 小岳岳输出：
- 我的天哪
- 这么神奇
- 小岳岳
层级列表
和无序列表一样，使用 * 号开头
每下一层比上一层多 2个空格
注意
第一层前面不可超过3个空格
第一级的标识为实心●圆点，第二级的标识为空心○圆点，第3级以后的标识均为实心■方点
输入：
* 中国
* 北京
* 海淀区
* 百度
* 浙江
* 杭州
* 阿里巴巴
* 广东
* 深圳
* 腾讯输出
- 中国
- 北京
- 海淀区
- 百度
- 海淀区
- 浙江
- 杭州
- 阿里巴巴
- 杭州
- 广东
- 深圳
- 腾讯
- 深圳
- 北京
任务列表
和无序列表一样，使用 * 号开头
格式如下， [ ] 里面是空格，若完成了， [ ] 里的空格换成X
输入：
* [ ] 吃饭
* [ ] 睡觉
* [x] 打豆豆输出
- [ ] 吃饭
- [ ] 睡觉
- [x] 打豆豆
引用
引用比较简单，符号是 >，可以多层嵌套
输入
> 青玉案·元夕
>> 辛弃疾
>>>东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。
>>>蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。输出：
青玉案·元夕
辛弃疾
东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。 蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。
字体
字体的格式也有些多，放在一起吧，符号后无空格
*斜体字*
**粗体字**
~~删除线~~
`高亮`
<u>下划线</u>
<span style="border-bottom:2px dashed yellow;">加下划线用的是html代码</span>输出
斜体字
粗体字
删除线
高亮
下划线
加下划线用的是html代码
图片链接
此方法，适用于图片/视频/音频等，有链接都可以
说明
注：[ ]中括号的替代文字可留空
输入：
如果在链接后加 空格双引号接内容 ，无地址或失效，这时候引号内的文字就有作用了
输入：
输出：
超链接
行内式
格式1：[这里填文字](这里是跳转的网址)
格式2：[这里填文字](这里是跳转的网址 "这里填鼠标放上去显示的文字")输入：
[百度](http://www.baidu.com)
[百度](http://www.baidu.com "百度一下，你就知道")输出 百度
自动链接
格式:<这里填网址>输入：
<https://www.baidu.com>输出：
分割线
同时使用3个连续的 * 或 - 或 _ 表示分割线
输入：
分隔线1*星号
***
分隔线2-+换行+横杠
---
分隔线3_下划线
___输出：
分隔线1*星号
分隔线2-+换行+横杠
分隔线3_下划线
代码块
单个代码
2个反引号，中间写文字或者代码
输入：
`突出文字`输出:
突出文字
多行代码
上下三个反引号 ``` 开始和结尾，中间放内容/文字/代码
::: tip说明
前面加4个空格也是可以的，但不建议这么做 :::
输入：
```sh
pnpm vuepress dev
```输出：
pnpm vuepress dev代码块嵌套
比如我们想展示代码块的写法，但是反引号已经用了，那么我们就用4个反引号 ```` ，以此类推即可
输入：
```
pnpm vuepress build
```输出：
```
pnpm vuepress build
```代码新增行加亮
加入diff即可， + 或 - 都可以表示
输入：
```diff
- pnpm add -D vuepress@next
+ pnpm add -D vuepress@next @vuepress/client@next vue
```输出：
- pnpm add -D vuepress@next
+ pnpm add -D vuepress@next @vuepress/client@next vue锚点
格式：[说明文字](#要跳转的位置)输入：
说明
无论是几级标题，都只用一个#
[跳转到代码块的位置](#代码块)输出：
表格
- 第一行：表头行，用
|隔开，控制分列 - 第二行：控制行，用
-隔开，控制分行
说明
使用冒号 : 可控制对齐方式 :- 表示左对齐 .或 :-: 表示中对齐 -: 表示右对齐
- 第二行：控制行，用
-隔开，控制分行 表头行和控制行数量要一致，否则不生效！
| 名字 | 性别 | 年龄 | 部门 |
|:-:|:-:|:-:|:-:|
| 张三 | 男 | 21 | 产品 |
| 李四 | 女 | 18 | 开发 |
| 王二 | 男 | 20 | 销售 |输出：
| 名字 | 性别 | 年龄 | 部门 |
|---|---|---|---|
| 张三 | 男 | 21 | 产品 |
| 李四 | 女 | 18 | 开发 |
| 王二 | 男 | 20 | 销售 |
也可以采用html的table的形式 输入：
<table>
<tr>
<td>名字</td>
<td>性别</td>
<td>年龄</td>
<td>部门</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>21</td>
<td>产品</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
<td>开发</td>
</tr>
<tr>
<td>王二</td>
<td>男</td>
<td>20</td>
<td>销售</td>
</tr>
</table>输出：
| 名字 | 性别 | 年龄 | 部门 |
| 张三 | 男 | 21 | 产品 |
| 李四 | 女 | 18 | 开发 |
| 王二 | 男 | 20 | 销售 |
如果要合并单元格，使用 colspan 和 rowspan
说明
colspan="2" 表示横向合并2格 rowspan="2" 表示纵向向合并2格 居中用 align="center"
输入：
<table>
<tr>
<td align="center">名字</td>
<td align="center">性别</td>
<td align="center">年龄</td>
<td align="center">部门</td>
</tr>
<tr>
<td align="center">张三</td>
<td align="center">男</td>
<td align="center">21</td>
<td align="center" rowspan="2">产品</td>
</tr>
<tr>
<td align="center">李四</td>
<td align="center">女</td>
<td align="center">18</td>
</tr>
<tr>
<td align="center" colspan="2">王二 男</td>
<td align="center">20</td>
<td align="center">销售</td>
</tr>
</table>输出：
| 名字 | 性别 | 年龄 | 部门 |
| 张三 | 男 | 21 | 产品 |
| 李四 | 女 | 18 | |
| 王二 男 | 20 | 销售 | |
说明
觉得手动敲代码麻烦，可以用在线表格转换工具 在线表格转换工具
脚注
输入：
我的天哪^[出自于云鹏]
我的天哪：这句出自于[^2]
[^2]:出自于：岳云鹏上标/下标
上标使用 ^2^
下标使用 ~2~
输入：
10^2^*10^2^=100^2^
X~1~+X~2~=Y输出：
10^2^*10^2^=100^2^
X~1~+X~2~=Y
换行
回车只能换一行，多次换行可以用
标签表示
说明
在VuePress中是无法被渲染，不可用
<br/>