Markdown语法大全

你还不会Markdown吗?

Posted by MurphyChen on February 21, 2020

前言

Markdown 是一种轻量级的标记语言,可用于在纯文本文档中添加格式化元素。Markdown 由 John Gruber 于 2004 年创建,如今已成为世界上最受欢迎的标记语言之一,是程序员必备写作写文档技巧。

优点:

  1. 专注于文字内容;
  2. 纯文本,易读易写,可以方便地纳入版本控制;
  3. 语法简单,没有什么学习成本,能轻松在码字的同时做出美观大方的排版。

编写 markdown 文档的三种方式:

  1. 下载 Markdown 编辑器。Markdown 编辑器是一类可以编辑并预览 markdown 语法的文本编辑器。这里推荐下载:Typora

  2. 同时你也可以选择使用高级本文编辑器:VSCode,并安装好 Markdown 插件即可实时预览。 markdown 文档的文件名后缀为 .md,记得修改。

  3. 实用这个在线编写平台:Codimd

1. 标题

#  一级标题

##  二级标题

###  三级标题

####  四级标题

#####  五级标题

注意

  • 记得在 # 后面加空格,且一级标题最大
  • 一级标题 # 后面不能直接接三级标题 ###,要先接二级标题 ##

2. 段落

留空白的换行,会自动转换成一个段落,会形成一定的间距,便于阅读。 比如:

1
2
3
段落一

段落二

效果:
段落一

段落二

3. 列表

3.1 无序列表

+,-,* 等后加上空格即可形成有序列表 如:

1
2
3
4
5
6
+ 水果
  + 香蕉
  + 西瓜
  + 苹果
    + 青苹果
    + 红苹果

即:

  • 水果
    • 香蕉
    • 西瓜
    • 苹果
      • 青苹果
      • 红苹果

+ 后面记得加空格 可以嵌套使用无序列表

3.2 有序列表

直接使用数字加小数点 如:

1.
2.
3.

3.3 高级列表

形成有可勾选框的清单

1
2
- [x] 1.早睡早起
- [ ] 2.看书打代码

即:

  • 1.早睡早起
  • 2.看书打代码

4. 表格

冒号的位置可以自定义对齐方式(左、中、右)

1
2
3
4
5
|姓名|班级|学号|成绩|
|:---|:---:|---:|:---|
|张三|计科191|6109119001|90|
|李四|计科192|6109119002|89|
|王五|计科193|6109119003|91|
姓名 班级 学号 成绩
欧阳青春 计科 191 6109119001 90
李四 计科 192 6109119002 91
王五 计科 193 6109119003 88

5.代码块及语法高亮

在代码区中的语法不会被执行,可用来撰写与 markdown 语法相关的文件 注意可以在第一行反引号后面加上代码块所使用的语言,来实现语法高亮

5.1 用反引号 ` 来插入行内代码

如:

1
` String name = "hacker.c" `

即: String name = "hacker.c"

5.2 三个连续的反引号 ``` 包裹多行代码

```cpp
const float PI = 3.14;
long long b = 6109119001;
```

1
2
const float PI = 3.14;
long long  b = 6109119001;

5.3 使用缩进

注意:

  • 缩进式插入前方必须有空行
  • 缩进使用一个制表符或四个空格

5.4 使用 details 标签收起/展开代码

使用方式如下:

1
2
3
4
<details open="open">
<summary>收起/展开代码</summary>
//在这里放你的代码
</details>

效果如下:

收起/展开代码 //在这里放你的代码 int a;

注意:

  • open 属性的值为 open,如不指定此属性,则默认代码收起。
  • 实际上此功能不仅限于代码块,也适用于其他文本。

6. 字体格式处理

  • 斜体 *斜体*斜体
  • 粗体 **粗体**粗体
  • 加粗斜体 ***加粗斜体***加粗斜体

  • 删除线 删除线删除线

  • 下划线 <u>a</u>a

  • 上标 x<sup>y</sup>:xy

  • 下标 x<sub>y</sub>:xy

7. 引用

1
> 引用内容或注释

效果:

引用内容或注释

8. 分割线和换行

  • 分割线:---<hr>
  • 换行:<br>

9. 段首缩进

  • &ensp;&#8194;表示一个半角的空格
  • &emsp;&#8195;表示一个全角的空格
  • &emsp;&emsp; 表示两个全角的空格 (用的多些)
  • &nbsp;&#160 表示不换行的空白格

10. 插入链接

Markdown 支持三种链接:行内链接参考链接自动链接

10.1 行内链接

语法格式:

[链接文字](链接网址 "标题")

注意:

  • 网址和标题间有空格
  • "标题" 是指鼠标放上去的文本提示
1
This is an [baidu link](http://www.baidu.com "百度").

效果: This is an baidu link.

10.2 参考链接

语法格式:

1
2
3
[链接文字][name]

[name]:网址链接 "标题"

注意:同样的,标题前面有空格

例如

1
2
3
4
5
当使用了[必应][1]之后,我才开始拒绝使用[百度][2][搜狗][3][1]: https://cn.biying.com/ "必应"
[2]: https://www.baidu.com/ "百度"
[3]: https://www.sougou.com/ "搜狗"

效果: 当使用了必应之后,我才开始拒绝使用百度搜狗

10.3 自动链接

Markdown 也支持用<>直接将链接包裹起来的方式创建自动链接 需要注意,即使不加括号,Markdown 处理器也会自动将其转换为链接。。

1
<https://www.baidu.com>

https://www.baidu.com

11. Markdown 表情包

这个刚开始也是我自己不经意间发现的 例如

1
2
3
4
:smile:
:laughing:
:kissing:
:joy:

详见 这里

效果如下:

emoji

由于有的博客框架需要安装额外的 markdown 渲染器才能显示,所以这里不好展示。在 Typora 和 VSCode 都能显示,上图为截图展示。

12. 插入图片

12.1 最基础的格式

1
![Alt text](图片链接"Title")

实时上,这也是最常用的形式。我们一般将图片上传至 图床,然后获取图片链接。

12.2 插入本地图片

1
![Alt text](本地图片位置路径)

Alt text 是当图片不能正常显示时,显示的替代文本。

13. 制作流程图

Markdown 可以用来制作流程图,但考虑到不同编辑器支持的流程图渲染方式不同,甚至因为博客框架的不同而不同。因此不好展示,具体可自行谷歌搜索。

当然,这个功能也不常用。

待更新

14. Markdown 数学公式

待更新