XMarkdown Markdown 渲染

流式友好的 Markdown 渲染组件，对齐 @ant-design/x-markdown 的核心能力（当前内置于本包，非独立 npm 包）。

何时使用

• 渲染大模型输出的 Markdown 内容。
• 需要流式追加展示，并显示尾部光标。
• 代码块希望自动使用 CodeHighlighter / Mermaid。

代码演示

基本

基础 Markdown 渲染，代码块默认走 CodeHighlighter。

Ant Design X Markdown 流式友好的 Markdown 渲染（Vue Next）。 支持 GFM 风格列表 支持 链接 支持行内 code import { XMarkdown } from 'ant-design-x-vue-next'; export default () => <XMarkdown content="# Hello" />;

<script setup lang="tsx">
import { XMarkdown } from 'ant-design-x-vue';

defineOptions({ name: 'AXXMarkdownBasic' });

const content = `# Ant Design X Markdown

流式友好的 Markdown 渲染（Vue Next）。

- 支持 **GFM** 风格列表
- 支持 [链接](https://x.ant.design)
- 支持行内 \`code\`

\`\`\`ts
import { XMarkdown } from 'ant-design-x-vue-next';

export default () => <XMarkdown content="# Hello" />;
\`\`\`
`;

defineRender(() => {
  return <XMarkdown content={content} openLinksInNewTab />;
});
</script>

隐藏源代码

流式输出

通过 streaming.hasNextChunk 与 tail 模拟流式输出。

<script setup lang="tsx">
import { Button, Space } from 'ant-design-vue';
import { ref } from 'vue';
import { XMarkdown } from 'ant-design-x-vue';

defineOptions({ name: 'AXXMarkdownStreaming' });

const full = `## 流式输出演示

正在生成回复：

1. 解析需求
2. 组织答案
3. 输出 Markdown

> 尾部光标会在 \`hasNextChunk\` 为 true 时显示。
`;

const content = ref('');
const hasNextChunk = ref(false);
let timer: ReturnType<typeof setInterval> | null = null;

const start = () => {
  content.value = '';
  hasNextChunk.value = true;
  let i = 0;
  if (timer) clearInterval(timer);
  timer = setInterval(() => {
    i += 3;
    content.value = full.slice(0, i);
    if (i >= full.length) {
      hasNextChunk.value = false;
      if (timer) clearInterval(timer);
      timer = null;
    }
  }, 40);
};

defineRender(() => {
  return (
    <div>
      <Space style={{ marginBottom: 16 }}>
        <Button type="primary" onClick={start}>
          开始流式
        </Button>
      </Space>
      <XMarkdown
        content={content.value}
        streaming={{ hasNextChunk: hasNextChunk.value, tail: true }}
      />
    </div>
  );
});
</script>

隐藏源代码

数学公式（LaTeX）

通过 Latex() 插件渲染 KaTeX 公式（$...$ / $$...$$）。

数学公式 行内公式：E=mc2，以及 α+β。 块级公式： ∫−∞∞​e−x2dx=π​

<script setup lang="tsx">
import { XMarkdown, Latex } from 'ant-design-x-vue';

defineOptions({ name: 'AXXMarkdownLatex' });

const content = `# 数学公式

行内公式：$E = mc^2$，以及 $\\alpha + \\beta$。

块级公式：

$$
\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
$$
`;

defineRender(() => {
  return <XMarkdown content={content} config={{ extensions: Latex() }} />;
});
</script>

隐藏源代码

API

XMarkdownProps

属性	说明	类型	默认值
content	Markdown 内容	string	-
children	Markdown 内容（content 别名 / 默认插槽）	string	-
components	自定义标签组件映射	Record<string, Component>	默认 code → CodeHighlighter/Mermaid
streaming	流式配置（hasNextChunk 增量缓存；enableAnimation 淡入）	{ hasNextChunk?; tail?; enableAnimation?; animationConfig?; incompleteMarkdownComponentMap? }	-
config	Marked.js 扩展配置	MarkedExtension	-
openLinksInNewTab	链接新标签打开	boolean	false
escapeRawHtml	转义 Markdown 中的原始 HTML（不信任模型输出时请开启）	boolean	false
dompurifyConfig	DOMPurify 配置	Config	-
disableDefaultStyles	关闭内置默认样式	boolean | DefaultStyleTag[]	-

Latex 插件

import { XMarkdown, Latex } from 'ant-design-x-vue-next';

<XMarkdown content={md} config={{ extensions: Latex() }} />

企业使用建议

• 对大模型输出务必开启 escapeRawHtml，并按需收紧 dompurifyConfig。
• 自定义组件标签会自动合并进 DOMPurify ADD_TAGS；不要手动关闭消毒。
• 链接新开页请配合 openLinksInNewTab（自动带 rel="noopener noreferrer"）。
• 流式场景请设置 streaming.hasNextChunk: true，启用增量 token 缓存。

说明

• 解析引擎：marked（与官方一致）。
• 安全清洗：dompurify（含 happy-dom 兼容补丁，失败时 fail-closed，绝不回退原始 HTML）。
• 已覆盖常用渲染、链接、代码块、流式尾标、增量 token 缓存、LaTeX/KaTeX 与 AnimationText。
• 仍在对齐：DebugPanel、独立包拆分。

贡献者

贡献者

正在加载贡献者信息...