MD Preview Bridge
在浏览器全屏预览/编辑 Markdown，与 VSCode 双向实时同步——摆脱 IDE 侧边预览的空间局促。
✨ 为什么用它
VSCode 自带的 Markdown 预览有个痛点：跟编辑器分屏共用一个窗口，屏幕上还有资源管理器、终端、Copilot 面板……真正给预览的空间很小。
MD Preview Bridge 把预览搬到系统浏览器（可全屏 / 可拖到副屏），同时保持与 VSCode 的双向实时同步——你在哪边改都可以，另一边立刻更新。
🚀 功能
- 🌐 一键在浏览器打开 当前 Markdown（编辑器右上角图标 / 状态栏 / 命令面板 三种入口）
- 🔗 双向实时同步
- VSCode 保存 / 外部工具修改磁盘 → 浏览器自动刷新
- 浏览器编辑 +
Cmd+S → 直接写回原文件（VSCode 自动 reload）
- 🛡️ 冲突检测：磁盘 mtime 比对 + VSCode dirty 检查，绝不静默覆盖未合并修改
- 📎 自动跟随：VSCode 里切 md tab / 关闭 tab / 外部删除，浏览器同步响应
- 🎨 完整 Markdown 体验：GFM（表格、任务列表、删除线）+ 代码高亮 + 三种预览模式（编辑 / 双栏 / 预览）
- 🖱️ 双栏可拖拽调节 两栏宽度，比例记忆到 localStorage
- ⚙️ 端口可配置（默认
5179）
📦 安装
方式 A：从 VSIX 安装
- 下载
md-preview-bridge-0.1.0.vsix
Cmd+Shift+P → Install from VSIX... → 选择该文件
方式 B：命令行
code --install-extension md-preview-bridge-0.1.0.vsix
🎯 使用
- VSCode 里打开任意
.md 文件
- 触发命令（三选一）：
- 编辑器右上角 🌐 图标
- 底部状态栏
$(globe) MD Preview: 未启动
Cmd+Shift+P → MD Preview: 在浏览器打开当前 Markdown
- 浏览器全屏窗口自动打开，与 VSCode 实时联动
⚙️ 配置
| 配置项 |
类型 |
默认 |
说明 |
mdPreviewBridge.port |
number |
5179 |
本地 HTTP / WebSocket 端口 |
🧩 命令
| 命令 |
说明 |
MD Preview: 在浏览器打开当前 Markdown |
启动服务并用默认浏览器打开当前 md |
MD Preview: 停止桥接服务 |
停止本地 HTTP / WebSocket 服务 |
🧠 冲突策略
浏览器保存前会自动校验：
- 磁盘 mtime 比对：若磁盘已被外部修改 → 拒绝并推送最新内容，避免覆盖
- VSCode dirty 检查：若 VSCode 里同一文档有未保存修改 → 拒绝，要求先在 VSCode 里保存或撤销
两种情况都不会静默覆盖，避免数据丢失。
📡 WebSocket 消息协议（供二次开发参考）
服务端 → 客户端
| type | 说明 |
| --- | --- |
| file:open | 新文件被跟踪，附完整内容 + mtime |
| file:external-change | 磁盘被外部改动（VSCode 保存 / git / 其它编辑器） |
| file:saved | 服务端确认前端保存已落盘 |
| file:closed | 当前文件被关闭 / 删除 |
| error | 服务端错误 |
客户端 → 服务端
| type | 说明 |
| --- | --- |
| client:ready | 页面就绪，请求当前活动文件 |
| file:request-current | 显式重新请求一次当前文件 |
| file:save | 保存前端内容到磁盘 |
🔧 从源码构建
# 1. 前端产物
cd md-preview
npm install
npm run build
# 2. 插件
cd vscode-extension
npm install
npm run build
# 3. 打包 .vsix
mkdir -p web && cp -r ../dist/* web/
npx @vscode/vsce package --allow-missing-repository --skip-license
📄 License
MIT © 2026 pennhwan
🗂 更新日志
参见 CHANGELOG.md
| |
