VSCode需装Markdown Preview Enhanced插件实现带同步滚动的实时预览,Upload Image插件配合图床配置支持一键上传替换链接,导出HTML/PDF应使用该插件内置功能以保留图表与样式。

VSCode 本身不自带实时预览,但通过插件组合 + 少量配置,能实现接近 Typora 的丝滑体验;图床上传不是必须装插件,关键在于选对工具链和避免硬编码图片路径。
怎么开启 Markdown 实时预览(带同步滚动)
VSCode 自带的 Ctrl+Shift+V(或 Cmd+Shift+V)预览是静态快照,不随编辑实时刷新,也不支持同步滚动。要真正“实时”,得用 Markdown Preview Enhanced 插件:
- 安装后,右键编辑区 →
Markdown Preview Enhanced: Open Preview to the Side,窗口会自动随光标位置同步滚动 - 默认启用数学公式(
$...$)、流程图(mermaid)、TOC 自动生成,无需额外配置 - 注意:该插件的预览服务基于本地 Node.js 进程,若提示
Cannot find module 'markdown-it',说明依赖未安装完整,可执行npm install -g markdown-it补全(推荐全局安装) - 别用
Markdown All in One的预览功能替代——它只支持基础渲染,不支持 mermaid、PlantUML 或自定义 CSS 注入
怎么把本地图片一键上传到图床并自动替换链接
手动拖拽上传 + 复制 URL + 粘贴进 Markdown,效率低还容易出错。推荐用 Upload Image 插件 + 图床服务组合:
- 安装
Upload Image后,在设置中配置图床类型(如smms、github、aliyun-oss),填入对应 token 或密钥 - 截图后按
Ctrl+Alt+U(Windows/Linux)或Cmd+Alt+U(macOS),图片自动上传,编辑器内光标处插入形如的链接 - 关键细节:上传前插件会检查文件扩展名,
.png、.jpg、.gif可直传,.webp在部分图床(如 SM.MS)会被拒绝,需提前转格式 - 别把图床配置写死在工作区设置里——不同项目可能用不同图床,建议统一放在用户设置(
settings.json)中,用"uploadImage"节点管理
怎么让导出 HTML/PDF 保留样式和图表
VSCode 自带导出功能(右键 → Export as HTML)会丢掉 mermaid 渲染、自定义字体、深色主题适配。真需求导出,应走 Markdown Preview Enhanced 的导出链路:
- 预览窗口右上角三个点 →
Export to HTML或Export to PDF,它会打包所有依赖(包括 mermaid.js、katex.css)进单文件 - PDF 导出依赖系统级
Chrome或Chromium,若报错Failed to launch chrome,需在设置中指定"markdown-preview-enhanced.chromePath"指向本地浏览器可执行文件(如/Applications/Google Chrome.app/Contents/MacOS/Google Chrome) - 导出前建议关闭「自动滚动到光标」,否则生成的 HTML 可能卡在中间位置;PDF 页面边距可通过
"markdown-preview-enhanced.pdfMarginTop"等配置微调
图床上传和预览看似是两个独立动作,实际耦合在编辑流里——上传失败时链接没替换,预览里就显示红叉;而预览不实时,又看不出上传后的图表是否正常渲染。这两个环节的错误反馈都藏在 VSCode 右下角状态栏或输出面板(Output → 切换到 Markdown Preview Enhanced 或 Upload Image),很多人直接忽略那里,结果卡半天才发现是 token 过期或网络超时。










