Markdown以其轻量级、对LLM友好的特性，已成为技术文档与AI内容生成的主流格式。然而，传统的Markdown渲染器在面对AI流式输出、复杂公式图表渲染等场景时，常常暴露出性能瓶颈、插件兼容性差及交互闪烁等问题。
为了解决这些痛点，Ant Design团队正式推出了X-Markdown——一个专为AI流式对话场景深度优化的Markdown渲染器。作为Ant Design官方的解决方案，只需执行 npm i @ant-design/x-markdown，即可获得一套高性能、流式友好、插件开箱即用的渲染方案，并支持通过扩展语法实现丰富的生成式UI表达。
核心特性一览
✨ 流式友好，专为 AI 打字机式输出优化
- 通过智能的缓存与补全机制，对流式返回的不完整Token实现无闪烁的增量渲染。
- 整个渲染过程零闪烁、无页面回流，确保了如打字机般的丝滑用户体验。
- 同时兼容全量渲染模式，可在不同场景间无缝切换。
🎨 极致可定制
- 支持使用自定义React组件替换任意原生的Markdown元素（例如，用
<CustomH2> 替换 ## 标题）。
- 内置主题系统，可轻松适配暗色/亮色模式或匹配品牌视觉风格。
- 采用插件化架构，功能扩展灵活便捷，满足个性化需求。
🔐 默认安全，杜绝 XSS 风险
- 绝不使用
dangerouslySetInnerHTML，从设计源头规避XSS攻击风险。
- 所有输出的HTML内容均会经过严格的 DOMPurify 安全过滤，确保内容安全。
🔌 丰富插件生态
提供开箱即用的插件支持，包括：
- LaTeX 数学公式 (基于 KaTeX)
- 代码高亮 (集成 highlight.js)
- Mermaid 图表 (流程图、时序图、甘特图等)
- 支持自定义插件机制，轻松接入业务专属功能
⚡ 高性能 & 轻量级
- 基于高效的 marked 库构建，继承了其优异的性能与标准的兼容性。
- 编译器延迟极低，无需长时间缓存或阻塞主线程。
- 在保持轻量体积的同时，完整支持 CommonMark 与 GitHub Flavored Markdown (GFM) 标准。
性能实测对比
为了客观评估性能，我们进行了以下基准测试：
- 测试环境：Apple M3 Pro (18GB内存)，macOS 15.5
- 测试工具：使用 Playwright 自动化测试框架进行多轮渲染捕获。
- 测试内容：针对包含表格、公式、代码块等结构的短(250字符)、中(1500字符)、长(8000字符)三类文本进行渲染。
核心结论
- 渲染流畅性：X-Markdown 在平均帧率上表现最优，尤其是在中长文本场景下优势明显，确保了流畅的滚动与交互体验。
- 内存效率：在长文本渲染后，X-Markdown 的内存增量（约19MB）显著低于对比方案（如streamdown的39MB），显示出更优的资源管理能力，适合长时间运行的高负载AI应用。
- 运行稳定性：X-Markdown 的帧率标准差更低，表明其渲染过程更加稳定，抖动更少。
快速上手示例
安装后，您可以轻松地在React应用中使用：
import React from 'react';
import { XMarkdown } from '@ant-design/x-markdown';
const content = `# Hello World
欢迎使用 **XMarkdown**！`;
const App = () => <XMarkdown content={content} />;
export default App;
更多高级用法（如自定义组件、使用插件等），请查阅官方文档。
开源共建，赋能 AI 应用生态
X-Markdown 现已正式开源，并采用MIT协议。我们诚挚邀请社区开发者共同参与建设：
- 开发者：欢迎体验、反馈问题、提交Issue或Pull Request。
- 企业团队：可将X-Markdown集成到实际项目中，共同推动流式渲染标准的最佳实践。
- AI 应用构建者：如果您正在使用 React 或 Ant Design 开发现代化Web应用，并受困于Markdown渲染的性能、安全或交互体验问题，X-Markdown 或将成为您技术栈中关键的一环。
我们相信，强大的工具源于社区的协作。欢迎在 GitHub Discussions 中提出您的想法与疑问，让我们一起为下一代AI应用打造更卓越的内容呈现体验。
| 
发表于 4 天前
|
查看: 14|
回复: 0
