在已经学会了基本的Markdown语法，安装VS Code并初步熟悉了用它作为Markdown编辑器之后，今天介绍一下VS Code中涉及Markdown的各种插件，将VSCode打造成真正的Markdown编辑器。

说明一下，本全程指导的经验汇总，将会分几篇陆续推出，包含：VS Code编辑器的安装和设置技巧、VS Code的Markdown相关插件的使用，通过九牛云+图床神器PicGo插件给博客设置图床，word/pdf/电子书/网页等格式导出，VS Code写Markdown的最佳实践总结、在CSDN写博客的一些经验技巧 及 Git版本控制等部分，详细指导和讲解利用VS Code + 插件，打造 宇宙最强 Markdown编辑器的全过程。

用VSCode打造宇宙最强Markdown编辑器【插件篇】

vscode默认是支持Markdown的，但是我们还是需要一些额外的插件来辅助。下面将列出常用的一些Markdown插件，并对每个插件做详细介绍。

• 1. 超级强大的MPE插件 (Markdown Preview Enhanced)
• 2. 其它辅助编辑类插件
  • 2.1 Markdown All in One
  • 2.2 Markdown Shortcuts
  • 2.3 Markdownlint
  • 2.4 Pangu-Markdown
  • 2.5 markdown toc
  • 2.6 Markdown yaml Preamble
• 3. 其它渲染预览类插件
  • 3.1 Markdown Preview Github Styling
  • 3.2 Markdown+Math
  • 3.3 Markdown Preview Mermaid Support
• 4. 其它与 Markdown 相关的插件
  • 4.1 PicGo（图床插件）
  • 4.2 vscode-pandoc
  • 4.3 Markdown PDF
  • 4.4 其它 VS Code 插件

1. 超级强大的MPE插件 (Markdown Preview Enhanced)

https://github.com/shd101wyy/markdown-preview-enhanced

Markdown Preview Enhanced（ 以下简称 MPE ）是一款为 Atom 以及 Visual Studio Code 编辑器编写的超级强大的 Markdown 插件，通过它你可以在 VS Code 上实现飘逸的 Markdown 写作体验。MPE内部支持 mermaid, PlantUML, WaveDrom, GraphViz，Vega & Vega-lite，Ditaa 图像渲染，同时其 Code Chunk 功能支持渲染代码的运行结果，即可以通过使用 Code Chunk 来渲染 TikZ, Python Matplotlib, Plotly 等图像。

你可以通过以下链接获取线上用户使用手册。

官方用户使用手册（多语言版）： https://shd101wyy.github.io/markdown-preview-enhanced

中文版用户使用手册：https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/

安装方法： 和前文安装中文包的方法类似。打开 VS Code 编辑器, 在左侧插件市场页(Visual Studio Marketplace)搜索: markdown-preview-enhanced，找到之后，点击MPE的Install 按钮来安装这个插件。

在本文下面章节，就不再一一介绍如何安装插件了。

本文（《用VSCode打造宇宙最强Markdown编辑器》）将在后续章节中详细讲解MPE的使用方法和一些技巧。

2. 其它辅助编辑类插件

其实 Markdown 在有些方面编辑起来还是有点麻烦的，比如表格等，而 VScode 也只在编辑器的顶部导航中设置了加粗、斜体、删除线、列表等 4 个标记功能按钮。对不常写Markdown的人可能一个语法记不清楚就会耽误不少时间，目前的编辑界面无法获得更好的文档编辑体验。这时就需要辅助编辑插件了，它们主要是通过快捷键或者鼠标右键菜单快速插入或者生成 markdown 标记，或对语法规范进行检查等，以快速生成语法或方便文档的便携。

2.1 Markdown All in One

https://github.com/yzhang-gh/vscode-markdown

Markdown All in One是一个组合包，直接集成了撰写 Markdown 所需的大部分功能（键盘快捷方式，目录，自动预览等），对于编辑markdown文档的日常使用已经足够，是VSCode 中下载量最大的 Markdown 预览类插件，而且其兼容性较好，需要配置的选项不多，基本上默认就很好。需要注意的是它和 Markdown Shortcuts 的快捷键设置有些冲突，需要手工调整一下即可。

对于不常编辑Markdown文档的人来说，只下载这一个全家桶就能基本满足需求，确实是一个不错的选择。但是它的渲染功能和效果与MPE比较的话还是稍有不足，所以我更推荐用 MPE + Markdown Shortcuts 的组合。

2.2 Markdown Shortcuts

https://github.com/mdickin/vscode-markdown-shortcuts

Markdown Shortcuts是一款高效的快捷键插件，支持通过快捷键和鼠标右键菜单快速生成 Markdown 标记。它基本覆盖了标准 Markdown 的所有标记符，使用起来非常方便，尤其是快速生成表格标记方面。而且，我们也可以通过它来按照自己的使用习惯自行定义和修改快捷键。

Markdown Shortcuts中的缺省快捷键配置：

