在 VSCode 中编写 Markdown 的进阶指南
最新版的 Visual Studio Code 对 Markdown 的支持已显著提升，其在预览方面的体验甚至可以与 Markdown Preview Enhanced 插件相比。本文将介绍一些优化方法，帮助用户提升在 VSCode 中编写 Markdown 文档的体验。
官方使用说明：https://code.visualstudio.com/docs/languages/markdown
预览常规设置
打开 VSCode 的 markdown.preview 设置，可以看到一些设置选项，如字体、字号、行高等。
使用 CSS
VSCode中Markdown 预览实际上是一个网页，因此可以通过自定义 CSS 来优化其显示效果。
打开 markdown.styles 设置，可以添加 CSS 文件路径。支持两种文件路径：
- 相对路径。相对路径是相对于资源管理器中打开的文件夹进行解释的。如果没有打开的文件夹，则相对于 Markdown 文件的位置解释它们。
- CSS 文件的 HTTPS URL。
数学公式预览优化
打开 vscode 自带的开发者工具，可以看到所有数学公式都有 class="katex" 。
目前存在的问题是数学公式太小，于是可以在工作区本地创建 CSS 文件，内容为：
.katex {
font-size: 1.25em !important;
}
然后将该文件路径添加到 markdown.styles 设置中，即可优化公式显示效果。
我也创建了该 CSS 文件的 HTTPS URL：https://blog-static.cnblogs.com/files/blogs/825243/vscode-markdown-style.css。
图片大小调整
一种方案是使用 HTML 标签：
<img src="assets/xxx.png" style="width:80%;" />
另一种方案是通过 CSS 设置：
img{
width: 80%;
padding-left: 10%;
}
这段代码将所有图片的宽度设置为段落宽度的 80%，并向右移动 10%，从而实现居中显示。基于此，可以进一步细化设置，如下所示：
img[src*="#w100"] {
width: 100%;
}
img[src*="#w80"] {
width: 80%;
}
img[src*="#w60"] {
width: 60%;
}
img[src*="#w50"] {
width: 50%;
}
img[src*="#w30"] {
width: 30%;
}
img[src*="#w20"] {
width: 20%;
}
img[src*="#w10"] {
width: 10%;
}
此时，可以通过在 Markdown 中使用特定格式来调整图片大小：
编辑器体验优化
为了优化在 VSCode 中编写 Markdown 的体验，在用户 settings.json 中使用如下配置：
"[markdown]": {
"editor.minimap.enabled": false, // 关闭编辑器右侧的小地图以减少视觉干扰
"editor.glyphMargin": false, // 关闭字形边距以获得更简洁的编辑界面
"editor.renderWhitespace": "all" // 显示所有空白字符，方便查看和编辑空格、制表符等
}
图片粘贴
VSCode 的 Paste Image 插件和内置的 copyFiles 功能可以简化图片粘贴操作。
Paste Image 插件设置如下。此时使用 Ctrl+Shift+V 可以把剪切板上的图片保存到工作区的 assets 文件夹中，并在 md 文件中插入图片路径。
VSCode 的 markdown.copyFiles 设置如下。
此时使用 Ctrl+V 快捷键也可以保存剪切板上的图片到工作区的 assets 文件中，并在 md 文件中插入路径。区别在于：
- VSCode 内置的 copyFiles 功能还可以粘贴图片和音频文件。
Paste Image插件保存的图片可以自动生成Y-MM-DD-HH-mm-ss的文件名，而 copyFiles 功能则不行。
因此建议这两种方法配合使用。
格式化
markdownlint 插件提供了格式化 Markdown 代码功能，并会对不规范的 markdown 代码进行警告。建议在用户 settings.json 中使用如下配置
"[markdown]": {
"editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
"editor.formatOnSave": true,
},
"markdownlint.config": {
"MD012": false,
"MD018": false,
"MD024": false,
"MD025": false,
"MD033": false,
"MD036": false,
"MD041": false,
"MD045": false,
},
Pangu-Markdown 插件补充了格式化功能，如在中英字符之间插入空格。使用方法为右键点击 Pangu Format。
代码补全与快捷功能
Markdown All in One 插件可以补全 markdown 代码，包括 LaTeX 函数代码。同时也提供了一些编辑 Markdown 的快捷功能。
Better Markdown & Latex Shortcuts 插件提供了一些编辑 LaTeX 公式的快捷键。
功能拓展
Markdown Footnotes 插件让 VSCode 的 markdown 预览支持脚注功能，例如：
这是一个脚注 [^1]
[^1]: 脚注 1
Markdown Image Size 插件提供了调整图片大小的拓展语法。但是该语法应用并不普遍，因此不推荐使用。
导出 PDF 和 Word 文档
Markdown Preview Enhanced 插件支持导出为 PDF 和 Word 文档。其利用 Chrome (Puppeteer) 导出 PDF 文件使用说明为 https://www.cnblogs.com/cjyyx/p/18272365。
Markdown Preview Enhanced 插件导出的 PDF 显示效果并不好，因此我更推荐使用 Typora 软件导出。
博客写作
博客园 cnblogs 客户端 和 Zhihu On VSCode 插件都提供了比较好的博客写作体验。
Markdown Publisher For CSDN/JIANSHU/ZHIHU/JUEJIN/WECH 插件支持 Markdown 文档多平台一键发布，但目前使用体验较差。
