Milkdown 代码高亮插件 milkdown/plugin-highlight 完全指南四种高亮引擎、配置实践与版本演进解析【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdownmilkdown/plugin-highlight 是 Milkdown 插件化 WYSIWYG Markdown 编辑器框架中的代码块语法高亮插件基于 prosemirror-highlight 构建为 Milkdown 的核心与 Crepe 编辑器提供代码块着色能力。本文以该插件的 CHANGELOG 为时间轴骨架结合源码与 API 文档系统讲解其架构、四种高亮解析器的接入方式、配置要点与版本演进脉络读完即可在自己的 Milkdown 编辑器中落地完整的高亮方案。插件定位与核心能力代码块是 Markdown 编辑中最高频的内容形态之一而milkdown/plugin-highlight的作用正是在 ProseMirror 视图中把代码块节点渲染为带语法着色的 HTML。它位于 packages/plugins/plugin-highlight官方文档对其定位的表述是Highlight plugin for milkdown. Built on top of prosemirror-highlight.也就是说该插件不自己实现分词器而是把分词与着色的底层工作交给 prosemirror-highlight版本锁定为^0.15.0Milkdown 侧负责提供上下文配置、插件组装与模块导出。插件支持的解析引擎包括Shiki基于 TextMate 语法支持多主题切换Lowlight基于 Highlight.js开箱即用、覆盖语言广泛Refractor基于 Prism.js轻量、可精确控制高亮颗粒度Sugar High极轻量的 JavaScript 高亮器适合快速演示与小体积场景。架构拆解从三个导出符号看插件实现插件入口 src/index.ts 非常精简只暴露了三个核心符号理解它们就能理解整个插件的工作方式。highlightPluginConfig解析器配置上下文// 来自 packages/plugins/plugin-highlight/src/index.ts type HighlightPluginOptions Parameterstypeof createHighlightPlugin[0] export const highlightPluginConfig $ctx HighlightPluginOptions, highlightPluginConfig ({} as HighlightPluginOptions, highlightPluginConfig)highlightPluginConfig是一个类型为CtxhighlightPluginConfig的 Milkdown 上下文切片其值类型直接取自prosemirror-highlight的createHighlightPlugin首参类型。它承担了运行时注入高亮解析器的职责——你在编辑器配置阶段通过ctx.set(highlightPluginConfig.key, { parser })写入的内容会在插件初始化时被读取。highlightPluginProseMirror 插件的桥接// 来自 packages/plugins/plugin-highlight/src/index.ts export const highlightPlugin $prose((ctx) { const config ctx.get(highlightPluginConfig.key) if (!config.parser) { throw new Error( Highlight plugin requires a parser to be set in the highlightPluginConfig. ) } return createHighlightPlugin(config) })highlightPlugin通过$prose包装器将配置转译为真正的 ProseMirror 插件。值得注意的防御性设计如果配置中缺少parser字段插件会直接抛出明确错误而不是静默降级——这保证了高亮行为永远不会在未配置解析器的状态下含糊运行。从源码结构可以推断parser就是整个插件的唯一硬性前置条件其余字段如主题、语言映射等均交给 prosemirror-highlight 的默认行为处理。highlight开箱即用的插件组合// 来自 packages/plugins/plugin-highlight/src/index.ts export const highlight: MilkdownPlugin[] [ highlightPluginConfig, highlightPlugin, ].flat()highlight将配置切片 功能插件打包为一个数组与commonmark等 preset 的use()风格保持一致。你只需要.use(highlight)一次两个环节都会被注册进编辑器。子路径导出四种解析器各归其位package.json 的exports字段定义了 5 个入口导出路径源文件内容.src/index.ts插件本体与配置切片./shikisrc/shiki.ts重导出prosemirror-highlight/shiki的createParser./lowlightsrc/lowlight.ts重导出prosemirror-highlight/lowlight的createParser./refractorsrc/refractor.ts重导出prosemirror-highlight/refractor的createParser./sugar-highsrc/sugar-high.ts重导出prosemirror-highlight/sugar-high的createParser四个解析器入口都是对 prosemirror-highlight 同名子路径的直接转发说明插件刻意保持了薄封装——你选择哪种引擎就按需引入哪个子路径未使用的引擎不会进入产物sideEffects: false也利于 tree-shaking。四种高亮解析器接入代码与选型要点完整的接入示例来自 docs/api/plugin-highlight.md以下逐种展开。Shiki主题丰富、适合追求视觉一致性// For shiki import { getSingletonHighlighter } from shiki import { createParser } from milkdown/plugin-highlight/shiki const highlighter await getSingletonHighlighter({ themes: [github-light], langs: [javascript, typescript, python], }) const parser createParser(highlighter)Shiki 需要先异步初始化高亮器实例themes声明要加载的主题如github-light、github-darklangs声明支持的语法集合。getSingletonHighlighter会复用全局单例避免重复加载开销createParser(highlighter)再把高亮器适配为插件所需的 parser。Shiki 的代价是需要一次性声明所需语言语言列表过长会增大首屏加载体积适合主题统一、语言范围可控的站点。Lowlight基于 Highlight.js覆盖语言最广// For lowlight import highlight.js/styles/default.css import { common, createLowlight } from lowlight import { createParser } from milkdown/plugin-highlight/lowlight const lowlight createLowlight(common) const parser createParser(lowlight)createLowlight(common)会注册 Highlight.js 的常用语言子集样式通过独立的 CSS 文件如highlight.js/styles/default.css引入与高亮逻辑解耦。Lowlight 的优点是装上就能用适合内容来源多样、语言不确定的场景。Refractor基于 Prism.js轻量可控// For refractor import { refractor } from refractor/all import { createParser } from milkdown/plugin-highlight/refractor const parser createParser(refractor)从refractor/all引入会注册全部语言如果想控制体积可以用refractor主入口并手动refractor.register(require(refractor/lang/xxx))按需注册。Refractor 在 CHANGELOG 中频繁出现见下文 7.22.0 的fix(prism)条目是仓库内部测试与修复投入最多的路径之一。Sugar High极轻量开箱即用// For sugar high import { createParser } from milkdown/plugin-highlight/sugar-high const parser createParser()Sugar High 是唯一无需任何参数的解析器——连语言名都不需要它按词法自动切分 token。适合快速验证、Demo、移动端或对体积极度敏感的场景。在 Milkdown 中的接入步骤无论选择哪种引擎接入流程完全一致官方文档给出了完整骨架// Setup import { highlight, highlightPluginConfig } from milkdown/plugin-highlight Editor.make() .config((ctx) { ctx.set(highlightPluginConfig.key, { parser }) }) .use(highlight) .create()步骤 1按上一节任选一种引擎创建parser步骤 2在config回调中通过ctx.set(highlightPluginConfig.key, { parser })注入解析器步骤 3use(highlight)注册插件内部已包含配置切片无需额外注册步骤 4create()创建编辑器。引擎只影响着色效果插件的装配逻辑对所有引擎一视同仁因此切换高亮方案只需更换parser的创建代码插件配置与装配代码零改动——这是解析器与渲染器解耦设计带来的直接收益。与 Crepe 编辑器的关系Crepe 是 Milkdown 的一体化开箱编辑器在 packages/crepe/src/feature/index.ts 中代码块能力被抽象为CrepeFeature.CodeMirrorSyntax highlighting and editing for code blocks with language support, theme customization, and preview capabilities.从源码结构看Crepe 的代码块编辑走的是CodeMirror 内核见 packages/crepe/src/feature/code-mirror/index.ts与milkdown/plugin-highlightprosemirror-highlight 内核是两条平行的代码块高亮技术路线前者面向富交互的代码编辑体验后者面向纯 Milkdown 插件体系、可与任意 preset 自由组合。插件开发者可根据使用场景二选一在自定义组装编辑器中使用milkdown/plugin-highlight在 Crepe 中则通过 CodeMirror feature 配置语言与主题。CHANGELOG 7.21.0 中的perf: lazy initialize CodeMirror for off-screen code blocks (#2313)也印证了 Crepe 侧对代码块性能的持续优化方向。版本演进时间线CHANGELOG 深度解读CHANGELOG.md 记录了 7.16.0 到 7.22.1 共 15 个版本的发布历史。需要说明的是Milkdown 使用 changesets 做版本管理因此该文件除 highlight 专属条目外也聚合了同版本发布周期内其他包core、ctx、utils、components、preset 等的变更说明阅读时可按fix(...)/feat(...)的包名前缀定位与高亮插件直接相关的内容。7.16.0Minor插件诞生本版本是milkdown/plugin-highlight的首次亮相feat: add new highlight plugin (#2067)—— 插件正式加入 Milkdown 插件体系fix: missing doc tag for highlight plugin—— 同期补上了highlight、highlightPluginConfig、highlightPlugin等文档标签这些标签正是 docs/api/plugin-highlight.md 中三个 API 锚点的来源chore: enable knip and remove dead code and export (#2099)—— 引入 knip 清理死代码保证了插件薄封装的整洁度。同期还发布了test: improve unit test of transformer (#2109)与ci: add pkg-pr-new (#2082)后者让每个 PR 都能发布即时预览包对插件后续迭代的验证效率意义重大。7.17.0Minor粘贴规则与异步预览feat: add paste rule (#2126)—— 为代码块等场景补充了粘贴规则feat: support to render async preview in code block (#2117)—— 代码块支持异步渲染预览如 Mermaid 等依赖异步加载的内容。该版本的修复集中在代码块体验的边界场景属于与高亮插件共享发布周期的相邻能力增强。7.17.17.19.2基础设施与稳定性7.17.1发布流水线迁移到 OIDC 短时令牌认证无面向用户的变更7.17.2升级 prosemirror 相关依赖版本7.18.0实现健壮的邮箱自动链接正则与 E2E 测试、tooltip 自动更新7.19.x聚焦 Google Docs 粘贴表格的解析修复、transformer 行内代码加粗/斜体组合序列化修复fix(transformer): inline code with bold/italic marks produces wrong markdown (#2281)。其中 7.19.1 的fix(transformer)与高亮插件的inline code场景存在语义关联——行内代码标记与加粗/斜体混排时 Markdown 序列化错误会直接影响代码样式的还原正确性。7.20.0Minor7.21.3周边能力扩展7.20.0新增顶栏TopBar、Crepe 集成 upload 插件、image-block 的maxWidth/maxHeight配置7.21.0MinorAI 能力大版本——新增 OpenAI / Anthropic 提供方、DiffStreaming 合并进CrepeFeature.AI、per-block diff、流式替换选区等同时perf: lazy initialize CodeMirror for off-screen code blocks (#2313)优化了离屏代码块的初始化性能7.21.3fix: serialize marks spanning multiple nodes as one continuous span (#2405)修复了跨节点 mark 序列化为一个连续 span 的问题同样与代码高亮中 mark 的呈现质量相关。7.22.0MinorPrism 重高亮修复与性能优化这是与高亮插件直接相关度最高的版本fix(prism): re-highlight non-first code blocks on language change (#2440)—— 修复了切换语言后非首个代码块不重新高亮的缺陷。从fix(prism)前缀可以确认该修复落在 Refractor/Prism 解析路径上当文档中存在多个代码块且用户修改其中一个的语言时需确保所有受影响的代码块而非仅第一个触发重高亮perf: reduce per-keystroke cost in keepTableAlignPlugin and prismPlugin (#2436)—— 降低prismPlugin的每按键开销减少高亮重算对输入流畅度的影响build: upgrade to typescript 7 native compiler (#2418)—— 构建链升级属于对插件可维护性的间接增强。7.22.1Patch补丁修复fix(components): sync readonly code block updates (#2455)—— 只读模式下代码块更新的同步问题fix(preset-commonmark): make the inline code mark not inclusive (#2451)与fix(prose): respect inline code in mark input rules (#2445)—— 行内代码 mark 的包含性与输入规则修复保证代码语法标记的边界行为正确。至此插件随 Milkdown 版本稳定迭代依赖同步更新为milkdown/core7.22.1、milkdown/ctx7.22.1、milkdown/utils7.22.1。测试验证高亮行为是如何被保障的插件的单元测试位于 src/test/highlight.spec.ts它使用 Sugar High 解析器createParser()来自 prosemirror-highlight完整演示了配置 → 组装 → 渲染的最小闭环// 来自 packages/plugins/plugin-highlight/src/__test__/highlight.spec.ts function createEditor() { const parser createParser() const editor Editor.make() editor .config((ctx) { ctx.set(highlightPluginConfig.key, { parser }) }) .use(commonmark) .use(highlight) return editor }测试用例用defaultValueCtx注入一个console.log(Hello, world!)的 JS 代码块创建编辑器后断言视图 DOM 中生成的spantoken 结构。从快照可以看到 Sugar High 的着色输出形态每个 token 带sh__token--identifier、sh__token--string、sh__token--sign等语义化 class并通过stylecolor: var(--sh-xxx);引用 CSS 变量。这意味着你可以通过覆盖--sh-*CSS 变量来定制配色而无需改动插件本身——这也是该插件测试同时充当了使用范本的原因。常见问题与排查建议报错 Highlight plugin requires a parser to be set in the highlightPluginConfig.说明highlightPluginConfig中未注入parser。检查是否在config回调中执行了ctx.set(highlightPluginConfig.key, { parser })且parser来自四个子路径之一src/index.ts 会在缺失时主动抛错切换代码块语言后部分代码块不更新7.22.0 已修复 Prism 路径的非首个代码块不重高亮问题请确认版本不低于 7.22.0对应修复 [#2440]输入卡顿高亮重算属于每按键开销的一部分7.22.0 已优化prismPlugin的每按键成本[#2436]如仍感卡顿可考虑换用 Sugar High 这类更轻量的解析器或限制文档内代码块数量代码块与 Crepe 的关系在 Crepe 中代码块由CrepeFeature.CodeMirror默认启用驱动milkdown/plugin-highlight适用于自组装编辑器两者技术路线不同勿混用配置。从 7.16.0 的首次发布到 7.22.1 的稳定迭代milkdown/plugin-highlight用薄封装 解析器可插拔的架构为 Milkdown 生态提供了覆盖 Shiki、Lowlight、Refractor、Sugar High 四套引擎的统一高亮入口。对开发者而言掌握highlightPluginConfig的注入方式与四种createParser的差异即可在自组装编辑器中获得与官方一致、可自由定制主题的代码高亮体验。【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Milkdown 代码高亮插件 @milkdown/plugin-highlight 完全指南：四种高亮引擎、配置实践与版本演进解析
Milkdown 代码高亮插件 milkdown/plugin-highlight 完全指南四种高亮引擎、配置实践与版本演进解析【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdownmilkdown/plugin-highlight 是 Milkdown 插件化 WYSIWYG Markdown 编辑器框架中的代码块语法高亮插件基于 prosemirror-highlight 构建为 Milkdown 的核心与 Crepe 编辑器提供代码块着色能力。本文以该插件的 CHANGELOG 为时间轴骨架结合源码与 API 文档系统讲解其架构、四种高亮解析器的接入方式、配置要点与版本演进脉络读完即可在自己的 Milkdown 编辑器中落地完整的高亮方案。插件定位与核心能力代码块是 Markdown 编辑中最高频的内容形态之一而milkdown/plugin-highlight的作用正是在 ProseMirror 视图中把代码块节点渲染为带语法着色的 HTML。它位于 packages/plugins/plugin-highlight官方文档对其定位的表述是Highlight plugin for milkdown. Built on top of prosemirror-highlight.也就是说该插件不自己实现分词器而是把分词与着色的底层工作交给 prosemirror-highlight版本锁定为^0.15.0Milkdown 侧负责提供上下文配置、插件组装与模块导出。插件支持的解析引擎包括Shiki基于 TextMate 语法支持多主题切换Lowlight基于 Highlight.js开箱即用、覆盖语言广泛Refractor基于 Prism.js轻量、可精确控制高亮颗粒度Sugar High极轻量的 JavaScript 高亮器适合快速演示与小体积场景。架构拆解从三个导出符号看插件实现插件入口 src/index.ts 非常精简只暴露了三个核心符号理解它们就能理解整个插件的工作方式。highlightPluginConfig解析器配置上下文// 来自 packages/plugins/plugin-highlight/src/index.ts type HighlightPluginOptions Parameterstypeof createHighlightPlugin[0] export const highlightPluginConfig $ctx HighlightPluginOptions, highlightPluginConfig ({} as HighlightPluginOptions, highlightPluginConfig)highlightPluginConfig是一个类型为CtxhighlightPluginConfig的 Milkdown 上下文切片其值类型直接取自prosemirror-highlight的createHighlightPlugin首参类型。它承担了运行时注入高亮解析器的职责——你在编辑器配置阶段通过ctx.set(highlightPluginConfig.key, { parser })写入的内容会在插件初始化时被读取。highlightPluginProseMirror 插件的桥接// 来自 packages/plugins/plugin-highlight/src/index.ts export const highlightPlugin $prose((ctx) { const config ctx.get(highlightPluginConfig.key) if (!config.parser) { throw new Error( Highlight plugin requires a parser to be set in the highlightPluginConfig. ) } return createHighlightPlugin(config) })highlightPlugin通过$prose包装器将配置转译为真正的 ProseMirror 插件。值得注意的防御性设计如果配置中缺少parser字段插件会直接抛出明确错误而不是静默降级——这保证了高亮行为永远不会在未配置解析器的状态下含糊运行。从源码结构可以推断parser就是整个插件的唯一硬性前置条件其余字段如主题、语言映射等均交给 prosemirror-highlight 的默认行为处理。highlight开箱即用的插件组合// 来自 packages/plugins/plugin-highlight/src/index.ts export const highlight: MilkdownPlugin[] [ highlightPluginConfig, highlightPlugin, ].flat()highlight将配置切片 功能插件打包为一个数组与commonmark等 preset 的use()风格保持一致。你只需要.use(highlight)一次两个环节都会被注册进编辑器。子路径导出四种解析器各归其位package.json 的exports字段定义了 5 个入口导出路径源文件内容.src/index.ts插件本体与配置切片./shikisrc/shiki.ts重导出prosemirror-highlight/shiki的createParser./lowlightsrc/lowlight.ts重导出prosemirror-highlight/lowlight的createParser./refractorsrc/refractor.ts重导出prosemirror-highlight/refractor的createParser./sugar-highsrc/sugar-high.ts重导出prosemirror-highlight/sugar-high的createParser四个解析器入口都是对 prosemirror-highlight 同名子路径的直接转发说明插件刻意保持了薄封装——你选择哪种引擎就按需引入哪个子路径未使用的引擎不会进入产物sideEffects: false也利于 tree-shaking。四种高亮解析器接入代码与选型要点完整的接入示例来自 docs/api/plugin-highlight.md以下逐种展开。Shiki主题丰富、适合追求视觉一致性// For shiki import { getSingletonHighlighter } from shiki import { createParser } from milkdown/plugin-highlight/shiki const highlighter await getSingletonHighlighter({ themes: [github-light], langs: [javascript, typescript, python], }) const parser createParser(highlighter)Shiki 需要先异步初始化高亮器实例themes声明要加载的主题如github-light、github-darklangs声明支持的语法集合。getSingletonHighlighter会复用全局单例避免重复加载开销createParser(highlighter)再把高亮器适配为插件所需的 parser。Shiki 的代价是需要一次性声明所需语言语言列表过长会增大首屏加载体积适合主题统一、语言范围可控的站点。Lowlight基于 Highlight.js覆盖语言最广// For lowlight import highlight.js/styles/default.css import { common, createLowlight } from lowlight import { createParser } from milkdown/plugin-highlight/lowlight const lowlight createLowlight(common) const parser createParser(lowlight)createLowlight(common)会注册 Highlight.js 的常用语言子集样式通过独立的 CSS 文件如highlight.js/styles/default.css引入与高亮逻辑解耦。Lowlight 的优点是装上就能用适合内容来源多样、语言不确定的场景。Refractor基于 Prism.js轻量可控// For refractor import { refractor } from refractor/all import { createParser } from milkdown/plugin-highlight/refractor const parser createParser(refractor)从refractor/all引入会注册全部语言如果想控制体积可以用refractor主入口并手动refractor.register(require(refractor/lang/xxx))按需注册。Refractor 在 CHANGELOG 中频繁出现见下文 7.22.0 的fix(prism)条目是仓库内部测试与修复投入最多的路径之一。Sugar High极轻量开箱即用// For sugar high import { createParser } from milkdown/plugin-highlight/sugar-high const parser createParser()Sugar High 是唯一无需任何参数的解析器——连语言名都不需要它按词法自动切分 token。适合快速验证、Demo、移动端或对体积极度敏感的场景。在 Milkdown 中的接入步骤无论选择哪种引擎接入流程完全一致官方文档给出了完整骨架// Setup import { highlight, highlightPluginConfig } from milkdown/plugin-highlight Editor.make() .config((ctx) { ctx.set(highlightPluginConfig.key, { parser }) }) .use(highlight) .create()步骤 1按上一节任选一种引擎创建parser步骤 2在config回调中通过ctx.set(highlightPluginConfig.key, { parser })注入解析器步骤 3use(highlight)注册插件内部已包含配置切片无需额外注册步骤 4create()创建编辑器。引擎只影响着色效果插件的装配逻辑对所有引擎一视同仁因此切换高亮方案只需更换parser的创建代码插件配置与装配代码零改动——这是解析器与渲染器解耦设计带来的直接收益。与 Crepe 编辑器的关系Crepe 是 Milkdown 的一体化开箱编辑器在 packages/crepe/src/feature/index.ts 中代码块能力被抽象为CrepeFeature.CodeMirrorSyntax highlighting and editing for code blocks with language support, theme customization, and preview capabilities.从源码结构看Crepe 的代码块编辑走的是CodeMirror 内核见 packages/crepe/src/feature/code-mirror/index.ts与milkdown/plugin-highlightprosemirror-highlight 内核是两条平行的代码块高亮技术路线前者面向富交互的代码编辑体验后者面向纯 Milkdown 插件体系、可与任意 preset 自由组合。插件开发者可根据使用场景二选一在自定义组装编辑器中使用milkdown/plugin-highlight在 Crepe 中则通过 CodeMirror feature 配置语言与主题。CHANGELOG 7.21.0 中的perf: lazy initialize CodeMirror for off-screen code blocks (#2313)也印证了 Crepe 侧对代码块性能的持续优化方向。版本演进时间线CHANGELOG 深度解读CHANGELOG.md 记录了 7.16.0 到 7.22.1 共 15 个版本的发布历史。需要说明的是Milkdown 使用 changesets 做版本管理因此该文件除 highlight 专属条目外也聚合了同版本发布周期内其他包core、ctx、utils、components、preset 等的变更说明阅读时可按fix(...)/feat(...)的包名前缀定位与高亮插件直接相关的内容。7.16.0Minor插件诞生本版本是milkdown/plugin-highlight的首次亮相feat: add new highlight plugin (#2067)—— 插件正式加入 Milkdown 插件体系fix: missing doc tag for highlight plugin—— 同期补上了highlight、highlightPluginConfig、highlightPlugin等文档标签这些标签正是 docs/api/plugin-highlight.md 中三个 API 锚点的来源chore: enable knip and remove dead code and export (#2099)—— 引入 knip 清理死代码保证了插件薄封装的整洁度。同期还发布了test: improve unit test of transformer (#2109)与ci: add pkg-pr-new (#2082)后者让每个 PR 都能发布即时预览包对插件后续迭代的验证效率意义重大。7.17.0Minor粘贴规则与异步预览feat: add paste rule (#2126)—— 为代码块等场景补充了粘贴规则feat: support to render async preview in code block (#2117)—— 代码块支持异步渲染预览如 Mermaid 等依赖异步加载的内容。该版本的修复集中在代码块体验的边界场景属于与高亮插件共享发布周期的相邻能力增强。7.17.17.19.2基础设施与稳定性7.17.1发布流水线迁移到 OIDC 短时令牌认证无面向用户的变更7.17.2升级 prosemirror 相关依赖版本7.18.0实现健壮的邮箱自动链接正则与 E2E 测试、tooltip 自动更新7.19.x聚焦 Google Docs 粘贴表格的解析修复、transformer 行内代码加粗/斜体组合序列化修复fix(transformer): inline code with bold/italic marks produces wrong markdown (#2281)。其中 7.19.1 的fix(transformer)与高亮插件的inline code场景存在语义关联——行内代码标记与加粗/斜体混排时 Markdown 序列化错误会直接影响代码样式的还原正确性。7.20.0Minor7.21.3周边能力扩展7.20.0新增顶栏TopBar、Crepe 集成 upload 插件、image-block 的maxWidth/maxHeight配置7.21.0MinorAI 能力大版本——新增 OpenAI / Anthropic 提供方、DiffStreaming 合并进CrepeFeature.AI、per-block diff、流式替换选区等同时perf: lazy initialize CodeMirror for off-screen code blocks (#2313)优化了离屏代码块的初始化性能7.21.3fix: serialize marks spanning multiple nodes as one continuous span (#2405)修复了跨节点 mark 序列化为一个连续 span 的问题同样与代码高亮中 mark 的呈现质量相关。7.22.0MinorPrism 重高亮修复与性能优化这是与高亮插件直接相关度最高的版本fix(prism): re-highlight non-first code blocks on language change (#2440)—— 修复了切换语言后非首个代码块不重新高亮的缺陷。从fix(prism)前缀可以确认该修复落在 Refractor/Prism 解析路径上当文档中存在多个代码块且用户修改其中一个的语言时需确保所有受影响的代码块而非仅第一个触发重高亮perf: reduce per-keystroke cost in keepTableAlignPlugin and prismPlugin (#2436)—— 降低prismPlugin的每按键开销减少高亮重算对输入流畅度的影响build: upgrade to typescript 7 native compiler (#2418)—— 构建链升级属于对插件可维护性的间接增强。7.22.1Patch补丁修复fix(components): sync readonly code block updates (#2455)—— 只读模式下代码块更新的同步问题fix(preset-commonmark): make the inline code mark not inclusive (#2451)与fix(prose): respect inline code in mark input rules (#2445)—— 行内代码 mark 的包含性与输入规则修复保证代码语法标记的边界行为正确。至此插件随 Milkdown 版本稳定迭代依赖同步更新为milkdown/core7.22.1、milkdown/ctx7.22.1、milkdown/utils7.22.1。测试验证高亮行为是如何被保障的插件的单元测试位于 src/test/highlight.spec.ts它使用 Sugar High 解析器createParser()来自 prosemirror-highlight完整演示了配置 → 组装 → 渲染的最小闭环// 来自 packages/plugins/plugin-highlight/src/__test__/highlight.spec.ts function createEditor() { const parser createParser() const editor Editor.make() editor .config((ctx) { ctx.set(highlightPluginConfig.key, { parser }) }) .use(commonmark) .use(highlight) return editor }测试用例用defaultValueCtx注入一个console.log(Hello, world!)的 JS 代码块创建编辑器后断言视图 DOM 中生成的spantoken 结构。从快照可以看到 Sugar High 的着色输出形态每个 token 带sh__token--identifier、sh__token--string、sh__token--sign等语义化 class并通过stylecolor: var(--sh-xxx);引用 CSS 变量。这意味着你可以通过覆盖--sh-*CSS 变量来定制配色而无需改动插件本身——这也是该插件测试同时充当了使用范本的原因。常见问题与排查建议报错 Highlight plugin requires a parser to be set in the highlightPluginConfig.说明highlightPluginConfig中未注入parser。检查是否在config回调中执行了ctx.set(highlightPluginConfig.key, { parser })且parser来自四个子路径之一src/index.ts 会在缺失时主动抛错切换代码块语言后部分代码块不更新7.22.0 已修复 Prism 路径的非首个代码块不重高亮问题请确认版本不低于 7.22.0对应修复 [#2440]输入卡顿高亮重算属于每按键开销的一部分7.22.0 已优化prismPlugin的每按键成本[#2436]如仍感卡顿可考虑换用 Sugar High 这类更轻量的解析器或限制文档内代码块数量代码块与 Crepe 的关系在 Crepe 中代码块由CrepeFeature.CodeMirror默认启用驱动milkdown/plugin-highlight适用于自组装编辑器两者技术路线不同勿混用配置。从 7.16.0 的首次发布到 7.22.1 的稳定迭代milkdown/plugin-highlight用薄封装 解析器可插拔的架构为 Milkdown 生态提供了覆盖 Shiki、Lowlight、Refractor、Sugar High 四套引擎的统一高亮入口。对开发者而言掌握highlightPluginConfig的注入方式与四种createParser的差异即可在自组装编辑器中获得与官方一致、可自由定制主题的代码高亮体验。【免费下载链接】milkdown Plugin driven WYSIWYG markdown editor framework.项目地址: https://gitcode.com/GitHub_Trending/mi/milkdown创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
