Rock Markdown Editor
在 VS Code 中直接编辑、渲染和管理 Markdown，兼顾可视化编辑与源码分屏体验。
安装 ·
使用 ·
配置 ·
开发
简介
Rock Markdown Editor 是一个基于 Vditor 的 VS Code Markdown 编辑器。它在 Webview 中提供丰富的可视化编辑能力，同时始终以 VS Code TextDocument 作为文档数据源，因此文件保存、撤销、自动保存和外部修改仍由 VS Code 管理。
适合以下场景：
- 编写包含表格、任务列表、公式和图表的技术文档；
- 希望边写边看效果，但仍保留随时编辑原始 Markdown 的能力；
- 需要跟随 VS Code 主题、资源上传和本地链接支持；
- 在中文输入法、自动保存或外部工具同时修改文件时保持稳定编辑。
核心功能
两种编辑模式
| 模式 |
说明 |
| 可视化编辑（WYSIWYG） |
默认模式，以接近最终排版的方式直接编辑文档。 |
| 源码分屏（Split View） |
左侧编辑 Markdown 源码，右侧同步预览，并支持双向滚动联动。 |
VS Code 中只注册一个 Rock Markdown Editor。请使用编辑器顶部工具栏右侧的“编辑模式”按钮，在可视化编辑和源码分屏之间切换；插件会记住最后选择的模式。
Markdown 与写作能力
- 标题、粗体、斜体、删除线、引用、分隔线和代码；
- 无序列表、有序列表、任务列表及列表缩进；
- 表格插入，以及行、列、对齐和删除等右键操作；
- 图片、音频、本地文件链接和可折叠
<details> 内容；
- KaTeX 数学公式，仅支持
$...$ 和 $$...$$；
- 普通代码块点击内容即可原位编辑并实时高亮，顶部语言标识可直接输入修改，Enter 或离开字段完成编辑，Escape 恢复原语言；支持 Bash、sh、shell 离线高亮；
- YAML Front Matter 在可视化编辑和分屏预览中支持表格、代码块或隐藏显示；
- Alerts 在可视化编辑和分屏预览中支持五种 GitHub 类型，并额外支持 Question；
- Mermaid、Graphviz、ECharts 和 abc.js 等 Vditor 扩展语法；
- 一键复制原始 Markdown 或渲染后的 HTML。
编辑辅助
- 文档目录；
- 上下移动当前段落、列表项及子项、代码块、表格或完整折叠区；
- 使用 VS Code 内置 Webview 查找；
- 公式块和行内公式快捷插入；
- 长文档滚动位置恢复；
- 中、英、日、韩界面文本适配，缺失文本自动回退到英文。
稳定的文档同步
- 连续输入会合并后同步，减少大型文档的写入压力；
- 只向 VS Code 文档应用最小文本变更，不在每次输入时替换整篇文件；
- 保存、失焦、页面隐藏和输入法提交时会立即同步；
- 输入法组合期间不会用未完成的候选文本覆盖文档；
- 外部修改与当前编辑互不冲突时会自动三方合并；
- 修改范围重叠时会暂停同步，并让用户选择保留编辑器内容或外部内容。
媒体与链接安全
粘贴、拖放或选择媒体后，文件会保存到配置的资源目录并自动插入 Markdown。当前支持：
- 图片：PNG、JPEG、GIF、WebP；
- 音频：WAV、MP3、Ogg；
- 单次最多 20 个文件；
- 默认单文件上限为 10 MB，可配置为 1 至 100 MB。
扩展宿主会校验 Base64 数据、实际文件签名、MIME、扩展名、大小和目标路径。文档链接只允许安全的外部协议以及本地文件路径；远程 HTTPS 媒体也可以通过设置完全关闭。
安装
从 GitHub Releases 安装
- 打开项目的 Releases 页面并下载最新的
.vsix 文件。
- 在 VS Code 中打开命令面板。
- 运行 Extensions: Install from VSIX...。
- 选择下载的文件并按提示完成安装。
仓库每次推送到 main 后都会自动构建 continuous 版本，可用于获取最新改动。
从源码运行
需要 Node.js 20 或更高版本，以及 pnpm。
pnpm install
pnpm build
构建完成后，在 VS Code 中按 F5 启动 Extension Development Host。
使用
打开 .md 或 .markdown 文件后，可通过以下任一方式进入 Rock Markdown Editor：
- 在命令面板运行 Rock Markdown Editor: Open with Rock Markdown Editor；
- 在资源管理器中右键 Markdown 文件并选择 Open with Rock Markdown Editor；
- 在 Markdown 编辑器标签页的右键菜单中选择同名命令；
- 选择 Open With... → Rock Markdown Editor；
- 在 Configure Default Editor... 中将其设为 Markdown 默认编辑器；
- Windows / Linux 按
Ctrl+Shift+Alt+M，macOS 按 Cmd+Shift+Alt+M。
常用快捷键
| 操作 |
Windows / Linux |
macOS |
| 打开 Rock Markdown Editor |
Ctrl+Shift+Alt+M |
Cmd+Shift+Alt+M |
| 保存 |
Ctrl+S |
Cmd+S |
| 查找 |
Ctrl+F |
Cmd+F |
| 下一个 / 上一个结果 |
Enter / Shift+Enter |
Enter / Shift+Enter |
| 列表缩进 / 减少缩进 |
Tab / Shift+Tab |
Tab / Shift+Tab |
| 上移 / 下移当前结构 |
Alt+↑ / Alt+↓ |
Option+↑ / Option+↓ |
| 切换 Tab 是否移动焦点 |
Ctrl+M |
Cmd+M |
在列表和表格之外，Tab 默认不会移出编辑器。按 Ctrl+M（macOS 为 Cmd+M）可让 Tab
恢复为普通的焦点切换键，再按一次即可恢复结构化缩进行为。这与 VS Code 自身的
"Toggle Tab Key Moves Focus" 使用同一快捷键。
配置
在 VS Code 设置中搜索 Rock Markdown Editor，或直接配置以下项目：
| 设置 |
默认值 |
说明 |
markdown-interactor.imageSaveFolder |
assets |
上传文件保存目录。相对路径以当前 Markdown 文件所在目录为基准。 |
markdown-interactor.maxUploadSizeMB |
10 |
每个上传文件的大小上限，允许范围为 1 至 100 MB。 |
markdown-interactor.allowRemoteMedia |
true |
是否允许加载 Markdown 中的 HTTPS 图片和媒体。 |
markdown-interactor.frontMatterDisplay |
table |
Front Matter 的可视化显示方式：表格、代码块或隐藏。 |
markdown-interactor.toolbarShortcuts |
见下文 |
为顶部功能区操作配置单段快捷键，并阻止事件穿透到 VS Code。 |
关闭 allowRemoteMedia 只会阻止文档里引用的远程图片、视频和音频，不会阻止远程字体、
样式表和脚本，编辑器自身需要加载后者。
imageSaveFolder 支持以下变量：
| 变量 |
含义 |
${projectRoot} |
当前文件所属工作区的根目录 |
${file} |
当前 Markdown 文件的完整路径 |
${fileBasenameNoExtension} |
不含扩展名的当前文件名 |
${dir} |
当前 Markdown 文件所在目录 |
例如，将资源统一保存到工作区根目录的 assets 文件夹：，将资源统一保存到工作区根目录的，将资源统一保存到工作区根目录的，将资源统一保存到工作区根目录的，将资源统一保存到工作区根目录的，将资源统一保存到工作区根目录的，将资源统一保存到工作区根目录的，将资源统一保存到工作区根目录的作区根
{
"markdown-interactor.imageSaveFolder": "${projectRoot}/assets"
}
toolbarShortcuts 使用工具栏操作 ID 作为键。Mod 在 Windows/Linux 表示 Ctrl，在 macOS 表示 Cmd；空字符串可禁用某项快捷键。修改后会立即应用到已打开的编辑器：
{
"markdown-interactor.toolbarShortcuts": {
"bold": "Mod+B",
"math-inline": "Mod+Alt+M",
"vmd-mode-sv": "Mod+Alt+9"
}
}
剪切、复制、粘贴、全选、撤销、重做、查找和切换 Tab 焦点等基础编辑快捷键不会被工具栏配置覆盖。若配置项无效、使用未知操作 ID 或与其他工具栏操作冲突，插件会显示警告且不执行冲突项。
可视化模式下，行内代码、代码块、行内公式和行间公式按钮会打开内容弹窗，有选中文字时自动预填。关闭、按 Escape 或点击外部时，有正文就插入；正文为空（包括代码块仅填写语言）则取消并保留原选中文字和格式。单行输入按 Enter 完成，多行输入按 Ctrl+Enter（macOS 为 Cmd+Enter）完成，保存快捷键也会提交弹窗内容。
新建弹窗在输入框下方实时预览代码和公式，代码语言变更会更新高亮；清空内容会移除预览，取消不改动正文。
选中多行正文后按 Ctrl+Alt+C（macOS 为 Cmd+Alt+C）或点击代码块按钮，弹窗会保留选区换行，完成后生成代码块。普通选区复制只复制可见文本；工具栏的复制 Markdown / HTML 操作仍提供对应格式。
结构移动只交换同级相邻单元，列表项会带着子项移动，跨多个结构的选区不执行批量移动。代码块内也可使用移动快捷键；可通过 move-up、move-down 操作 ID 修改键位。
链接弹窗提供打开、复制和关闭操作。选中文本后新建链接，地址为空或只有空白时关闭弹窗，会恢复原文字及格式；没有选区时默认文字为“链接”，取消空地址插入时一并移除。打开链接复用 Ctrl/Cmd+点击的主机通道。
主题
编辑器跟随 VS Code 的亮暗模式，正文使用 Things 配色与系统字体栈，行内代码与正文等大；工具栏和弹窗与宿主主题协调。Mermaid 流程图和时序图随亮暗模式重新渲染，图表源码中显式指定的颜色仍生效。不提供额外主题设置或工作区 CSS 入口。
开发
安装依赖并构建：
pnpm install
pnpm build
开发时监听源码变化：
pnpm watch
GitHub Actions 会在代码推送到 main 后自动构建并打包 VSIX，无需在本地维护额外的发布命令。
主要源码目录：
| 路径 |
作用 |
src/ |
VS Code Extension Host、文档同步、上传和链接处理 |
media-src/src/ |
Webview、Vditor、工具栏和交互逻辑 |
scripts/ |
构建脚本 |
00-docs/ |
本地测试、开发记录和临时产物（不纳入版本控制） |
测试脚本位于 00-docs/tests/，测试文档位于 00-docs/md-test/，临时复现文件和测试截图位于 00-docs/.tmp-repro/。本机保留这些测试文件时，仍可运行 pnpm test；新克隆的仓库不包含测试套件。
更多版本变化见 CHANGELOG.md。问题与建议请提交到 GitHub Issues。
致谢
Rock Markdown Editor 基于 zaaack/vscode-markdown-editor 演进，并由 Vditor 提供 Markdown 编辑与渲染能力。
编辑器配色参考由 Colin Eckert（@colineckert）创建的 Obsidian Things 主题，并针对 VS Code 编辑器进行了适配。该主题采用 MIT 许可证，原始版权声明及许可全文见 第三方许可说明。
许可证
本项目基于 MIT License 开源。
支持作者
如果这个插件对你有帮助，欢迎通过支付宝自愿打赏，支持后续维护。
