Markdown 的系统介绍和使用技巧

Markdown 系统性总结

众所周知 Mrakdown 是一个轻量级写作工具，由于工作和学习缘故基本上每天都会使用 Mrakdown，现在已经成为我离不开的主力写作工具，因为网上关于 Markdown 的资料大多比较零散，缺少系统和关联性，所以花了一点时间把我目前掌握的 Markdown 知识系统性的归纳总结一下，分享的同时也是为了方便自己以后查询方便。

Markdown 概述

Markdown 诞生于 2004 年，作者是 John Gruber，发展过程就不讲了，目前应用广泛的版本是 GitHub Flavored Markdown，即 GFW 。Markdown 适合完成对文档有轻量级排版需求需求（无法满足专业的格式排版），相比 Word 它主要有以下优势：

1. 学习上手快
2. 一次编写，到处运行
3. 打开速度基本上比 Word 等文字软件要快得多

Markdown 主要功能分为两部分：

1. 基础语法（基本功能）
2. GFW 扩展语法（多样性）

Markdown 基础语法

标题

使用 # 表示文章标题，最多支持六级，使用如下：

# 一级标题
## 二级标题
### 三级标题
…………

粗体和斜体

• 粗体：使用两个 * 包围（不推荐使用_）
• 斜体：使用一个 * 包围（不推荐使用_）

示例：

**粗体**
*斜体*

段落和换行

换行技巧：在行尾加 2 个空格，然后回车即可换行

优雅的段落决定文章的美观，阅读体验，建议遵循以下段落规范：

1. 每行不超过 80 字符
2. 在一句话的结束语（。或者！或者？）之后进行换行
3. URL 太长，建议换行（或者使用引用链接优化阅读体验）

列表

Markdown 支持两种类型列表：有序列表和无序列表，使用方式如下：有序列表格式：

1. 我是第一项
2. 我是第二项
  1. 我是第三项   # 子项目

显示效果：

1. 我是第一项
2. 我是第二项
   1. 我是第三项

无序列表格式：（推荐使用 - 符号表示）：

- 无序列表1
- 无序列表2
  - 无序列表1    # 子项目

效果

• 无序列表1
• 无序列表2
  • 无序列表1

分割线

分隔线让你文章更有段落和层次感，推荐使用 --- 符号表示，#,_ 容易让人产生歧义 使用如下：

---   # 我是分隔符

实际效果：

图片

图片语法如下：

![图片文字](图片地址)

说明：

1. 图片地址支持 本地图片/网络地址图片 两种类型 🌍
2. 除非你写本地日记，如果要发布通常会结合 uPic 图床工具来使用 🔧

实际效果如下：✈️

超链接

Markdown 超链接区分以下几种类型：

1. 文字链接
2. 引用链接
3. 网络链接 （已经不需要 <> 来包围了）

文字链接就是让文字可以跳转链接，如下：

[文字](地址)

效果：点我访问百度

引用链接是通过 变量引用 的方式来增加文字链接可读性的一种方法，使用前：

