VSCode 内置 Markdown 预览(Ctrl+Shift+V)不支持 LaTeX 和 Mermaid,因其基于精简版 markdown-it 且不加载第三方扩展;需安装 Markdown Preview Enhanced 并用 Ctrl+K M 调用增强预览,方可正确渲染公式与流程图。

Markdown Preview 默认不支持 LaTeX 和 Mermaid
VSCode 自带的 Markdown Preview(快捷键 Ctrl+Shift+V)只渲染基础 Markdown,遇到 $$...$$ 或 ```mermaid 块会原样显示,不报错也不渲染——这是最常被误以为“插件没装好”的地方。
根本原因是:VSCode 内置预览器基于 VS Code 自研的 markdown-it 渲染器,未启用数学公式和流程图扩展插件,也**不加载第三方语法支持**。
- 不是插件装错了,是默认预览器压根不处理这些语法
- 即使装了
Markdown All in One或Markdown Preview Enhanced,它们提供的预览功能是独立命令,不会覆盖Ctrl+Shift+V - 想用公式/流程图,必须显式调用支持它们的预览命令,而不是依赖内置快捷键
装 Markdown Preview Enhanced 是最直接的解法
它把公式、流程图、PlantUML、导出 PDF 等全打包进一个预览器,且对中文路径、本地图片引用兼容性好,比零散组合插件更省心。
安装后别急着按 Ctrl+Shift+V,先用快捷键 Ctrl+K M(Windows/Linux)或 Cmd+K M(macOS)唤出增强预览——这是它的专属入口。
- LaTeX 公式需用
$$...$$或\[...\]包裹,行内用$...$;不用额外配置 MathJax - Mermaid 流程图写法必须是
```mermaid+ 换行 + 内容 +```,顶格写,不能缩进 - 首次预览时会自动下载 Mermaid.js 和 KaTeX,若网络慢,可手动在设置里填入国内 CDN 地址:
markdown-preview-enhanced.mathJaxUrl和markdown-preview-enhanced.mermaidJsUrl
Markdown All in One + Math Extension 组合容易踩坑
这个组合看似轻量,但实际协作中容易出问题:公式能渲染,Mermaid 却大概率不显示,因为 Math Extension 只管 LaTeX,而 Mermaid 依赖 VSCode 的 WebView 加载机制,需要额外注入脚本。
常见错误现象:```mermaid 块显示为空白,控制台报 ReferenceError: mermaid is not defined。
- 必须手动在用户设置中开启
markdown.extension.kaTex.enabled和markdown.extension.mermaid.enabled - Mermaid 渲染依赖
markdown.extension.mermaid.previewFrontMatter,设为false才生效(文档没说清,很多人卡在这) - 如果用了自定义 CSS(比如修改字体),可能破坏 Mermaid SVG 容器尺寸,导致图表截断——这时要检查
markdown.styles引入的 CSS 是否重置了svg或foreignObject样式
导出 PDF 时公式模糊?那是渲染引擎选错了
Markdown Preview Enhanced 导出 PDF 默认走 Puppeteer(Chromium),公式清晰;而 Markdown All in One 用的是 Electron 自带的打印 API,对 KaTeX 渲染支持差,导出后公式常变锯齿或偏移。
如果你必须用 Markdown All in One,得改用它的「导出为 HTML → 用浏览器另存为 PDF」迂回方案,否则没法保证公式质量。
- 增强预览器导出 PDF 前会自动等待 KaTeX 渲染完成,但若文档含大量公式,建议加
markdown-preview-enhanced.exportPdfTimeout(单位毫秒)避免截断 - Mermaid 图表导出 PDF 时若出现文字重叠,不是代码问题,是 Mermaid 版本太老——升级插件或手动指定
markdown-preview-enhanced.mermaidJsVersion到10.9.0+
公式和流程图的渲染链路比看着复杂:从解析器识别语法块,到前端加载 JS 库,再到 WebView 执行渲染,中间任一环缺失或版本不匹配,都会静默失败。最稳妥的做法,是只用一个主力预览插件,并关掉其他同类插件的预览功能,避免冲突。











