Rock Markdown Editor

在 VS Code 中直接编辑、渲染和管理 Markdown，兼顾可视化编辑与源码分屏体验。

安装 · 使用 · 配置 · 开发

简介

Rock Markdown Editor 是一个基于 Vditor 的 VS Code Markdown 编辑器。它在 Webview 中提供丰富的可视化编辑能力，同时始终以 VS Code TextDocument 作为文档数据源，因此文件保存、撤销、自动保存和外部修改仍由 VS Code 管理。

公开发布仓库 用于项目介绍、问题反馈和版本下载。开发历史保存在私有仓库，发布版本的源码以 ZIP 附件提供。

适合以下场景：

• 编写包含表格、任务列表、公式和图表的技术文档；
• 希望边写边看效果，但仍保留随时编辑原始 Markdown 的能力；
• 需要跟随 VS Code 主题、资源上传和本地链接支持；
• 在中文输入法、自动保存或外部工具同时修改文件时保持稳定编辑。

核心功能

两种编辑模式

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。

编辑辅助

• 文档目录：拖动目录与正文之间的分隔线调整宽度，双击恢复默认；同一编辑器会话记住宽度，也支持聚焦分隔线后用左右方向键调整、Enter 复位；
• 上下移动当前段落、列表项及子项、代码块、表格或完整折叠区；
• 使用 VS Code 内置 Webview 查找；
• 公式块和行内公式快捷插入；
• 长文档滚动位置恢复；
• 中、英、日、韩界面文本适配，缺失文本自动回退到英文。

稳定的文档同步

• 连续输入会合并后同步，减少大型文档的写入压力；
• 只向 VS Code 文档应用最小文本变更，不在每次输入时替换整篇文件；
• 保存、失焦、页面隐藏和输入法提交时会立即同步；
• 输入法组合期间不会用未完成的候选文本覆盖文档；
• 外部修改与当前编辑互不冲突时会自动三方合并；
• 修改范围重叠时会暂停同步，并让用户选择保留编辑器内容或外部内容。

媒体与链接安全

粘贴、拖放或选择媒体后，文件会保存到配置的资源目录并自动插入 Markdown。当前支持：

• 图片：PNG、JPEG、GIF、WebP；
• 音频：WAV、MP3、Ogg；
• 单次最多 20 个文件；
• 默认单文件上限为 10 MB，可配置为 1 至 100 MB。

扩展宿主会校验 Base64 数据、实际文件签名、MIME、扩展名、大小和目标路径。文档链接只允许安全的外部协议以及本地文件路径；远程 HTTPS 媒体也可以通过设置完全关闭。

本地图片支持相对路径、Windows 绝对路径（如 C:/Pictures/plot.png）和 file:/// 地址。可视模式、分屏预览和图片查看器会加载对应文件，保存时保留原始图片路径。

可视模式下点击 Markdown 图片会显示缩放控制点：拖动角点等比缩放，拖动边缘独立调整宽高，宽度限制在 48 像素至正文可用宽度之间。图片弹窗的“恢复原始尺寸”按钮可清除调整记录。选中图片时支持 Ctrl/Cmd+Z 撤销尺寸调整、Ctrl+Y 或 Ctrl/Cmd+Shift+Z 重做；Escape 取消当前拖动。

本地图片尺寸保存在图片所在文件夹的 .image-sizes.json 中，按 Markdown 相对路径、图片文件名及同图出现次序分别记录。同一附件在不同文档中可以使用不同尺寸；关闭重开时从文件读取。拖动结束写入记录，恢复原始尺寸仅删除当前引用的记录，不修改 Markdown 或图片文件。远程图片没有本地附件目录，仍使用 VS Code 本机存储。HTML 图片不参与缩放。

窗口变窄时临时按比例缩小，变宽后恢复记录的尺寸。将文档、附件和尺寸文件一起移动且相对位置不变，可保留尺寸；单独重命名文档、图片或调整同图次序后，原记录可能不再对应。尺寸文件随附件复制或同步时，显示尺寸也会随之转移。图片弹窗的复制、关闭和恢复按钮统一为 24×24 像素。

安装

从 GitHub Releases 安装

1. 打开项目的 Releases 页面并下载最新的 .vsix 文件。
2. 在 VS Code 中打开命令面板。
3. 运行 Extensions: Install from VSIX...。
4. 选择下载的文件并按提示完成安装。

公开下载以 Releases 中上传的安装包为准，私有仓库的开发提交不会自动发布到此处。

从源码运行

从 Releases 下载手动上传的 rock-markdown-editor-source.zip 源码附件，解压后在 VS Code 中打开。GitHub 自动生成的 “Source code” 压缩包只包含公开发布仓库的文件，不是完整插件源码。

需要 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。

常用快捷键

在列表和表格之外，Tab 默认不会移出编辑器。按 Ctrl+M（macOS 为 Cmd+M）可让 Tab 恢复为普通的焦点切换键，再按一次即可恢复结构化缩进行为。这与 VS Code 自身的 "Toggle Tab Key Moves Focus" 使用同一快捷键。

