在 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 中使用特定格式来调整图片大小:
![img.png](assets/xxx.png#w60)
编辑器体验优化
为了优化在 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 文档多平台一键发布,但目前使用体验较差。