原生Markdown预览不支持实时联动，因仅保存后刷新且无滚动同步；MPE扩展通过WebView实现编辑/滚动同步；Mermaid需专用插件；Browser Preview调用真实Chromium调试。
为什么原生 Markdown 预览无法实时联动
VSCode 自带的 Ctrl+Shift+V 或 Cmd+Shift+V 打开的预览是静态快照，不监听文件变更事件——哪怕你开启了 markdown.preview.autoReload，它也只在保存后刷新一次，且不支持滚动同步、双击跳转、数学公式或 Mermaid 渲染。这不是设置遗漏，而是官方明确未实现的限制。
用 Markdown Preview Enhanced 实现左右分屏 + 同步滚动
真正能达成“编辑即预览、滚动即跟随”的只有 Markdown Preview Enhanced（MPE）这个扩展。它用 WebView 替代原生预览，接管 DOM 滚动与编辑器事件绑定。
- 安装后必须重启 VSCode，否则
Webview初始化失败，状态栏看不到[MPE] - 不要用拖拽方式把预览标签拖到右侧栏——必须通过命令面板执行
Markdown Preview Enhanced: Open Preview to the Side - 确保文件已保存（哪怕只是空格+保存），未写入磁盘时 MPE 不触发渲染
- 禁用
workbench.editor.enablePreview（即关闭“单击文件仅预览”模式），否则预览页可能被回收导致同步中断
Browser Preview 插件如何嵌入真实浏览器并调试
vscode-browser-preview 不是模拟器，它调用本地 Chrome/Edge 的无头模式，在编辑器内启动一个真实 Chromium 实例，支持 JS 执行、DOM 检查、网络监控和断点调试。
- 必须提前安装 Chrome 或 Edge；
browser-preview.chromeExecutable要指向可执行文件（如/Applications/Google Chrome.app/Contents/MacOS/Google Chrome） - 调试需配合
Debugger for Chrome扩展，并在.vscode/launch.json中添加"type": "browser-preview"类型配置 - 若预览空白，先检查控制台是否报
ERR_CONNECTION_REFUSED——大概率是browser-preview.startUrl指向了未运行的服务（如http://localhost:3000但 dev server 没启） - 不建议在 Remote-SSH 场景下直接用 browser-preview 访问本地 URL，应改用端口转发或设为
http://localhost:3000并确保 remote 端服务可访问
Mermaid 图表实时预览必须走专用插件
别指望 Markdown Preview Enhanced 或原生预览能正确解析 Mermaid——它们要么忽略 ```mermaid 块，要么渲染失败且无错误提示。唯一可靠的是官方维护的 Mermaid Preview 扩展。
- 安装后新建
.mmd文件即可自动启用语法高亮和右侧实时预览 - 在
.md文件中写 Mermaid 时，必须用```mermaid包裹，且确保markdown-preview-enhanced.mermaid.enabled设为false，避免两个插件冲突 - 图表超过 20 个时，MPE 的 mathjax + mermaid 双重解析会明显卡顿，建议关闭 MPE 的 mermaid 支持，只留
Mermaid Preview处理图表 - 预览窗口右上角有导出按钮，可一键生成 PNG/SVG，但导出质量受系统 DPI 和 WebView 缩放影响，高分屏用户建议设
zoomLevel为0避免模糊
多模态联动的关键不在“装得多”，而在“谁主控渲染流”。MPE 控制 Markdown，Mermaid Preview 控制图表，Browser Preview 控制 HTML 页面——三者互不替代，也不兼容混用。一旦发现预览失活、不同步或空白，第一反应不是重装插件，而是看右下角状态栏有没有对应标识，以及当前视图是否由该插件命令启动。
