Yuque YMD Preview · 语雀富文本预览

在 VS Code 中实时预览语雀 Markdown（Yuque Markdown，YMD）文件，保留表格列宽、行高、背景色和单元格内的列表与段落。修改 .ymd 源文件后，侧边预览自动更新。

Preview Yuque Markdown (.ymd) in VS Code. Live preview preserves rich-text tables, column widths, cell colours, merged cells and lists. Open the preview from the editor toolbar, status bar or context menu.

这是独立开发的本地预览工具，采用 MIT 许可，不隶属于语雀。

安装和使用

1. 打开 VS Code 的扩展面板，点击右上角 …，选择 Install from VSIX…。
2. 选择 dist/ymd-preview-0.1.1.vsix，安装完成后打开 .ymd 文件。
3. 点击编辑器右上角与 Markdown 相同的预览图标，在侧边打开预览。底部状态栏也有“预览 YMD”按钮，编辑器和文件的右键菜单同样提供预览入口。

预览标签页右上角的“打开源码”图标可以回到源文件。按住 Option（Windows/Linux 为 Alt）点击源码标签页的预览图标，可在当前栏打开预览。

macOS 快捷键为 ⌘K 后按 V，Windows/Linux 为 Ctrl+K 后按 V。当前栏预览使用 ⌘⇧V 或 Ctrl+Shift+V。文件的“打开方式”中也可以选择 YMD 预览。

预览顶部可以切换“原始列宽”和“适应窗口”，也可以切换白底文档与编辑器主题。“查看源码”会打开对应文件。预览只展示内容，勾选框不修改源文件。

格式支持

第一版覆盖常见 Markdown 与 YMD 富文本标签。语雀画板、在线表格、附件卡片和其他需要语雀服务的交互组件尚不支持。预览样式接近文档阅读视图，字体和间距可能与语雀页面有差异。

常见问题

YMD 是什么，为什么需要专门预览？

YMD 是语雀使用的 Markdown 扩展格式。普通 Markdown 表格无法完整表达单元格背景、列宽及表格内的多段落结构，语雀的 YMD 导出会用额外标签和属性保留这些信息。本插件将这些格式转换为本地预览。

如何在 VS Code 中打开 YMD 预览？

打开 .ymd 文件后，点击编辑器右上角的预览图标，或底部的“预览 YMD”。也可以右键源文件选择预览，无需记忆快捷键。

预览需要登录语雀吗？

本地 .ymd 文件可直接预览，无需语雀账号或网络连接。图片使用文档目录内的本地文件。

本地处理

正文在本机渲染。插件不连接语雀、不上传文档、不收集遥测。远程图片不自动加载，网页链接在点击后由系统浏览器打开。相对图片和文件链接限定在当前文档目录内。脚本、内嵌网页、事件属性与命令链接会被过滤。

开发

需要 Node.js 22 或以上，以及 npm。

npm ci
npm test
npm run test:browser
npm run build
npm run test:vscode
npm run package

test:browser 使用本机 Chrome 验证实际排版。首次执行 test:vscode 会下载独立的 VS Code 测试实例，在隔离的测试用户目录中运行。VSIX 只包含运行时代码、样式、语法声明与说明文件，不包含测试文档。

构建会生成去除本地元信息的公开 README、更新日志，以及随运行时代码分发的第三方许可声明。

实现依据：VS Code Webview API、Custom Editor API、扩展测试、VSIX 打包。