配置

在 VS Code 设置中搜索 Rock Markdown Editor，或直接配置以下项目：

关闭 autoFormatWhitespace 后，编辑、插入 Alert、切换模式及保存重开会保留原文空白；正文块之间的额外空行会保留为显示间距。可在源码分屏中增删这些空行。更多菜单中的“规范化格式”仍会显式整理整篇文档。

Alert 按钮默认创建空 TIP，光标进入正文；选中已有内容时将其转换为 TIP。清空正文、切换类型及保存重开均保留当前类型，光标在空 Alert 内再次按 Backspace 或 Delete 才会移除区域。没有有效编辑器选区时，新区域插在文档末尾。

关闭 allowRemoteMedia 只会阻止文档里引用的远程图片、视频和音频，不会阻止远程字体、 样式表和脚本，编辑器自身需要加载后者。

imageSaveFolder 支持以下变量：

例如，将资源统一保存到工作区根目录的 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 或与其他工具栏操作冲突，插件会显示警告且不执行冲突项。

长按 Ctrl+V（macOS 为 Cmd+V）只粘贴一次，松开 V 后再次按下可继续粘贴。粘贴文字、富文本、代码或网址时会替换当前选区；没有选区时在光标处插入。

可视化模式下，行内代码、行内公式和行间公式按钮会打开内容弹窗，有选中文字时自动预填，并在文档插入位置实时显示。关闭、按 Escape 或点击外部时，有正文就保留插入结果；正文为空则移除临时内容，恢复原选中文字及格式。单行输入按 Enter 完成，多行输入按 Ctrl+Enter（macOS 为 Cmd+Enter）完成，保存快捷键也会提交当前内容，完成插入后可一次撤销。

编辑弹窗只显示输入字段，公式、图表等渲染结果在文档中实时更新。行间公式、图表、HTML 块、Front Matter 和折叠区域的多行编辑弹窗可通过顶部标题栏在整个插件页面内拖动，聚焦标题栏后也可用方向键移动。四条边和四个角都可拖动调整大小，输入框随窗口伸缩。调整后的位置和尺寸在本次编辑期间保持，再次打开恢复默认值。行内代码和行内公式弹窗保持原有定位。

右键点击折叠区域标题，选择“编辑源码”，可编辑整个 <details>…</details> 区域，包括标题、正文及嵌套折叠内容；右键内层标题只编辑内层区域。标题旁的编辑按钮仍用于单独修改标题文字。

选中多行正文后按 Ctrl+Alt+C（macOS 为 Cmd+Alt+C）或点击代码块按钮，会保留选区换行并直接生成代码块，使用 CodeMirror 原位编辑。普通代码块不再提供源码弹窗或右键“编辑源码”选项，语言标识仍可在代码块顶部直接修改。普通选区复制只复制可见文本；工具栏的复制 Markdown / HTML 操作仍提供对应格式。

结构移动只交换同级相邻单元，列表项会带着子项移动，跨多个结构的选区不执行批量移动。代码块内也可使用移动快捷键；可通过 move-up、move-down 操作 ID 修改键位。

链接弹窗提供打开、复制和关闭操作。选中文本后新建链接，地址为空或只有空白时关闭弹窗，会恢复原文字及格式；没有选区时默认文字为“链接”，取消空地址插入时一并移除。打开链接复用 Ctrl/Cmd+点击的主机通道。

主题

编辑器跟随 VS Code 的亮暗模式，正文使用 Things 配色与系统字体栈，行内代码与正文等大；工具栏和弹窗与宿主主题协调。Mermaid 流程图和时序图随亮暗模式重新渲染，图表源码中显式指定的颜色仍生效。不提供额外主题设置或工作区 CSS 入口。

开发

安装依赖并构建：

pnpm install
pnpm build

开发时监听源码变化：

pnpm watch

维护者在私有开发仓库中使用 GitHub Actions 自动构建 VSIX；公开发布仓库通过 Releases 提供源码 ZIP 和安装包，不接收开发仓库的提交历史。

主要源码目录：

测试脚本位于 00-docs/tests/，测试文档位于 00-docs/md-test/，临时复现文件和测试截图位于 00-docs/.tmp-repro/。本机保留这些测试文件时，仍可运行 pnpm test；发布的源码 ZIP 不包含这些本地测试文件。

更多版本变化见 Releases。问题与建议请提交到 GitHub Issues。

致谢

Rock Markdown Editor 基于 zaaack/vscode-markdown-editor 演进，并由 Vditor 提供 Markdown 编辑与渲染能力。

编辑器配色参考由 Colin Eckert（@colineckert）创建的 Obsidian Things 主题，并针对 VS Code 编辑器进行了适配。该主题采用 MIT 许可证，原始版权声明及许可全文见 第三方许可说明。

许可证

本项目发布的源码采用 MIT License，第三方许可见 第三方许可说明。

支持作者

如果这个插件对你有帮助，欢迎通过支付宝自愿打赏，支持后续维护。