SuperAPI AI 工具集

markstream-custom-components

前端与建站

查看项目

更新于 10-15 23:41

技能介绍

用途:当任务需要改变 Markstream 对特定节点或自定义标签的渲染方式时使用本技能。开始前应先阅读 references/patterns.md 再选择覆盖策略。

主要能力与分类:一是内置覆盖,替换 image、link、code_block、mermaid、d2、inline_code 等已有渲染器;二是自定义标签,支持 thinking 等受信任的类 HTML 标签;三是解析器级改造,需要 token 转换或 AST 重塑,此时应离开本技能改用底层 parser hooks。

使用方式:优先使用作用域映射。Vue、Vue 2、Svelte 及共享 Angular 注册使用 setCustomComponents(customId, mapping),并传入相同的 customId / custom-id。React 自定义标签优先使用渲染器本地的 streamingComponents(解析器支撑节点)或 htmlComponents(净化后的 HTML props 加 children),可用 defineStreamingComponents(...) / defineHtmlComponents(...) 获得类型化映射;setCustomComponents 保留给内置节点覆盖或共享旧式注册。Svelte 与 Angular 也可传渲染器本地 customComponents 映射。Vue 3 应用/插件中可从 markstream-vue 导入 { VueRendererMarkdown } 并以 { components } 安装,使覆盖限定在应用实例内。

实施建议:从最小安全覆盖开始,叶子节点(image、link、inline_code、mermaid)比容器节点(heading、paragraph、list_item)更易处理;只改 Mermaid 时用 mermaid 而非 code_block。含内部 Markdown 的受信任标签,用嵌套渲染器渲染 node.content,并向嵌套渲染器传同一自定义标签白名单;平滑流式父级内的嵌套渲染器会自动抑制双重节奏,不要给子渲染器加 smooth-streaming。React 中 streamingComponents 的键会自动进入有效自定义标签列表,无需在 customHtmlTags 重复。保留 node、loading、indexKey、customId、isDark 等 props 与清理逻辑;mermaid 与 infographic 覆盖需保留 estimatedPreviewHeightPx 以维持异步预览高度稳定。作用域不再需要时用 removeCustomComponents(customId) 移除临时映射。

验证与限制:用本地 demo、针对性测试或文档构建做最小验证,并说明实现是否对重复与嵌套自定义标签安全。默认决策为作用域覆盖优先、叶子节点优先、customHtmlTags 加作用域组件优先于 parser hooks、React 渲染器本地映射优先于注册表变更。相关文档目标包括 docs/guide/component-overrides.md、custom-components.md、react-components.md、components.md、advanced.md。资料未提供具体版本要求、性能数据与收费信息。