VSCode原生预览不支持同步滚动,需用Markdown Preview Enhanced插件实现:通过命令面板执行“Open Preview to the Side”开启分屏,重启后生效,注意禁用冗余渲染选项以优化性能。

VSCode内置预览不支持同步滚动,必须用插件
VSCode自带的 Ctrl+K V(或 Cmd+K V)打开的预览页是独立视图,左右分屏后滚动不同步——这不是设置问题,是官方明确未实现的功能。想同步滚动,只能靠第三方插件补足。
目前唯一稳定支持该功能的是 Markdown Preview Enhanced(简称 MPE),它把预览渲染成 Webview 并接管滚动事件,而原生预览和 Markdown All in One 的预览都不行。
- 别装
Markdown Preview Mermaid Support或Simple Markdown Preview:它们只增强渲染,不处理滚动同步 - MPE 安装后需重启 VSCode 才能激活 Webview 滚动监听
- 如果已开过原生预览页,关掉再用 MPE 的命令重新打开,否则可能复用旧视图导致同步失效
用 MPE 实现左右分屏 + 同步滚动的三步操作
不是“打开两个窗口拖过去”就行,MPE 有自己的一套视图管理逻辑,必须走它的命令流。
- 先用
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS)唤出命令面板,输入并选择Markdown Preview Enhanced: Open Preview to the Side - 此时右侧出现预览,光标仍在左侧编辑区;不要手动拖拽预览标签到右侧栏,那会脱离 MPE 控制
- 保持编辑器焦点在 .md 文件上,滚动左侧,右侧会自动跟随(延迟
- 若同步中断,检查右下角状态栏是否显示
[MPE],没显示说明当前预览不是它启动的
同步滚动失效的四个高频原因
不是插件坏了,大概率是触发条件没满足。MPE 的同步基于 DOM 绑定和编辑器事件,缺一不可。
-
settings.json里禁用了"markdown-preview-enhanced.enableSyncScroll"(默认为true,但有人会关) - 文件未保存(.md 后缀但内容为空或未写入磁盘),MPE 不触发渲染
- 预览页被手动刷新(F5)或点了右上角刷新按钮,会断开事件绑定
- 开启了 VSCode 的
"workbench.editor.enablePreview"(即单击文件不常驻标签),导致预览页被回收,同步丢失
性能与兼容性要注意的点
MPE 渲染用的是本地 WebView,不是纯前端解析,所以对大文档(>5000 行)或含大量 mathjax/mermaid 的文件,首次加载慢、滚动偶有卡顿。
- Mermaid 图表超过 20 个时,建议关闭
"markdown-preview-enhanced.mermaid.enabled",改用代码块标注```mermaid显式控制 - mathjax 默认启用,但若文档无公式,可在设置中设
"markdown-preview-enhanced.mathjax.enabled": false减少初始化开销 - VSCode 1.85+ 对 WebView 的沙箱策略收紧,部分老版本 MPE(
- 不兼容 Remote-SSH 的某些旧版服务器环境(glibc 版本太低),报错通常是
Failed to load module "glib-2.0",换本地开发更稳
同步滚动本质是编辑器和 WebView 之间的消息桥接,一旦其中一端失联,就只剩单向响应。最省事的排查方式:关所有预览页 → 保存文件 → 用 MPE 命令重开 → 看状态栏有没有 [MPE] 标识。


















