@ant-design/x-markdown 旨在提供流式友好、强拓展性和高性能的 Markdown 渲染器。提供流式渲染公式、代码高亮、mermaid 等能力。

✨ 特性

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

• 🚀 为速度而生。
• 🤖 流式友好，大模型 Markdown 渲染解决方案。
• ⬇️ 低级编译器，用于解析 Markdown，无需长时间缓存或阻塞。
• ⚖️ 轻量级，同时实现所有支持的风格和规范的 markdown 功能。
• 🔐 默认安全，无 dangerouslySetInnerHTML XSS 攻击。
• 🎨 可自定义组件，支持传入自定义组件替换任意 Markdown 元素，如用自定义组件替换 ## hi 对应的 <h2>。
• 🔧 丰富的插件，有很多插件可供选择。
• 😊 兼容，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。

浏览器引入

在浏览器中使用 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 提供了主题可供选择。主题详情查看主题。