Sublime搭建Markdown高效写作平台_实现实时预览与云端图床同步-sublime-PHP中文网

sublime text 的 markdown 实时预览需插件组合配置：markdownpreview 默认不监听保存事件，须配合 livereload 插件与浏览器扩展实现自动刷新；图片上传无原生支持，需手动图床或自写脚本。

sublime搭建markdown高效写作平台_实现实时预览与云端图床同步

Sublime Text 本身不支持 Markdown 实时预览，也完全不处理图片上传或图床同步——所有这些能力都得靠插件组合实现，且必须手动配置才能稳定工作。

很多人装完 MarkdownPreview 就直接点 Live Preview in Browser，结果保存后浏览器没反应。这不是插件坏了，而是它默认不监听文件变化，也不自动注入刷新脚本。

它依赖 Sublime 的 on_post_save 事件触发重生成，但该事件在 WSL 挂载路径、远程文件、外部编辑器覆盖保存等场景下根本不会触发
"enable_autoreload": true 是个过时配置项，设为 true 反而容易导致插件崩溃或浏览器卡死
所谓“Live Preview”本质是：每次保存 → 生成新 HTML → 浏览器通过 file:// 协议加载 → 需要手动刷新或依赖 LiveReload 扩展

想让浏览器在你 Ctrl+S 后自动更新，必须两端配合：Sublime 端输出可监听的 HTML + 浏览器端运行 LiveReload 客户端。

基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。

下载

先装两个插件：LiveReload（通过 Package Control）和浏览器端的 LiveReload 扩展（Chrome/Firefox 均有）

在 Sublime 中打开 Preferences → Package Settings → MarkdownPreview → Settings – User，填入：

{
  "build_action": "browser",
  "enabled_parsers": ["markdown"],
  "html_output": "preview.html",
  "enable_highlight": true
}

保存后，浏览器里点 LiveReload 图标启用监听，再按 Ctrl+Alt+M（或你绑定的快捷键）首次预览 —— 后续每次保存，HTML 文件被重写，LiveReload 自动触发页面刷新

Sublime 的插件生态里没有类似 VSCode 的 Upload Image 那样一键上传替换链接的成熟方案。你有两条路可走，但都不“自动”：

用 OmniMarkupPreviewer：它支持侧边面板渲染，图片能显示，但只读本地路径，![](./assets/diag.png) 这种相对路径必须严格匹配文件系统结构，且无法上传
手动流程：截图 → 丢进图床工具（如 PicGo）→ 复制 URL → 粘贴进 Markdown → 保存 → 刷新预览。这个链路没法在 Sublime 内闭环，因为没插件能可靠调用系统剪贴板并注入 Markdown 光标位置
若硬要自动化，得自己写 Python 脚本监听剪贴板内容（含图片二进制），调用图床 API，再用 Sublime Text 的 view.replace() 插入链接 —— 这已超出常规配置范畴，维护成本高

很多问题其实卡在最基础的环节：

.md 文件右下角状态栏必须显示 Markdown 或 Markdown (GitHub flavored)，不是 Plain Text —— 否则 MarkdownPreview 根本不响应快捷键
图片路径一律用相对路径，且以当前 .md 文件为基准；![](images/foo.png) 和 ![](./images/foo.png) 在多数 parser 下等价，但 ../ 往上跨级容易出权限错误
导出 HTML 时若含 Mermaid 或数学公式，parser 必须选 github（依赖网络）或提前配好 python-markdown + mdx_mermaid 扩展，否则公式块直接变成纯文本