如何通过VSCode进行Markdown写作与实时预览?【教程】

12次阅读

vscode内置markdown实时预览无需插件,按Ctrl+K V(Win/linux)或Cmd+K V(macOS)触发;默认不渲染数学公式和Mermaid,需在设置中启用markdown.preview.math和markdown.preview.mermaid;样式可切换内置主题或安装官方扩展复刻gitHub风格。

如何通过VSCode进行Markdown写作与实时预览?【教程】

VSCode 本身不内置 Markdown 实时预览功能,但通过启用内置的 Markdown Preview 功能或安装轻量扩展即可实现——无需额外装插件也能用,但默认快捷键和行为容易被忽略。

如何触发 Markdown 实时预览(不用装插件)

VSCode 自带 markdown.preview 命令,但不会自动打开预览窗。常见错误是右键菜单找不到“Open Preview”,其实它藏在命令面板里:

  • Ctrl+Shift+Pwindows/Linux)或 Cmd+Shift+PmacOS),输入 Markdown: Open Preview 回车
  • 或直接按快捷键 Ctrl+K V(Windows/Linux)/Cmd+K Vmacos)——注意是先按 Ctrl+K 松开,再按 V
  • 预览页默认在右侧编辑器区域打开,支持同步滚动;修改源文件后,预览会自动刷新(无需手动重载)

为什么预览不渲染数学公式或 Mermaid 图表?

VSCode 内置预览默认禁用非标准语法支持,$$...$$```mermaid 不会被解析。解决方式有两个:

  • 启用实验性支持:在设置中搜索 markdown.preview.math,勾选开启(需重启预览窗口)
  • Mermaid 需要额外配置:设置中开启 markdown.preview.mermaid,且确保 VSCode 版本 ≥ 1.86(旧版即使开启也无效)
  • 若仍不生效,检查当前文件是否确实保存为 .md 后缀,且语言模式为 Markdown(右下角状态栏确认)

如何让预览样式更接近 github 或自定义 css

VSCode 内置预览用的是简化版样式,与 GitHub 渲染差异明显。想对齐或定制,有两条路:

  • 使用 markdown.extension.previewTheme 设置切换主题(如 github-dark.css),但仅限内置几个主题
  • 真正复刻 GitHub 样式:安装扩展 Markdown Preview Github Styling(微软官方维护),启用后预览页会加载真实 GitHub CSS
  • 自定义 CSS:在用户设置中添加 markdown.preview.styles 数组,填入本地 .css 路径(如 ["./md-custom.css"]),路径需为绝对路径或工作区相对路径

最常被忽略的一点:预览窗口一旦关闭,下次必须重新触发命令——它不会随文件打开自动激活;另外,如果同时打开了多个 Markdown 文件,每个预览是独立的,切换文件不会自动切换预览内容。

text=ZqhQzanResources