用途:这个技能只做一件事——用 @ant-design/x-markdown 正确且可预测地渲染 Markdown。它属于渲染层,不负责聊天状态。x-markdown 应在 @ant-design/x 与 @ant-design/x-sdk 已产出消息数据后,再用来渲染内容。
包边界:UI 层 @ant-design/x 负责聊天界面、气泡列表、发送器与富交互组件;数据层 @ant-design/x-sdk 负责 provider、请求、流式数据流与状态管理;渲染层 @ant-design/x-markdown 负责 Markdown 解析、流式渲染、插件、主题与自定义渲染器。
主要能力:基础渲染与包边界;LLM 流式输出与不完整语法处理;面向富聊天或数据展示块的自定义组件映射;插件、主题与安全渲染默认值。
使用方式:最小示例为 import { XMarkdown } from '@ant-design/x-markdown'; export default () => <XMarkdown content="# Hello" />;。推荐先看 CORE.md 让纯渲染跑起来;内容按块到达时再看 STREAMING.md;需要自定义标签、插件、语法块或主题时看 EXTENSIONS.md;用 API.md 确认 prop 名称与默认值,不要猜测。
开发规则:保持稳定的 components 对象,不要在每次渲染时新建内联组件映射;最后一块用 streaming.hasNextChunk = false,否则未完成的占位符不会刷新为最终内容;谨慎处理原始 HTML,需要让原始 HTML 以文本显示时优先用 escapeRawHtml;若必须渲染原始 HTML,保持 dompurifyConfig 显式且最小;主题覆盖要小,从 x-markdown-light 或 x-markdown-dark 出发,只覆盖需要的变量;自定义组件若依赖完整语法,按 streamStatus === 'done' 分支。
协作边界:适配 API 形态用 x-chat-provider;配置传输、鉴权、重试或流式分隔符用 x-request;在 React 中管理聊天状态用 use-x-chat;当内容本身需要 Markdown 解析、流式恢复或富组件渲染时用 x-markdown。
适用场景:聊天中的富助手回复(x-chat-provider → x-request → use-x-chat → x-markdown);内置 provider 的 Markdown 回复(x-request → use-x-chat → x-markdown);独立 Markdown 页面或文档查看器(仅用 x-markdown)。限制:它不是聊天状态工具,具体 prop、默认值与安装命令以官方文档 API.md 等资料为准,本次资料未提供更完整的价格或平台细节。