Markdown 学习

Posted on 2020-06-19 Edited on 2026-03-01 Views: Word count in article: 3.9k Reading time ≈ 14 mins.

是时候学一点 Markdown 了！

为什么要学习 Markdown

其实很早之前就有学 Markdown 和 LaTeX 的想法。今年年初由于疫情，不得不在电脑上完成作业，起初是采用 Surface Pen 手写，效果也还不错，后来体验了 Word 自带的 Unicode Math 公式编辑器，瞬间爱不释手，这效率可比手写高多了（并且我也特别享受这样的创作过程），于是又进而萌生了学习 Markdown 和 LaTeX 的想法。一拖再拖到暑假，来认认真真地学习一下吧！

Markdown 有很多的优点，以下是一些简单的介绍。

简洁明了，专注内容的编辑体验

我们平时若想要写一些文字，会采用什么软件呢？利用记事本写 txt 纯文本文档的话，虽然更为通用，可以在几乎任何地方阅读，但似乎可支持的内容太少，不能插入代码块、图片、标题分级、文本的加粗、斜体、下划线等。采用 Word 来编写的话，首先文件的外观就与平台有关，有时候我们好不容易排好了版，但是在其他版本的软件上瞬间变得一团糟。更严重的是，排版本身就将作者大量的注意力里从文字当中吸引走，而不能专注于写作本身，Word 的排版真是门技术活，段前段后缩进、段落距离行距离等我就花了很长时间研究……

这样一来，Markdown 的优点就凸显出来。Markdown 更专注于内容本身，而文档的样式、版式则是由阅读器来决定的（所以使用 Markdown 进行写作可以很方便地换主题）。这样一来，写作者可以更专注于自己正在撰写的文字，也有更多的编辑器和阅读器选择自由度。Markdown 也可以插入公式、图片、代码块、标题、序号等，内容很丰富。个人认为，但就写作体验而言，Markdown 应该是目前最佳的一种格式吧。

对其他平台的友好兼容

正如前述，因为 Markdown 本身不包含版式等信息，它也能够很好地兼容各个平台。CSDN、知乎、简书等博客性质的网站都可以支持导入.md 文件转化为文章，正是利用了 Markdown 的这一特性。其实这次我开始学习 Markdown 的直接诱因就是想在知乎上写一些文章（；´д｀）ゞ

Markdown 的缺点

Markdown 也有很多缺点，首先就是 Markdown 需要记住一些独特的语法，但是这也不算很难。其次，Markdown 插入图片是以链接的方式，而非直接将图片存储在文件之中，这就会导致迁移文件或者图片目录时可能引起图片显示的异常。虽然有一些方法解决这一问题，但总的来讲的确不太方便。此外，Markdown 的公式编辑功能缺乏图形界面的辅助，使用体验不如 Word 的公式编辑器。还有很多的小毛病，比如段首缩进等，对中文的适配等……

（但是，许多功能可以通过软件的辅助来实现）

两款 Markdown 编辑器

开始 Markdown 写作其实只需要下载相应的软件就好了，之所以说需要配置环境，是因为使用 Markdown 在某些情况下需要很多插件（或者 Markdown 本身就是通过插件实现的）。Markdown 的可选编辑器有很多，不再赘述，只提一下我自己用的两款。

Typora

Typora 的优点

UI 很美观，赏心悦目
支持多种显示主题，如 Dark Mode，GitHub 样式等，在网上可以找到更多拓展
支持多个平台
操作简单，不需要什么额外的配置
支持打字机模式、专注模式等，提升写作体验
具有直观的 GUI 操作，例如直接右键单击进行样式设定，插入图片等功能
可以通过快捷键改变文字样式，正如在 Word 中一样
支持字数统计等
总而言之就是更像是一个用来写作的工具了

Typora 的缺点

可自定义性较差
不支持 Markdown 的 format 提醒
采用将源代码区与显示区合为一体的交互方式，在我看来是一种劣势，但是也许有的用户会喜欢吧

将鼠标移动到对应位置即显示出源代码

VSCode

VSCode 原生支持 Markdown 文件的预览和语法高亮，通过插件可以在 VSCode 中实现 Markdown 的更多功能，能少安装一些软件，何乐而不为呢？

VSCode 的优点

VSCode 的界面不用我说了，漂亮的惊人，主题样式也很多，每次写代码都是享受
高度可自定义，只需要编辑.json 配置文件
支持语法高亮
通过插件可以大大增强功能，支持对于 Markdown 格式标准化的提醒，甚至可以进行自动修正等

VSCode截图

VSCode 的缺点