常用的搜索引擎有：[百度](http://www.baidu.com/)、[谷歌](http://www.google.com)、[必应](http://www.bing.com) 等等

使用引用链接写起来，文档读起来就很舒服：

常用的搜索引擎有：[百度]、[谷歌]、[必应] 等等

[百度]: http://www.baidu.com/
[谷歌]: http://www.google.com/
[必应]: http://www.bing.com/

实际效果：常用的搜索引擎有：百度、谷歌、必应 等等

引用链接的两点说明：

1. 链接的定义建议放在页面尾部
2. 链接要以 http/https 开头，否则会被识别为本地地址

单行代码和代码块

单行代码主要使用 ` 包围，例如：ls -l

多行代码主要使用 ```language 包围（也称围栏代码块，似乎是 GFW 的语法，不过现在大家用这个），例如：

def sum(x, y)
  x + y
end

关于代码块的使用规范：

1. 单行包围 ` 不仅可以表示代码，也可以表示强调自负
2. 代码超过 1 行使用围栏代码块表示，并且声明语言（可以高亮显示）
3. shell 没有输出就不要加 符号代表命令，如果有输出就加上 代表命令行

没有输出推荐使用：

ls -al

有输出推荐（主要区分命令和输出）：

$ echo 'test'
test

引用

需要对一些原著的原文和文献引用的时候，需要用到 > 符号表示引用的内容，效果如下：

引用文本内容。。。。

转义字符

当你需要用 Markdown 来描述 Markdown 的时候（本文就是这么写出来的），或者有些字符你不想被渲染出来，就需要加上 \ 进行转义，语法如下：

\符号

实际效果:

\\  -> \
\*  -> *
\`  -> `
\_  -> _

GFW 扩展语法

GitHub Flavored Markdown 是目前最流行的扩展语法，它提供表格、删除、代码围栏、Emoji 等语法增强

删除线

删除语法：

~~删除文字~~

实际效果是：删除文字

Emoji 表情

语法：:表情代码: 例如：:smile: = :smile: :laughing: = :laughing: :+1: = :+1:

👻 不过 Mac 似乎直接贴 Emoji 也可以 ？干嘛要记这么多表情代码啊。。跳过。。跳过。。

表格

语法格式：

| 表头1 | 表头2 | 表头3 |
| ----- | ----- | ----- |
| 内容1 | 内容2 | 内容3 |

实际效果：

表格的几个建议：

• 建议前后加空格
• 前后都尽量加 | 保持对齐
• 不要搞太复杂的表格

任务列表

用于标记一些代办事项之类的，语法是：

- [ ] 待处理
- [ ] 待处理
- [x] 已完成

如果如下：

• [ ] 待处理
• [ ] 待处理
• [x] 已完成

plantUML 流程图

Markdown 已经快逆天了，已经结合 PlantUML 语法在文档里面画流程图了（微信因为不兼容 plantUML 展示，所以这里无法展示了，大家可以在 MPE 插件中看到效果）

Bob -> Alice : hello
Alice -> Bob : hi

关于排版的几个小技巧

关于如何写出美观、好读文章的几点建议（仅供参考）：

需要加空格的情况

• 中文和英文之间加空格
• 中文/英文和数字之间加空格
• 英文符号（,.;?）后面加空格
• 使用路径符号 > 前后加空格

不加空格的情况

• 中文符号前后不用加空格
• 数字和百分号之间不需要空格
• 数字和单位符号不需要空格
• 路径符号 / 不需要空格

另外几点注意事项

• 中文使用全角符号
• 英文使用半角符号
• 使用正确的驼峰英文：正例：macOS, 反例：MACOS

Markdown 比较简单，掌握以上技巧基本上可以游刃有余的使用 Markdown 了。

在 VSCode 中的技巧

• Markdown 预览快捷键：shift + command + v
• 增强预览插件：Markdown Preview Enhanced

MPE 插件

全称：Markdown Preview Enhanced， 是 VSCode 必装的插件之一

1. 引入外部文件，示例：@import "https://github.com/xiao2shiqi/pro_developer/blob/main/README.md"
2. 支持格式：.md、.csv、.jpg、.png、.git、.html、.pdf 等格式，方便组合
3. 更加方便的使用 reveal.js 创建 PPT （后面再验证）
4. 导出 PDF、HTML 非常方便

MAO 插件

全称：Markdown All in One， 也是 VSCode 必装的插件之一，功能如下：

提供快捷按键：

• 提供 Markdown 格式化功能：Format Document
• 提供代码模版：markdown.json
• 语法检查等等

工具推荐

markdown 写公众号工具

1. Online-Markdown：在线预览内容，复制到公众号可以保持格式
2. Md2All：使用方式差不多，访问：M2dAll 地址