VSCode需配合Markdown All in One扩展和内置预览功能实现Markdown双向同步预览;快捷键Ctrl+Shift+V(Win/Linux)或Cmd+Shift+V(macOS)打开侧边预览,保存后才刷新,支持Mermaid、LaTeX及自定义CSS需对应扩展或配置。

VSCode 本身不内置 Markdown 实时预览功能,但通过官方扩展 Markdown All in One + 内置的 Markdown Preview(快捷键 Ctrl+Shift+V 或 Cmd+Shift+V),就能实现开箱即用的双向同步预览——无需插件冲突、不用配置服务器。
怎么快速打开 Markdown 预览窗格
确保当前打开的是 .md 文件,然后:
- 按
Ctrl+Shift+V(Windows/Linux)或Cmd+Shift+V(macOS),右侧会立即弹出预览窗格 - 右键编辑器标签页 → 选择
Open Preview to the Side - 命令面板(
Ctrl+Shift+P)输入Markdown: Open Preview to the Side并回车
注意:预览默认不自动刷新。修改内容后需手动保存(Ctrl+S)才会更新——这是 VSCode 的设计,不是 bug。
为什么改了文字预览没变
常见原因就两个:
- 文件未保存:VSCode 的预览基于磁盘文件,只响应保存后的变更,非实时监听编辑缓冲区
- 预览窗格被意外关闭或切换:关掉再重开一次即可,别依赖“刷新按钮”(它只重载 HTML,不读新内容)
想保存即更新?装 Markdown All in One 后,在设置里搜 markdown.preview.autoShowPreviewToSide 开启,再配合 files.autoSave 设为 afterDelay,体验接近“实时”。
如何让预览支持 Mermaid / LaTeX / 自定义 CSS
原生预览只渲染标准 Markdown。要支持图表和公式,得靠扩展协作:
-
Mermaid图表:装Mermaid Preview扩展,它会接管预览逻辑;或用Markdown All in One+mermaid-cli本地渲染(需 Node.js) - LaTeX 公式:启用
Markdown All in One的markdown.extension.math.enabled设置,写$$E = mc^2$$就能渲染 - 自定义样式:在工作区根目录建
.vscode/settings.json,加字段"markdown.preview.styles": ["./styles.css"],路径必须是相对工作区的
别直接改 VSCode 源码里的 CSS——升级后全丢。
预览里点击标题为啥不跳转到对应位置
因为默认生成的锚点名含空格和标点(如 #我的-第一级标题),而 VSCode 预览对中文/特殊字符处理保守。解决方法:
- 用
Markdown All in One→ 它默认启用githubCompatibilityMode,把标题转成 GitHub 风格锚点(兼容中文) - 手动加 ID:写
### A节,再用[跳转](#section-a) - 禁用「大纲视图」依赖的
markdown.extension.toc.omitHeadingLevel错误配置,否则 TOC 生成错乱也会影响跳转
最稳的路径是:装 Markdown All in One + 开启 markdown.extension.aliases.enabled,它连别名跳转都管。