没有图形界面（指对于 Markdown 的编辑而言），大部分操作都需要通过原生的 Markdown 代码实现
需要配置环境，还是有点复杂的（一开始我对.json 不是很熟悉，研究了很久才掌握）

总而言之，VSCode 更像是一款针对程序员的 Markdown 工具，而 Typora 则适合没有那么强的计算机基础的小白，它也适合利用 Markdown 进行纯粹的创作的人群。萝卜白菜各有所爱，总之我是两个都装了。

在 VSCode 上编写 Markdown

首先从微软的官网下载安装 VSCode。

打开你所需要的文件夹，新建 Markdown 文件。

新建MD文件

打开这个文件，就可以看到源代码的编写界面。通过快捷键Ctrl +Shift```+V` 启动预览页面，再把窗口拖拽到另一侧，就成了我们熟悉的 Markdown 编写界面了。

Markdown预览窗口

VSCode 中 Markdown 环境的简单配置

介绍几个小插件，各有各自的功能。

markdownlint

正如其名字里带着的 lint，这款插件主要用于实现 Markdown 写作的格式规范化和自动更正，具体可以访问 markdownlint 规则说明文档。

如果源代码中有与 markdownlint 的规则相抵触之处，则会出现黄色波浪线，将鼠标移至其上，就可以在弹出的选项卡里转到对应规则的描述。有些规则是我们不太想要的，或者需要做一些微调。以规则MD024为例，这一规则要求不能出现内容相同的标题。但是实际使用中，只要从属在不同的上一级标题之下，似乎即使标题相同也不会引起什么误解。

在官方说明文档中我们看到，这一规则对应的名称Aliases为no-duplicate-heading或者no-duplicate-header，参数为siblings-only或者allow_different_nesting，默认值都为false，接下来进行修改。

使用快捷键F1或Ctrl +Shift+P 打开 VSCode 主命令行，直接搜索settings.json，根据自己的需要打开全局或者工作区的配置文件。在配置文件中，添加 markdownlint 的配置语句：

{
  "markdownlint.config": {
    "no-duplicate-heading": { "allow_different_nesting": true }
  }
}

Remark：只需要更改一个参数就行，注意语法，尤其是那个逗号。

这样一来就可以实现允许相同内容的标题出现，但仅在不同的上一级标题之下

此外 markdownlint 还支持更高级的规则自定义，具体参阅 GitHub 上的 markdownlint 自定义规则说明文档

markdownlint 提供的另一个功能是根据这些规则自动格式化文档。要启用同样是在settings.json文件中添加语句：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.markdownlint": true
  }
}

Remark：这一段代码相当于对 VSCode 主体的设置，所以是写在settings.json文件的主体中，而非前述"markdownlint.config"括号内。

完成这个修改之后，每次保存文件都会自动格式化，还挺方便的。这个格式化过程也是可以回退的。

Markdown Preview Enhanced

顾名思义，这个插件就是用来增强 VSCode 中 Markdown 文件的预览体验的。VSCode 默认的预览窗口是跟随 VSCode 全局的主题设置，所以有时候可能暗色模式不太适合阅读文件。

安装 Markdown Preview Enhanced 插件，在源代码窗口右键单击，即可选择在右侧打开预览窗口。不仅可以实现阅读的增强，以及目录的显示，在预览窗口中右键单击还可导出 Markdown 文件为其他格式，实在方便。

Markdown Preview Enhanced

此外，Markdown Preview Enhanced 也具有额外的图片功能！在后文会提到。

Markdown All in One

正如名称所言，这款插件集合了很多功能，包括快捷键、公式、格式转换、目录和脚注等。具体的目前我都还没有摸得很清楚，有待研究。

最为方便的功能就是快捷键，下文中会提到关于文本样式的设定，如加粗、斜体等，在没有插件的情况下就必须通过标记符号来实现，还是比较复杂，而安装了 Markdown All in One 后便可以直接使用快捷键，正如在 Word 中进行编辑一样。当然，值得注意的是，这会覆盖一些 VSCode 自身的快捷键。

Ctrl+B实现加粗

vscode-pandoc

这款轻量插件实现了将 Markdown 文件转换为某些格式，没有 GUI，通过命令行操作。

PicGo

大名鼎鼎的 Markdown 图片辅助工具，VSCode 有可用的插件，基于 PicGo Core 实现，所以没有 GUI。我觉得为什么不直接用 PicGo 软件本体呢？关于 PicGo 在 “图片” 一节中会提到更多。

Markdown 的语法

用简明的方式整理一些基本的 Markdown 语言，需要更详细的解读可以去参照官方文档或者其他的文章。