Name	Description	Default key binding
md-shortcut.showCommandPalette	Display all commands	ctrl+M ctrl+M
md-shortcut.toggleBold	Make **bold**	ctrl+B
md-shortcut.toggleItalic	Make _italic_	ctrl+I
md-shortcut.toggleStrikethrough	Make strikethrough
md-shortcut.toggleLink	Make [a hyperlink](www.example.org)	ctrl+L
md-shortcut.toggleImage	Make an image 	ctrl+shift+L
md-shortcut.toggleCodeBlock	Make ```a code block```	ctrl+M ctrl+C
md-shortcut.toggleInlineCode	Make `inline code`	ctrl+M ctrl+I
md-shortcut.toggleBullets	Make * bullet point	ctrl+M ctrl+B
md-shortcut.toggleNumbers	Make 1. numbered list	ctrl+M ctrl+1
md-shortcut.toggleCheckboxes	Make - [ ] check list (Github flavored markdown)	ctrl+M ctrl+X
md-shortcut.toggleTitleH1	Toggle # H1 title
md-shortcut.toggleTitleH2	Toggle ## H2 title
md-shortcut.toggleTitleH3	Toggle ### H3 title

2.3 Markdownlint

https://github.com/DavidAnson/markdownlint

markdown书写时肯定会有这样的问题。何来约束markdown的书写规范呢？Markdownlint 是 VSCode 中下载最多的Markdown 插件。使用markdown lint插件时，当你在vscode中书写markdown文本时,不符合规范的内容就会有黄色波浪线来提示你及时修正，甚至选择让它把你自动修订。如果你对提示的规则代码和描述还不是很清楚，想仔细查看一下规则提示信息的详细解释，请参见下面这个帖子：

vscode markdownlint插件让你的markdown更加规范 – Rules规则提示信息

2.4 Pangu-Markdown

https://github.com/xlthu/pangu-markdown

是检查中英文混排效果是否符合通用使用习惯的插件。详细功能细节如下：

• Add whitespace between Chinese and English
• Add whitespace between Chinese and [ ]
• , \ . : ; ? ! after Chinese characters to ，、。：；？！
• () around Chinese characters to （）
• [] <> ` remains untouched
• Continuous 。(at least 3) to …, e.g. 。 to …
• Truncate more than three continuous ？ ！ to only three ones.
• Truncate continuous 。，；：、“”『』〖〗《》 to only one.

2.5 markdown toc

这个插件是用来生成目录的，MPE中已包含了类似功能。(弃坑)

2.6 Markdown yaml Preamble

Adds support for rendering the yaml frontmatter as a table. Be sure to set “markdown.previewFrontMatter”: “show”。在MPE中已包含了类似功能。(弃坑)

3. 其它渲染预览类插件

其实，前面介绍的 MPE(Markdown Preview Enhanced) 和 Markdown All in One 这两个具备多用途插件也都主要是 Markdown 的预览功能，这里也介绍几个比较流行的预览插件，以及几个专用领域的渲染插件。

3.1 Markdown Preview Github Styling

这是Github使用的Markdown渲染样式，不是特别华丽，很朴素，很简洁的样式，因为很多人用Markdown都是为了使用Github Pages，所以这个样式特别受欢迎。使用这个样式，在本地就能预览Markdown文件最终在Github Pages中显示的效果。如果你也有在用Github, 建议安装。

3.2 Markdown+Math

Markdown+Math 是一个强大的数学渲染工具，基本不需要做什么配置。如果已经安装了 MPE 或者 Markdown All in One，使用时需要做一些配置，将原有的Math功能取消掉，用这个来替换。目前MPE插件中已经包含Math功能，满足基本需求，暂时应该用不上。

3.3 Markdown Preview Mermaid Support

支持 Mermaid 的渲染引擎，让 VS Code 的 Markdown 预览能够正确渲染 Mermaid 图。可以通过它来用 Markdown 绘制流程图、时序图或甘特图，非常方便。但MPE插件中已经包含这个插件的功能，所以没有安装。

4. 其它与 Markdown 相关的插件

4.1 PicGo（图床插件）

https://github.com/PicGo/vs-picgo

如果是要用Markdown来写博客，这个神器是一定要安装的。图床这个话题在后续章节里详细讲解，这里不再废话了。

4.2 vscode-pandoc

将Markdown 转 PDF、Word、电子书等格式的插件，尤其是转成 Word 是很多人的刚需。这个插件能将 Markdown 转换成各种格式。但是，MPE已经集成了pandoc,并且有更多的集成插件实现更方便、效果更好的转换。所以如果使用MPE,则没太大必要再装这个了。

4.3 Markdown PDF

markdown是不支持pdf输出，需要借助其他办法输出，使用该插件可以导出PDF，但其实也是在渲染。但是它渲染和导出的效果与 MPE 或 Markdown All in One 相比并不好，因此弃坑。

4.4 其它 VS Code 插件

还有很多VSCode中号称神器的插件，比如为代码中的各种结对的括号等提供颜色高亮等功能的 Bracket Pair Colorizer，基于人工智能的代码自动补全工具TabNine，TabNine在自动补全时还会给出每个候选项的概率，并按概率大小进行排序。这些插件可以根据个人使用需求来安装，此处不再详细进行描述了。

---

关于 VS Code 的Markdown插件这个话题，今天就先讲到这儿，这个系列的下一篇准备详细讲一下 强大的 Markdown 预览插件 MPE 的使用详解。