拓冰网站定制 
前端UI组件富文本【免费下载链接】cherry-markdown✨ A Markdown Editor项目地址https://gitcode.com/GitHub_Trending/ch/cherry-markdown点击查看免费下载导读本文围绕 Cherry Markdown 官方 VS Code 插件仓库目录packages/vscodePlugin展开系统讲解如何通过 Command Palette、编辑器右键菜单或F10快捷键打开 Markdown 实时预览如何在预览区直接可视化编辑并安全写回 VS Code 文档以及三种图片上传模式工作区本地、Base64、自定义 HTTP 上传的配置与安全边界。读完本文你将掌握插件的全部配置项含义与默认值、双向滚动与编辑回写的底层同步机制并能独立完成从安装配置到本地构建、单元测试、集成测试的完整开发闭环。插件定位与整体架构cherry-markdown-vscode-plugin是 Cherry Markdown 官方发布的 VS Code 扩展其package.json声明的主字段为 A markdown previewer powered by cherry-markdown类型为 Visualization 类扩展package.json。它并不是在编辑器里替换原生的 Markdown 编辑能力而是以 VS Code Webview 承载 Cherry Markdown 编辑器内核提供实时渲染预览可选开启可视化编辑表面把预览区变成编辑器并将改动安全地写回 VS Code 打开的文档扩展名通过activationEvents中的onLanguage:markdown与onCommand:cherrymarkdown.preview激活package.json即打开 Markdown 文件或执行预览命令时自动加载。从源码结构看扩展由两部分组成Extension 主进程src/extension.ts中的CherryMarkdownPreview类负责管理 Webview 面板、监听编辑器事件、执行文件读写与上传和Webview 前端web-resources/scripts/index.ts创建 Cherry 实例并处理渲染、滚动、编辑事件。两侧通过postMessage交换协议消息协议类型集中在 protocol.ts 中定义。功能特性一览README 中列出的核心能力均可在源码中得到印证特性说明源码依据实时预览 双向滚动同步编辑器滚动驱动预览预览滚动反推编辑器行号extension.ts、index.ts可选可视化编辑预览区直接编辑使用 VS Code 的 undo/save 与外部变更保护extension.ts语法全面CommonMark、GFM、公式、表格、任务清单、媒体与 Cherry 扩展语法Webview 侧createBasicConfig中配置的 engine 与 toolbarsindex.ts相对路径资源工作区内相对图片与链接可直接解析extension.ts、beforeImageMounted处理PNG 导出将预览区导出为 PNG 并保存extension.ts图片插入工作区资产 / Base64 / 自定义 HTTP 上传三种模式uploadFile.ts多语言 UI英文、简体中文、俄语l10n 目录、languageIdentifiers映射使用方式打开预览打开任意 Markdown 文件后可以通过以下任一方式启动预览命令面板Command Palette执行Cherry Markdown: Preview in Cherry Markdown编辑器右键上下文菜单仅在editorLangId markdown时出现快捷键F10仅在编辑器聚焦且语言为 markdown 时生效见 package.json。预览面板固定显示在第二列ViewColumn.Two标题格式为Preview 文件名 · Cherry Markdownextension.ts。自动预览与手动模式默认情况下cherryMarkdown.Usage为active激活的 Markdown 文档会自动打开预览若将cherryMarkdown.Usage设为only-manual则只有通过命令显式执行时才会打开。配置变更后若当前为active且尚未创建面板扩展会自动补开预览extension.ts。跟随当前文档与防误写保护预览始终跟随当前激活的 Markdown 文档。当焦点切到其他文件类型时扩展会向 Webview 发送disable-edit消息禁用可视化编辑防止把改动写入错误的文档。判定逻辑位于 editState.tsexport function isPreviewEditEnabled(targetDocumentUri, targetLanguageId, activeDocumentUri, activeLanguageId) { if (!targetDocumentUri || targetLanguageId ! markdown) return false; if (activeLanguageId undefined) return true; return activeLanguageId markdown activeDocumentUri targetDocumentUri; }即只有当激活文档与预览目标文档是同一个 Markdown 文件时编辑才被允许。主题切换与持久化主题由 Cherry Markdown 内置的主题菜单控制支持default、dark、gray、abyss、green、red、violet、blue八种config.ts。主题选择存储在扩展的全局状态globalState中而非 VS Code 配置项预览重新打开时自动恢复。为兼容旧版本用户扩展启动时会执行migrateTheme若检测到旧的cherryMarkdown.Theme配置存在会将其一次性迁移到globalStateextension.ts、config.ts。主题切换的完整链路为Webview 内用户切主题 →change-theme消息 → 扩展updateTheme写入globalState并回发editor-change→ 新主题重新应用到预览。设置详解Settings以下配置项在 package.json 的contributes.configuration中完整声明设置项可选值默认值说明cherryMarkdown.Usageactive、only-manualactive控制预览是否随 Markdown 文档自动打开cherryMarkdown.ImageUploadModeworkspace、data、remoteworkspace选择本地工作区、Base64 或远程 HTTP 上传cherryMarkdown.AssetDirectory相对路径字符串.cherry-assets工作区模式下上传文件存放目录cherryMarkdown.CustomUploader对象禁用远程模式的自定义 HTTP 上传器cherryMarkdown.BackfillImageProps数组[]为插入的图片附加边框/阴影/圆角/无边框元数据关于配置值稳定性的设计细节配置项的值本身不随 VS Code 显示语言变化可安全地在多语言环境下共享主题不再是 VS Code 设置项改存扩展globalState旧主题配置仅在首次启动时作为回退迁移一次config.ts图片上传模式同样带有旧配置迁移逻辑老版本用户如果设置过UploadType/PicGoServerPicGo 服务器启动时会自动迁移为新的ImageUploadMode/CustomUploader结构其中 PicGo 地址会被填入自定义上传器的url并启用config.ts。CustomUploader对象的完整结构为{ enable: false, url: , headers: {} }其中url必须是合法的http://或https://地址headers中每个键值都必须为字符串、且不允许包含换行符\r/\n否则会在上传时抛出异常uploadFile.ts。BackfillImageProps数组的合法枚举为isBorder边框、isNotBorder无边框、isShadow阴影、isRadius圆角。该配置会随上传结果一并回传Webview 端据此为图片附加ch-image-border、ch-image-no-border、ch-image-shadow、ch-image-radius等样式类index.ts。上传安全与三种上传模式插件支持三种图片插入/上传方式完整实现位于 uploadFile.ts1. workspace 模式默认仅当当前存在打开的工作区时才可用否则报错Open a workspace to save uploaded files locally.文件被复制到工作区根目录下的cherryMarkdown.AssetDirectory指定目录默认.cherry-assets并自动处理重名若文件名已存在追加-1、-2后缀直至找到空位nextAssetUri逻辑写入完成后向 Markdown 文档插入相对路径若资源不在文档所在目录则回退为../形式保证文档在仓库内移动后图片依然可解析多个并发上传通过全局队列workspaceUploadQueue串行化写入避免资源竞争uploadFile.ts。2. data 模式Base64仅支持图片类型type必须以image/开头用于没有工作区的场景文件内容直接编码为data:image/type;base64,...内嵌到 Markdown 中不产生任何磁盘文件。3. remote 模式自定义 HTTP 上传要求CustomUploader.enable true且url非空否则抛出Custom uploader is not configured.使用 axios 发起POST请求默认注入Content-Type: application/octet-stream与X-File-Name头若用户未显式设置响应解析支持从字符串、url字段、result[0]、data字符串或对象等常见结构里提取上传结果 URLparseUploadResponse且结果 URL 必须是以http(s)://开头的合法地址或data:image/...;base64,...否则视为失败。安全限制汇总源码常量级证据Restricted Mode受限工作区capabilities.untrustedWorkspaces声明为limited其中cherryMarkdown.CustomUploader与cherryMarkdown.AssetDirectory被列为restrictedConfigurations即工作区自定义的上传器与资产目录在受限模式下被忽略package.json上传端点必须使用 HTTP 或 HTTPS 协议uploadFile.ts上传文件上限50 MBMAX_UPLOAD_BYTES 50 * 1024 * 1024请求超时30 秒UPLOAD_TIMEOUT_MS 30_000响应体上限 2 MBMAX_RESPONSE_BYTES上传前会校验文件确实存在、是文件而非目录并检测“文件在读取过程中被修改”的情况尺寸比对避免脏数据上传uploadFile.ts。注意CustomUploader.headers中的认证信息以明文存储于设置中。官方建议将此类凭据放在用户设置而非工作区设置且避免将凭据提交到仓库README 安全章节与 package.json 均可印证。核心原理双向同步与编辑写回双向滚动同步编辑器 → 预览扩展监听onDidChangeTextEditorVisibleRanges将当前可见首行号通过editor-scroll消息发给 WebviewWebview 调用cherry.previewer.scrollToLineNumWithOffset(line, 0)同步滚动并用 150ms 的suppressScrollMessages窗口防止回环index.ts预览 → 编辑器Webview 监听预览区scroll事件基于data-sign/data-lines属性和elementsFromPoint计算当前可视区域的精确行号通过preview-scroll消息发回扩展调用revealEditorLine将编辑器滚动到对应行同样以 150ms 屏蔽反向事件extension.ts。编辑写回的安全闭环可视化编辑产生的每一次改动都经过严格的版本校验与最小化替换Webview 端onChange以120ms 防抖聚合编辑携带documentUri、baseVersion、requestId与最新 markdown 发送editor-changeindex.ts扩展端先校验document.version ! data.baseVersion——若文档已在预览外被修改则拒绝写入并提示The document changed outside the preview.同时回发最新文档状态让预览刷新extension.ts通过 calculateTextReplacement 计算最小的单一替换区间公共前缀 公共后缀裁剪以WorkspaceEdit应用——这一设计保证了改动走 VS Code 原生编辑管道因而自动获得 undo / redo 与保存能力写入成功后回发editor-ackWebview 更新本地documentVersion与文本继续处理积压的编辑editInFlight/pendingMarkdown队列机制。换行符方面写入前会根据文档的 EOLLF / CRLF规范化\r?\n避免破坏既有换行风格。消息协议与 Webview 安全扩展与 Webview 之间的全部消息类型集中在 protocol.tseditor-init、editor-change、editor-ack、editor-scroll、enable/disable-edit、upload-file-result、operation-error等。所有来自 Webview 的消息都经过parseWebviewMessage的运行时校验字段类型、长度上限、枚举白名单无效消息直接丢弃并记录日志例如change-theme只接受八种合法主题值。Webview 的 HTML 壳webview.ts配置了严格的CSPdefault-src none、脚本仅允许cspSource、图片允许https: http: data:等仅从web-resources目录加载脚本与样式。文档内容只有在 Webview 上报ready之后才通过消息发送pendingWebviewText/webviewReady机制避免首屏竞态。按需加载的渲染能力Webview 侧构建 Cherry 实例时index.ts公式通过正则检测文档是否含$$、\[等数学标记仅在需要时按需加载 MathJaxmathjax/es5/tex-svg-full.js并配置mathBlock/inlineMath引擎为 MathJax拼音加载pinyin_dist.js供changeString2Pinyin回调使用ECharts将window.echarts作为 external 注入支持图表语法工具栏经过裁剪包含加粗、斜体、字号、颜色、标题、列表、引用、插入图片/链接/分割线/代码/公式/目录/表格、预览切换等常用按钮并注册了自定义菜单编辑模式切换pen图标、字体样式、保存/导出 PNG。PNG 导出机制预览区的Save as PNG通过 Webview 端动态加载html-to-image库将.cherry-previewer区域渲染为 PNGindex.ts随后扩展端对 base64 数据做大小校验估算字节数超过 50 MB 直接拒绝MAX_PNG_BYTES校验 base64 格式合法性通过showSaveDialog让用户选择保存路径写入前校验 PNG 魔数137 80 78 71 13 10 26 10确保导出的确实是 PNG 文件而非任意字符串伪装的数据extension.ts。开发、构建与测试README 给出从仓库根目录执行的开发命令链vp install vp run build:vscodePlugin vp run -F cherry-markdown-vscode-plugin typecheck vp run -F cherry-markdown-vscode-plugin test:unit vp run -F cherry-markdown-vscode-plugin test:package vp run -F cherry-markdown-vscode-plugin test:integrationbuild:vscodePlugin会先构建 extension 端再构建 webview 端package.json 中的vp build --mode extension vp build --mode webview单元测试覆盖配置归一化、协议校验、文本替换、上传处理、Webview 静态资源、MathJax 配置与编辑状态判定test:unit脚本所列测试文件见 package.json包测试test:package校验 VSIX 包结构与扩展清单的合法性集成测试test:integration使用vscode/test-electron下载固定版本的 VS Code保证本地与 CI 运行在同一个 Extension Host 契约下README 明确说明此设计意图入口为out/test/runIntegrationTests.js。若要本地产出一个可分发的 VSIX 安装包在packages/vscodePlugin目录下执行cd packages/vscodePlugin vp run package该命令使用vsce package --no-dependencies --no-yarn打包并随后运行test:vsix对产物做校验package.json。扩展要求 VS Code 版本^1.73.0及以上package.json。总结Cherry Markdown VS Code 插件把 Cherry Markdown 的渲染与编辑能力完整搬进 VS Code Webview通过editor-scroll/preview-scroll消息实现双向滚动同步通过基于baseVersion版本校验与最小替换区间的WorkspaceEdit实现“预览区即编辑器”的安全写回并通过enable/disable-edit门禁确保永远不会改错文档。上传侧三种模式workspace / data / remote分别面向有工作区、无工作区、有图床三种场景配合 50 MB 文件上限、30 秒超时、协议白名单与 Restricted Mode 受限配置在易用性与安全性之间取得了平衡。如果你需要深度定制可以直接阅读本仓库的 extension.ts、uploadFile.ts 与 web-resources/scripts/index.ts并以 test 目录 中的测试用例为行为契约进行修改与验证。赞分享前端UI组件富文本【免费下载链接】cherry-markdown✨ A Markdown Editor项目地址https://gitcode.com/GitHub_Trending/ch/cherry-markdown点击查看免费下载相关推荐GoRouter 命名路由Named Routes完全指南用名称代替 URL 进行声明式导航与重定向GoRouter 命名路由Named Routes完全指南用名称代替 URL 进行声明式导航与重定向 导读 本文围绕 Flutter 官方维护的 go_r前端UI组件富文本SVG图标 vs 字体图标awesome-icons教你如何选择最适合的方案SVG图标 vs 字体图标awesome icons教你如何选择最适合的方案 awesome icons作为精选的Web图标资源集合提供了丰富的SVG图标和remark VS Code集成实时预览与格式化Markdown文件remark VS Code集成实时预览与格式化Markdown文件 你还在为Markdown编辑时无法实时预览效果而烦恼吗还在为不同文件的格式不一致而头疼文档上一篇SMUDebugTool实战指南像工程师一样读写你的AMD Ryzen底层参数下一篇PPT Master 新手完整指南从文档到可编辑原生 PPTX 的最短路径创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Cherry Markdown VS Code 插件深度指南：实时预览、双向同步与图片上传架构解析
前端UI组件富文本【免费下载链接】cherry-markdown✨ A Markdown Editor项目地址https://gitcode.com/GitHub_Trending/ch/cherry-markdown点击查看免费下载导读本文围绕 Cherry Markdown 官方 VS Code 插件仓库目录packages/vscodePlugin展开系统讲解如何通过 Command Palette、编辑器右键菜单或F10快捷键打开 Markdown 实时预览如何在预览区直接可视化编辑并安全写回 VS Code 文档以及三种图片上传模式工作区本地、Base64、自定义 HTTP 上传的配置与安全边界。读完本文你将掌握插件的全部配置项含义与默认值、双向滚动与编辑回写的底层同步机制并能独立完成从安装配置到本地构建、单元测试、集成测试的完整开发闭环。插件定位与整体架构cherry-markdown-vscode-plugin是 Cherry Markdown 官方发布的 VS Code 扩展其package.json声明的主字段为 A markdown previewer powered by cherry-markdown类型为 Visualization 类扩展package.json。它并不是在编辑器里替换原生的 Markdown 编辑能力而是以 VS Code Webview 承载 Cherry Markdown 编辑器内核提供实时渲染预览可选开启可视化编辑表面把预览区变成编辑器并将改动安全地写回 VS Code 打开的文档扩展名通过activationEvents中的onLanguage:markdown与onCommand:cherrymarkdown.preview激活package.json即打开 Markdown 文件或执行预览命令时自动加载。从源码结构看扩展由两部分组成Extension 主进程src/extension.ts中的CherryMarkdownPreview类负责管理 Webview 面板、监听编辑器事件、执行文件读写与上传和Webview 前端web-resources/scripts/index.ts创建 Cherry 实例并处理渲染、滚动、编辑事件。两侧通过postMessage交换协议消息协议类型集中在 protocol.ts 中定义。功能特性一览README 中列出的核心能力均可在源码中得到印证特性说明源码依据实时预览 双向滚动同步编辑器滚动驱动预览预览滚动反推编辑器行号extension.ts、index.ts可选可视化编辑预览区直接编辑使用 VS Code 的 undo/save 与外部变更保护extension.ts语法全面CommonMark、GFM、公式、表格、任务清单、媒体与 Cherry 扩展语法Webview 侧createBasicConfig中配置的 engine 与 toolbarsindex.ts相对路径资源工作区内相对图片与链接可直接解析extension.ts、beforeImageMounted处理PNG 导出将预览区导出为 PNG 并保存extension.ts图片插入工作区资产 / Base64 / 自定义 HTTP 上传三种模式uploadFile.ts多语言 UI英文、简体中文、俄语l10n 目录、languageIdentifiers映射使用方式打开预览打开任意 Markdown 文件后可以通过以下任一方式启动预览命令面板Command Palette执行Cherry Markdown: Preview in Cherry Markdown编辑器右键上下文菜单仅在editorLangId markdown时出现快捷键F10仅在编辑器聚焦且语言为 markdown 时生效见 package.json。预览面板固定显示在第二列ViewColumn.Two标题格式为Preview 文件名 · Cherry Markdownextension.ts。自动预览与手动模式默认情况下cherryMarkdown.Usage为active激活的 Markdown 文档会自动打开预览若将cherryMarkdown.Usage设为only-manual则只有通过命令显式执行时才会打开。配置变更后若当前为active且尚未创建面板扩展会自动补开预览extension.ts。跟随当前文档与防误写保护预览始终跟随当前激活的 Markdown 文档。当焦点切到其他文件类型时扩展会向 Webview 发送disable-edit消息禁用可视化编辑防止把改动写入错误的文档。判定逻辑位于 editState.tsexport function isPreviewEditEnabled(targetDocumentUri, targetLanguageId, activeDocumentUri, activeLanguageId) { if (!targetDocumentUri || targetLanguageId ! markdown) return false; if (activeLanguageId undefined) return true; return activeLanguageId markdown activeDocumentUri targetDocumentUri; }即只有当激活文档与预览目标文档是同一个 Markdown 文件时编辑才被允许。主题切换与持久化主题由 Cherry Markdown 内置的主题菜单控制支持default、dark、gray、abyss、green、red、violet、blue八种config.ts。主题选择存储在扩展的全局状态globalState中而非 VS Code 配置项预览重新打开时自动恢复。为兼容旧版本用户扩展启动时会执行migrateTheme若检测到旧的cherryMarkdown.Theme配置存在会将其一次性迁移到globalStateextension.ts、config.ts。主题切换的完整链路为Webview 内用户切主题 →change-theme消息 → 扩展updateTheme写入globalState并回发editor-change→ 新主题重新应用到预览。设置详解Settings以下配置项在 package.json 的contributes.configuration中完整声明设置项可选值默认值说明cherryMarkdown.Usageactive、only-manualactive控制预览是否随 Markdown 文档自动打开cherryMarkdown.ImageUploadModeworkspace、data、remoteworkspace选择本地工作区、Base64 或远程 HTTP 上传cherryMarkdown.AssetDirectory相对路径字符串.cherry-assets工作区模式下上传文件存放目录cherryMarkdown.CustomUploader对象禁用远程模式的自定义 HTTP 上传器cherryMarkdown.BackfillImageProps数组[]为插入的图片附加边框/阴影/圆角/无边框元数据关于配置值稳定性的设计细节配置项的值本身不随 VS Code 显示语言变化可安全地在多语言环境下共享主题不再是 VS Code 设置项改存扩展globalState旧主题配置仅在首次启动时作为回退迁移一次config.ts图片上传模式同样带有旧配置迁移逻辑老版本用户如果设置过UploadType/PicGoServerPicGo 服务器启动时会自动迁移为新的ImageUploadMode/CustomUploader结构其中 PicGo 地址会被填入自定义上传器的url并启用config.ts。CustomUploader对象的完整结构为{ enable: false, url: , headers: {} }其中url必须是合法的http://或https://地址headers中每个键值都必须为字符串、且不允许包含换行符\r/\n否则会在上传时抛出异常uploadFile.ts。BackfillImageProps数组的合法枚举为isBorder边框、isNotBorder无边框、isShadow阴影、isRadius圆角。该配置会随上传结果一并回传Webview 端据此为图片附加ch-image-border、ch-image-no-border、ch-image-shadow、ch-image-radius等样式类index.ts。上传安全与三种上传模式插件支持三种图片插入/上传方式完整实现位于 uploadFile.ts1. workspace 模式默认仅当当前存在打开的工作区时才可用否则报错Open a workspace to save uploaded files locally.文件被复制到工作区根目录下的cherryMarkdown.AssetDirectory指定目录默认.cherry-assets并自动处理重名若文件名已存在追加-1、-2后缀直至找到空位nextAssetUri逻辑写入完成后向 Markdown 文档插入相对路径若资源不在文档所在目录则回退为../形式保证文档在仓库内移动后图片依然可解析多个并发上传通过全局队列workspaceUploadQueue串行化写入避免资源竞争uploadFile.ts。2. data 模式Base64仅支持图片类型type必须以image/开头用于没有工作区的场景文件内容直接编码为data:image/type;base64,...内嵌到 Markdown 中不产生任何磁盘文件。3. remote 模式自定义 HTTP 上传要求CustomUploader.enable true且url非空否则抛出Custom uploader is not configured.使用 axios 发起POST请求默认注入Content-Type: application/octet-stream与X-File-Name头若用户未显式设置响应解析支持从字符串、url字段、result[0]、data字符串或对象等常见结构里提取上传结果 URLparseUploadResponse且结果 URL 必须是以http(s)://开头的合法地址或data:image/...;base64,...否则视为失败。安全限制汇总源码常量级证据Restricted Mode受限工作区capabilities.untrustedWorkspaces声明为limited其中cherryMarkdown.CustomUploader与cherryMarkdown.AssetDirectory被列为restrictedConfigurations即工作区自定义的上传器与资产目录在受限模式下被忽略package.json上传端点必须使用 HTTP 或 HTTPS 协议uploadFile.ts上传文件上限50 MBMAX_UPLOAD_BYTES 50 * 1024 * 1024请求超时30 秒UPLOAD_TIMEOUT_MS 30_000响应体上限 2 MBMAX_RESPONSE_BYTES上传前会校验文件确实存在、是文件而非目录并检测“文件在读取过程中被修改”的情况尺寸比对避免脏数据上传uploadFile.ts。注意CustomUploader.headers中的认证信息以明文存储于设置中。官方建议将此类凭据放在用户设置而非工作区设置且避免将凭据提交到仓库README 安全章节与 package.json 均可印证。核心原理双向同步与编辑写回双向滚动同步编辑器 → 预览扩展监听onDidChangeTextEditorVisibleRanges将当前可见首行号通过editor-scroll消息发给 WebviewWebview 调用cherry.previewer.scrollToLineNumWithOffset(line, 0)同步滚动并用 150ms 的suppressScrollMessages窗口防止回环index.ts预览 → 编辑器Webview 监听预览区scroll事件基于data-sign/data-lines属性和elementsFromPoint计算当前可视区域的精确行号通过preview-scroll消息发回扩展调用revealEditorLine将编辑器滚动到对应行同样以 150ms 屏蔽反向事件extension.ts。编辑写回的安全闭环可视化编辑产生的每一次改动都经过严格的版本校验与最小化替换Webview 端onChange以120ms 防抖聚合编辑携带documentUri、baseVersion、requestId与最新 markdown 发送editor-changeindex.ts扩展端先校验document.version ! data.baseVersion——若文档已在预览外被修改则拒绝写入并提示The document changed outside the preview.同时回发最新文档状态让预览刷新extension.ts通过 calculateTextReplacement 计算最小的单一替换区间公共前缀 公共后缀裁剪以WorkspaceEdit应用——这一设计保证了改动走 VS Code 原生编辑管道因而自动获得 undo / redo 与保存能力写入成功后回发editor-ackWebview 更新本地documentVersion与文本继续处理积压的编辑editInFlight/pendingMarkdown队列机制。换行符方面写入前会根据文档的 EOLLF / CRLF规范化\r?\n避免破坏既有换行风格。消息协议与 Webview 安全扩展与 Webview 之间的全部消息类型集中在 protocol.tseditor-init、editor-change、editor-ack、editor-scroll、enable/disable-edit、upload-file-result、operation-error等。所有来自 Webview 的消息都经过parseWebviewMessage的运行时校验字段类型、长度上限、枚举白名单无效消息直接丢弃并记录日志例如change-theme只接受八种合法主题值。Webview 的 HTML 壳webview.ts配置了严格的CSPdefault-src none、脚本仅允许cspSource、图片允许https: http: data:等仅从web-resources目录加载脚本与样式。文档内容只有在 Webview 上报ready之后才通过消息发送pendingWebviewText/webviewReady机制避免首屏竞态。按需加载的渲染能力Webview 侧构建 Cherry 实例时index.ts公式通过正则检测文档是否含$$、\[等数学标记仅在需要时按需加载 MathJaxmathjax/es5/tex-svg-full.js并配置mathBlock/inlineMath引擎为 MathJax拼音加载pinyin_dist.js供changeString2Pinyin回调使用ECharts将window.echarts作为 external 注入支持图表语法工具栏经过裁剪包含加粗、斜体、字号、颜色、标题、列表、引用、插入图片/链接/分割线/代码/公式/目录/表格、预览切换等常用按钮并注册了自定义菜单编辑模式切换pen图标、字体样式、保存/导出 PNG。PNG 导出机制预览区的Save as PNG通过 Webview 端动态加载html-to-image库将.cherry-previewer区域渲染为 PNGindex.ts随后扩展端对 base64 数据做大小校验估算字节数超过 50 MB 直接拒绝MAX_PNG_BYTES校验 base64 格式合法性通过showSaveDialog让用户选择保存路径写入前校验 PNG 魔数137 80 78 71 13 10 26 10确保导出的确实是 PNG 文件而非任意字符串伪装的数据extension.ts。开发、构建与测试README 给出从仓库根目录执行的开发命令链vp install vp run build:vscodePlugin vp run -F cherry-markdown-vscode-plugin typecheck vp run -F cherry-markdown-vscode-plugin test:unit vp run -F cherry-markdown-vscode-plugin test:package vp run -F cherry-markdown-vscode-plugin test:integrationbuild:vscodePlugin会先构建 extension 端再构建 webview 端package.json 中的vp build --mode extension vp build --mode webview单元测试覆盖配置归一化、协议校验、文本替换、上传处理、Webview 静态资源、MathJax 配置与编辑状态判定test:unit脚本所列测试文件见 package.json包测试test:package校验 VSIX 包结构与扩展清单的合法性集成测试test:integration使用vscode/test-electron下载固定版本的 VS Code保证本地与 CI 运行在同一个 Extension Host 契约下README 明确说明此设计意图入口为out/test/runIntegrationTests.js。若要本地产出一个可分发的 VSIX 安装包在packages/vscodePlugin目录下执行cd packages/vscodePlugin vp run package该命令使用vsce package --no-dependencies --no-yarn打包并随后运行test:vsix对产物做校验package.json。扩展要求 VS Code 版本^1.73.0及以上package.json。总结Cherry Markdown VS Code 插件把 Cherry Markdown 的渲染与编辑能力完整搬进 VS Code Webview通过editor-scroll/preview-scroll消息实现双向滚动同步通过基于baseVersion版本校验与最小替换区间的WorkspaceEdit实现“预览区即编辑器”的安全写回并通过enable/disable-edit门禁确保永远不会改错文档。上传侧三种模式workspace / data / remote分别面向有工作区、无工作区、有图床三种场景配合 50 MB 文件上限、30 秒超时、协议白名单与 Restricted Mode 受限配置在易用性与安全性之间取得了平衡。如果你需要深度定制可以直接阅读本仓库的 extension.ts、uploadFile.ts 与 web-resources/scripts/index.ts并以 test 目录 中的测试用例为行为契约进行修改与验证。赞分享前端UI组件富文本【免费下载链接】cherry-markdown✨ A Markdown Editor项目地址https://gitcode.com/GitHub_Trending/ch/cherry-markdown点击查看免费下载相关推荐GoRouter 命名路由Named Routes完全指南用名称代替 URL 进行声明式导航与重定向GoRouter 命名路由Named Routes完全指南用名称代替 URL 进行声明式导航与重定向 导读 本文围绕 Flutter 官方维护的 go_r前端UI组件富文本SVG图标 vs 字体图标awesome-icons教你如何选择最适合的方案SVG图标 vs 字体图标awesome icons教你如何选择最适合的方案 awesome icons作为精选的Web图标资源集合提供了丰富的SVG图标和remark VS Code集成实时预览与格式化Markdown文件remark VS Code集成实时预览与格式化Markdown文件 你还在为Markdown编辑时无法实时预览效果而烦恼吗还在为不同文件的格式不一致而头疼文档上一篇SMUDebugTool实战指南像工程师一样读写你的AMD Ryzen底层参数下一篇PPT Master 新手完整指南从文档到可编辑原生 PPTX 的最短路径创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考