Remark：大部分 HTML 语法可以直接在 Markdown 中使用，但是 markdownlint 中的规则MD033要求不在 Markdown 中直接使用 HTML 语法，而是使用 “纯粹” 的 Markdown 语言。如果对于黄色波浪线感到反感，可以通过前述的类似方法设定允许使用的 HTML 语法元素。

文本

输入文本就代表文本

换行符只相当于空格，段落是通过一个空行来标记

#标记各级标题，井号的数量标记标题的等级

段首空格并不代表缩进，但是四个空格会代表一个制表符（即Tab键）

使用单星号包围文字以表示斜体，如*文字*显示为文字

Remark：部分编辑器中斜体也可以用单下划线_包围来表示

使用双星号包围文字以表示加粗，如**文字**显示为文字

使用三星号包围文字以表示加粗斜体，如***文字***显示为 ** 文字 **

使用双波浪线包围文字以表示删除线，如~~文字~~显示为文字

使用等号包围文字以实现高亮，如==文字==显示为文字

使用 HTML 中的语法来实现下划线，如<u>文字</u>显示为文字

使用^包围来表示上标，如e^x^显示为 e^x^

使用~包围来表示上标，如a~n~显示为 a~n~

其他的样式可以通过数学公式来实现，例如 $\overline{文字}$ 显示为 $\overline {文字}$

Markdown 支持输入 HTML 转义字符

代码块

段首使用四个空格或者一个制表符即进入代码块模式

也可以在段落前与段落后各加上三个反引号（即键盘左上角的波浪线）```以开启代码块。在第一串三反引号之后加上代码的类型，即可实现语法高亮。

例：

markdown


{ "editor.codeActionsOnSave": { "source.fixAll.markdownlint": true } }

Remark：以上代码块中最后的\是为了不让 Markdown 将其前面的```识别为代码块的结束，没有别的含义

其显示效果即为前文提到的配置settings.json文件时所引用的代码块样式

Remark：正确的转义反引号`的方法并非使用反斜杠，而是使用双反引号及空格将反引号围起来，即
`` ` ``
这将显示为一个代码块内的单反引号

行内代码块，既可以通过三反引号前后包围，也可以通过单反引号前后包围。

链接

不现实为特定文字的链接： <https://www.bilibili.com>将显示为 https://www.bilibili.com

显示为特定文字的链接： [Bilibili](https://www.bilibili.com)将显示为 Bilibili

图片

与显示为特定文字的链接相似，只是在之前加上一个叹号!，其后更改为图片的地址。既可以是网络地址，也可以是计算机上的绝对路径，也可以是相对于.md 文件的相对路径。

插入图片是 Markdown 的一大揪心之处，一般通过 “图床” 来实现，详见后文。

公式

Markdown 中的数学输入和 LaTeX 其实很像

偷懒放个别的文章：Markdown 公式指导手册

（视编写环境而定，可能语法和功能上有些出入）

简要提一下我从 Unicode Math 转到 LaTeX 的心得：大部分地方还是相同的，只是要更加注意用{}来对不同的元素进行组合，公式要有首尾的标记，以及不能够再直接/然后敲空格来输入分数了……

分割线

在一行输入三个及以上的*或-都可以起到分割的作用，哪怕它们之间有空格。

表格

| 姓名 | 性别 |   年龄 |
| :--: | :--- | -----: |
| 张三 | 未知 | 约30岁 |
| 李四 | 男   | 约20岁 |

将显示为

姓名	性别	年龄
法外狂徒・张三	未知	约 30 岁
李四	男	20 岁左右

通过|来划分每一列，而构成表格的要素则是第二行的一串符号（这一行代码是必须的）。其实很直观很好理解，:-:代表居中，:-代表左对齐，-:代表右对齐，从这个示例表格的样式里也可以观察出来。

列表

使用-开启无序列表，注意必须要有这个空格使用1.，即数字加英文句点和空格来开启有序列表，空格也是必须的

怎样存图片

这个问题相当复杂，也很重要，关于图床的话题单独写一篇文章吧。（希望我能尽快填坑）

Remark：“图床” 的英文并非是 "Figure Bed"，也跟 "bed" 没有关系 Remark：此前提到的 Markdown Preview Enhanced 插件支持 imgur，SM.MS，七牛这几款图床

其他参考文档

这些文档都很有价值，可以一看（每次上网搜文档都极其感激博主们）

在 Markdown 语言中，如何实现段首空格的显示？
PicGo + GitHub 图床，让 Markdown 飞
Markdown 语法说明 (简体中文版)
我的 gitee 图床，自动上传、压缩、获取图片 url（真的很羡慕，我试了，没成功，还是再多多学习下吧）
Gitee 图床 + PicGo + Typora 便捷在博客中使用图片
Cmd Markdown 公式指导手册
markdown 中公式编辑教程