✨ 特性

使用 marked 作为基础 markdown 渲染器，具备 marked 的所有特性。

• 🚀 为速度而生。
• 🤖 流式友好，大模型Markdown渲染解决方案。
• ⬇️ 低级编译器，用于解析 Markdown，无需长时间缓存或阻塞。
• ⚖️ 轻量级，同时实现所有支持的风格和规范的 markdown 功能。
• 🔐 默认安全，无 dangerouslySetInnerHTML XSS 攻击。
• 🎨 可自定义组件，传递你自己的组件来代替 <h2> for ## hi。
• 🔧 丰富的插件，有很多插件可供选择。
• 😊 兼容，100% 符合 CommonMark，100% 符合 GFM 插件。

兼容环境

与 marked 保持一致。为了提高整体 markdown 对于系统的兼容性支持，可以自定义 polyfill，来提高兼容性。

Edge	Firefox	Chrome	Safari	Opera
>= 92	>= 90	>= 92	>= 15.4	>= 78

支持的 Markdown 规范

• Markdown 1.0.0
• CommonMark
• GitHub Flavored Markdown (GFM)

📦 安装

使用 npm 或 yarn 或 pnpm 或 bun 安装 或 utoo 安装

我们推荐使用 npm 或 yarn 或 pnpm 或 bun 或 utoo 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。如果你的网络环境不佳，推荐使用 cnpm。

npm install @ant-design/x-markdown

yarn add @ant-design/x-markdown

pnpm add @ant-design/x-markdown

ut install @ant-design/x-markdown

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 XMarkdown。

我们在 npm 发布包内的 dist 目录下提供了 x-markdown.js、x-markdown.min.js 和 x-markdown.min.js.map。

强烈不推荐使用已构建文件，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。

注意：x-markdown.js 、 x-markdown.min.js 和 x-markdown.min.js.map。依赖 react、react-dom请确保提前引入这些文件。

示例

import React from 'react';
import { XMarkdown } from '@ant-design/x-markdown';
const content = `
# Hello World

### 欢迎使用 XMarkdown！

- 项目1
- 项目2
- 项目3
`;

const App = () => <XMarkdown content={content} />;

export default App;

插件

@ant-design/x-markdown 提供了丰富的插件，你可以通过 plugins 属性来使用这些插件。插件详情查看插件集。

主题

@ant-design/x-markdown 提供了主题可供选择。主题详情查看主题。

🌈 开箱即用的大模型企业级组件

@ant-design/x 基于 RICH 交互范式，在不同的交互阶段提供了大量的原子组件，帮助你灵活搭建你的 AI 应用，详情点击这里。

⚡️ 对接模型智能体服务 & 高效管理数据流

@ant-design/x-sdk 提供了一系列的工具API，旨在提供开发者开箱即用的管理AI应用数据流，详情点击这里。

如何贡献

在任何形式的参与前，请先阅读 贡献者文档。如果你希望参与贡献，欢迎提交 Pull Request，或给我们 报告 Bug。

强烈推荐阅读 《提问的智慧》、《如何向开源社区提问题》 和 《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》，更好的问题更容易获得帮助。

社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 GitHub Discussions 提问时，建议使用 Q&A 标签。

1. GitHub Discussions
2. GitHub Issues