代码示例

用于渲染 LLM 返回的流式 Markdown。下面按 @ant-design/x-markdown@2.0.0 的「代码示例」排列。每一则都是 Vue 已经实现的能力。

可编辑的预览在 在线体验，和基础用法是同一块输入框。

基础用法

# Hello World ### Welcome to XMarkdown! - Item 1 - Item 2 - Item 3 ```js const a = 1; ```

Hello World

Welcome to XMarkdown!

• Item 1
• Item 2
• Item 3

const a = 1;

基础用法

markdown 基础语法渲染。文本框里改内容会立刻重绘。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownBasicV2' });

import { computed, ref } from 'vue';
import { Flex, Input, theme } from 'ant-design-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import '@ant-design-x-vue/x-markdown/themes/light.css';
import '@ant-design-x-vue/x-markdown/themes/dark.css';
import { isDarkColor } from '../_shared/playground-shell';

const { token } = theme.useToken();
const markdownClass = computed(() => (
  isDarkColor(token.value.colorBgContainer) ? 'x-markdown-dark' : 'x-markdown-light'
));

const content = ref(`# Hello World

### Welcome to XMarkdown!

- Item 1
- Item 2
- Item 3

\`\`\`js
const a = 1;
\`\`\`
`);

defineRender(() => (
  <Flex vertical gap={16}>
    <Input.TextArea v-model:value={content.value} rows={8} />
    <div style={{
      border: `1px solid ${token.value.colorBorderSecondary}`,
      borderRadius: '4px',
      padding: '16px',
      minHeight: '120px',
    }}>
      <XMarkdown className={markdownClass.value} content={content.value} />
    </div>
  </Flex>
));
</script>

隐藏源代码

流式处理

Status: idle

流式处理

未完成内容逐段送入，结束后关闭 streaming。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownStreamingV2' });

import { computed, ref } from 'vue';
import { XMarkdown, useStreaming } from '@ant-design-x-vue/x-markdown';
import { Button, Flex, Space, theme } from 'ant-design-vue';

const { token } = theme.useToken();
const wrapStyle = computed(() => ({
  border: `1px solid ${token.value.colorBorderSecondary}`,
  borderRadius: '4px',
  padding: '16px',
  minHeight: '120px',
}));

const fullContent = `# Streaming Demo

Content appears **progressively**.

- Step 1
- Step 2
- Step 3
`;

const content = ref('');
const streaming = ref(false);
const { status, displayedContent } = useStreaming({
  content,
  streaming,
  onComplete: () => console.log('stream complete'),
});

const startStream = () => {
  content.value = '';
  streaming.value = true;
  let i = 0;
  const timer = setInterval(() => {
    if (i < fullContent.length) {
      content.value = fullContent.slice(0, i + 3);
      i += 3;
    } else {
      streaming.value = false;
      clearInterval(timer);
    }
  }, 50);
};

defineRender(() => (
  <Flex vertical gap={16}>
    <Space>
      <Button type="primary" onClick={startStream}>
        Start streaming
      </Button>
      <span>Status: {status.value}</span>
    </Space>
    <div style={wrapStyle.value}>
      <XMarkdown content={displayedContent.value} streaming={streaming.value} />
    </div>
  </Flex>
));
</script>

隐藏源代码

插件使用

plugin

Ship the TODO before Friday.

插件使用

plugins 的 transform 在 marked 之前改写字符串。公式、高亮、Mermaid 见对应插件页。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownPluginsV2' });

import { ref } from 'vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { Flex, Switch } from 'ant-design-vue';

const enabled = ref(true);
const content = 'Ship the TODO before Friday.';

const emphasizeTodo = {
  transform(source: string) {
    return source.replaceAll('TODO', '**TODO**');
  },
};

defineRender(() => (
  <Flex vertical gap={12} align="flex-start">
    <Flex align="center" gap={8} style={{ alignSelf: 'flex-start' }}>
      <Switch v-model:checked={enabled.value} />
      <span>plugin</span>
    </Flex>
    <XMarkdown content={content} plugins={enabled.value ? [emphasizeTodo] : []} />
  </Flex>
));
</script>

隐藏源代码

自定义组件

# Custom Blue Title ## Normal H2 Paragraph with **bold** and *italic*.

Custom Blue Title

Normal H2

Paragraph with bold and italic.

自定义组件

components 把标签映射成自己的 Vue 组件。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownComponentsV2' });

import { computed, ref, h } from 'vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import type { ComponentProps } from '@ant-design-x-vue/x-markdown';
import { Flex, Input, theme } from 'ant-design-vue';

const { token } = theme.useToken();
const wrapStyle = computed(() => ({
  border: `1px solid ${token.value.colorBorderSecondary}`,
  borderRadius: '4px',
  padding: '16px',
  minHeight: '100px',
}));

const CustomH1 = (props: ComponentProps) => {
  return h('h1', { style: { color: '#1890ff' }, ...props }, props.children);
};

const components = {
  h1: CustomH1,
};

const content = ref(`# Custom Blue Title

## Normal H2

Paragraph with **bold** and *italic*.
`);

defineRender(() => (
  <Flex vertical gap={16}>
    <Input.TextArea v-model:value={content.value} rows={6} />
    <div style={wrapStyle.value}>
      <XMarkdown content={content.value} components={components} />
    </div>
  </Flex>
));
</script>

隐藏源代码

公式

Pythagoras: $$a^2+b^2=c^2$$.

$$S=\pi r^2$$

公式

Latex 插件。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownLatexV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import Latex from '@ant-design-x-vue/x-markdown/plugins/Latex';

const content = [
  'Pythagoras: $a^2 + b^2 = c^2$.',
  '',
  '$$',
  'S = \\pi r^2',
  '$$',
].join('\n');

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

隐藏源代码

代码高亮

A fenced block picks up the language class:

ts
export const answer = 42;

Inline const x = 1 stays a plain code tag.

代码高亮

HighlightCode。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownHighlightV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import HighlightCode from '@ant-design-x-vue/x-markdown/plugins/HighlightCode';
import { codeRenderer } from '../_shared/markdown-code';

const content = [
  'A fenced block picks up the language class:',
  '',
  '```ts',
  'export const answer = 42;',
  '```',
  '',
  'Inline `const x = 1` stays a plain code tag.',
].join('\n');

const Code = codeRenderer((props, lang, text) => {
  if (!props.block) return <code class={props.className}>{text}</code>;
  return <HighlightCode lang={lang} children={text} />;
});

defineRender(() => (
  <XMarkdown content={content} components={{ code: Code }} />
));
</script>

隐藏源代码

Mermaid

```mermaid
graph TD
  A[Start] --> B[Answer]
```

Mermaid

围栏语言是 mermaid 时交给 Mermaid。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownMermaidV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import Mermaid from '@ant-design-x-vue/x-markdown/plugins/Mermaid';
import { codeRenderer } from '../_shared/markdown-code';

const isClient = typeof window !== 'undefined';

const content = [
  '```mermaid',
  'graph TD',
  '  A[Start] --> B[Answer]',
  '```',
].join('\n');

const Code = codeRenderer((props, lang, text) => {
  if (lang === 'mermaid') return <Mermaid children={text} />;
  return <code class={props.className}>{text}</code>;
});

defineRender(() => (
  isClient
    ? <XMarkdown content={content} components={{ code: Code }} />
    : <pre>{content}</pre>
));
</script>

隐藏源代码

主题

Theme sample

Body text with a link.

• one
• two

Theme sample

Body text with a link.

• one
• two

主题

light / dark 类名。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownThemesV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { Flex } from 'ant-design-vue';
import '@ant-design-x-vue/x-markdown/themes/light.css';
import '@ant-design-x-vue/x-markdown/themes/dark.css';

const content = [
  '# Theme sample',
  '',
  'Body text with a [link](https://x.ant.design).',
  '',
  '- one',
  '- two',
].join('\n');

defineRender(() => (
  <Flex gap={16} wrap="wrap">
    <div style={{ flex: '1 1 240px', padding: '12px', background: '#fff' }}>
      <XMarkdown className="x-markdown-light" content={content} />
    </div>
    <div style={{ flex: '1 1 240px', padding: '12px', background: '#141414' }}>
      <XMarkdown className="x-markdown-dark" content={content} />
    </div>
  </Flex>
));
</script>

隐藏源代码

自定义标记 tokenizer

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

自定义标记 tokenizer

用 marked extensions 把 % 标题解析成 heading。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownTokenizerV2' });

import { XMarkdown, type Token } from '@ant-design-x-vue/x-markdown';
import '@ant-design-x-vue/x-markdown/themes/light.css';

const content = `% Level 1 Heading\n %% Level 2 Heading \n %%% Level 3 Heading\n %%%% Level 4 Heading`;

interface PercentHeadingToken extends Token {
  type: 'percentHeading';
  depth: number;
  text: string;
}

const percentHeading = {
  name: 'percentHeading',
  level: 'block' as const,
  start(src: string): number {
    return src.indexOf('%');
  },
  tokenizer(src: string): PercentHeadingToken | undefined {
    const rule = /^%+([^\n]+)(?:\n|$)/;
    const match = rule.exec(src);
    if (!match) return undefined;
    const depth = match[0].match(/^%+/)?.[0].length || 0;
    return {
      type: 'percentHeading',
      raw: match[0],
      depth: Math.min(depth, 6),
      text: match[1].trim(),
      tokens: [],
    };
  },
  renderer(token: PercentHeadingToken): string {
    return `<h${token.depth}>${token.text}</h${token.depth}>\n`;
  },
};

defineRender(() => (
  <XMarkdown
    className="x-markdown-light"
    content={content}
    config={{ extensions: [percentHeading] }}
  />
));
</script>

隐藏源代码

标记处理 walkTokens

Please check: Invalid link

标记处理 walkTokens

用 config.walkTokens 改写或拦截 token。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownWalkTokensV2' });

import { XMarkdown, type Token } from '@ant-design-x-vue/x-markdown';
import '@ant-design-x-vue/x-markdown/themes/light.css';

const content = `Please check: [This is a link](https://xxxxx)`;
const message = 'Invalid link';

const walkTokens = (token: Token) => {
  if (token.type === 'link') {
    // Fake validation: replace illegal links with plain text.
    delete (token as any).tokens;
    token.raw = message;
    token.text = message;
    token.type = 'text';
  }
};

defineRender(() => (
  <XMarkdown
    className="x-markdown-light"
    content={content}
    config={{ walkTokens }}
  />
));
</script>

隐藏源代码

渲染前处理 renderer

🚀 Render Code Text

<html><form><button>Test</button><form></html>

渲染前处理 renderer

自定义 marked renderer，再配合 components 替换标签。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownRendererV2' });

import { XMarkdown, type ComponentProps } from '@ant-design-x-vue/x-markdown';
import '@ant-design-x-vue/x-markdown/themes/light.css';

const content = '# Render Code Text\n\n<html><form><button>Test</button><form></html>';

const DataRender = (props: ComponentProps) => {
  return <>{String((props as any)['data-info'] ?? '')}</>;
};

defineRender(() => (
  <XMarkdown
    className="x-markdown-light"
    content={content}
    components={{ data: DataRender }}
    config={{
      renderer: {
        html(token: { text?: string }) {
          return `<data data-info="${token.text ?? ''}"></data>`;
        },
        heading({ tokens, depth }: { tokens: any[]; depth: number }) {
          const text = (this as any).parser.parseInline(tokens);
          return `<h${depth}>🚀 ${text}</h${depth}>`;
        },
      },
    }}
  />
));
</script>

隐藏源代码

中文链接处理

Untreated

Treated

中文链接处理

裸 URL 后紧跟中文或括号时，截断链接并保留后缀文本。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownChineseLinkV2' });

import { onUnmounted, ref, watchEffect } from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { XMarkdown, type Token } from '@ant-design-x-vue/x-markdown';
import { Button, Flex, Skeleton } from 'ant-design-vue';

const content =
  '[点此访问：Ant Design X](https://ant.design/index-cn)\n\nhttps://www.abc.com(abc)\n\n**AntDesign的官网是：https://ant.design/index-cn/在官网上，您可以了解更多AntDesign的信息**\n\nAntDesign的官网是：https://ant.design/index-cn/1?a=1&b=2。在官网上，您可以了解更多AntDesign的信息\n\nAntDesign的官网是：https://ant.design/index-cn/。在官网上，您可以了解更多AntDesign的信息\n\nAntDesign的官网是：https://ant.design/index-cn/1?a=1&b=2，在官网上，您可以了解更多AntDesign的信息';

const findFirstForbiddenCharIndex = (() => {
  const FORBIDDEN_CHARS = new Set(['(', ')', '[', ']', '{', '}', '（', '）', '「', '」', '。', '，']);
  const CHINESE_REGEX = /[\u4e00-\u9fa5]/;
  let segmenter: any = null;

  const getSegmenter = () => {
    if (segmenter !== null) return segmenter;
    if (typeof window !== 'undefined' && 'Intl' in window && 'Segmenter' in (Intl as any)) {
      try {
        segmenter = new (Intl as any).Segmenter('zh', { granularity: 'grapheme' });
      } catch {
        segmenter = null;
      }
    }
    return segmenter;
  };

  const isForbiddenChar = (char: string) => FORBIDDEN_CHARS.has(char) || CHINESE_REGEX.test(char);

  return (str: string): number => {
    if (!str) return -1;
    const seg = getSegmenter();
    if (seg) {
      let index = 0;
      for (const segment of seg.segment(str)) {
        const char = segment.segment;
        if (isForbiddenChar(char)) return index;
        index += char.length;
      }
    } else {
      for (let i = 0; i < str.length; i += 1) {
        if (isForbiddenChar(str[i])) return i;
      }
    }
    return -1;
  };
})();

const renderer = {
  link: (token: Token) => {
    const markdownLinkRegex = /\[[^\]]+\]\([^\s()<>]+(?:\([^\s()<>]*\))?\)/;
    if (!markdownLinkRegex.test(token.raw)) {
      const firstForbiddenCharIndex = findFirstForbiddenCharIndex(token.href || '');
      if (firstForbiddenCharIndex > 0) {
        const href = (token.href || '').slice(0, firstForbiddenCharIndex);
        const rest = (token.href || '').slice(firstForbiddenCharIndex);
        return `<a href=${href} target="_blank">${href}</a>${rest}`;
      }
    }
    return `<a href=${token.href} target="_blank">${token?.text || token.href}</a>`;
  },
};

const LinkSkeleton = () => (
  <Skeleton.Button active size="small" style={{ margin: '4px 0', width: 16, height: 16 }} />
);

const index = ref(0);
const isServer = import.meta.env.SSR;

watchEffect((onCleanup) => {
  if (isServer || index.value >= content.length) return;
  const timerId = setTimeout(() => {
    index.value = Math.min(content.length, index.value + 5);
  }, 20);
  onCleanup(() => clearTimeout(timerId));
});

onUnmounted(() => {
  index.value = content.length;
});

defineRender(() => (
  <Flex vertical gap="small">
    <Button style={{ alignSelf: 'flex-end' }} onClick={() => (index.value = 0)}>
      Re-Render
    </Button>
    <Flex gap="middle">
      <Bubble
        style={{ width: '50%' }}
        content={content.slice(0, index.value)}
        contentRender={(curr) => (
          <XMarkdown paragraphTag="div" content={`### Untreated\n\n${curr}`} />
        )}
        variant="outlined"
      />
      <Bubble
        style={{ width: '50%' }}
        content={content.slice(0, index.value)}
        contentRender={(curr) => (
          <XMarkdown
            streaming={{ hasNextChunk: index.value !== content.length }}
            components={{ 'incomplete-link': LinkSkeleton }}
            config={{ renderer }}
            paragraphTag="div"
            content={`### Treated\n\n${curr}`}
          />
        )}
        variant="outlined"
      />
    </Flex>
  </Flex>
));
</script>

隐藏源代码

XSS 防御

Cross-Site Scripting (XSS) Attack Vectors

1. Stored XSS (Persistent XSS)

2. Reflected XSS (Non-persistent XSS)

Malicious Link)

3. DOM-based XSS

4. Attribute-based XSS

5. Script Tag Injection

6. Event Handler XSS

7. JavaScript Protocol XSS

Click Here

8. SVG Vector XSS

9. Form Input XSS

10. CSS Injection XSS

Test Content

11. Data URI XSS

12. Mouse Event XSS

Hover over this text

13. Button Tag XSS

14. Nested script evasion

XSS 防御

DOMPurify 会去掉危险脚本、事件属性和 javascript: 链接。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownXssV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import '@ant-design-x-vue/x-markdown/themes/light.css';

const scriptTag = '<' + 'script>alert(\'Direct script injection XSS vector\');</' + 'script>';
const iframeSrcdoc = '<' + 'iframe srcdoc="<' + 'script>alert(\'DOM-based XSS - iframe srcdoc injection\')</' + 'script>"></' + 'iframe>';
const nestedScript = '<' + 'scr' + 'ipt>alert(\'Filter evasion\')</' + 'scr' + 'ipt>';

const content = [
  '### Cross-Site Scripting (XSS) Attack Vectors',
  '',
  '#### 1. Stored XSS (Persistent XSS)',
  '<img src=x onerror="alert(\'Stored XSS - Image onerror payload\')">',
  '',
  '#### 2. Reflected XSS (Non-persistent XSS)',
  '[Malicious Link](javascript:alert(\'Reflected XSS - Link click payload\'))',
  '',
  '#### 3. DOM-based XSS',
  iframeSrcdoc,
  '',
  '#### 4. Attribute-based XSS',
  '<iframe src="javascript:alert(\'Attribute-based XSS - src attribute injection\')"></iframe>',
  '',
  '#### 5. Script Tag Injection',
  scriptTag,
  '',
  '#### 6. Event Handler XSS',
  '<img src="invalid.jpg" alt="Test Image" onerror="alert(\'Event handler XSS - onerror payload\')" />',
  '',
  '#### 7. JavaScript Protocol XSS',
  '<a href="javascript:alert(\'JavaScript protocol XSS\')">Click Here</a>',
  '',
  '#### 8. SVG Vector XSS',
  '<svg onload="alert(\'SVG onload event XSS vector\')"></svg>',
  '',
  '#### 9. Form Input XSS',
  '<form action="javascript:alert(\'Form action XSS\')"><input type="text" value="x"></form>',
  '',
  '#### 10. CSS Injection XSS',
  '<div style="background-image: url(javascript:alert(\'CSS background image XSS\'))">Test Content</div>',
  '',
  '#### 11. Data URI XSS',
  '<img src="data:text/html,xss">',
  '',
  '#### 12. Mouse Event XSS',
  '<div onmouseover="alert(\'Mouse event XSS - onmouseover payload\')">Hover over this text</div>',
  '',
  '#### 13. Button Tag XSS',
  '<button onclick="alert(\'Button click XSS vector\')">Click Button</button>',
  '',
  '#### 14. Nested script evasion',
  nestedScript,
].join('\n');

defineRender(() => (
  <XMarkdown className="x-markdown-light" content={content} />
));
</script>

隐藏源代码

流式语法

Mixed

Link

Image

Html

Table

Emphasis

InlineCode

Markdown Source

Click Re-Render to start

Rendered Output

流式语法

未闭合的链接、表格等先占位，不按半截 Markdown 解析。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownStreamingSyntaxV2' });

import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { XMarkdown, type ComponentProps } from '@ant-design-x-vue/x-markdown';
import { Welcome } from 'ant-design-x-vue';
import { Button, Card, Flex, Segmented, Skeleton, theme } from 'ant-design-vue';
import '@ant-design-x-vue/x-markdown/themes/light.css';
import '@ant-design-x-vue/x-markdown/themes/dark.css';
import { isDarkColor } from '../_shared/playground-shell';
import {
  incompleteEmphasisParts,
  streamingFormatDemos,
} from '../_shared/streaming-format';

const { token } = theme.useToken();
const markdownClass = computed(() => (
  isDarkColor(token.value.colorBgContainer) ? 'x-markdown-dark' : 'x-markdown-light'
));

const current = ref(0);
const displayText = ref('');
const isStreaming = ref(false);
let timer = 0;

function startStream() {
  window.clearTimeout(timer);
  const content = streamingFormatDemos[current.value].content;
  displayText.value = '';
  isStreaming.value = true;
  let index = 0;
  const tick = () => {
    if (index <= content.length) {
      displayText.value = content.slice(0, index);
      index += 1;
      timer = window.setTimeout(tick, 30);
    }
    else {
      isStreaming.value = false;
    }
  };
  tick();
}

onMounted(startStream);
watch(current, () => startStream());
onUnmounted(() => window.clearTimeout(timer));

const IncompleteLink = (_props: ComponentProps) => (
  <Skeleton.Button active size="small" style={{ width: '16px', height: '16px', minWidth: '16px' }} />
);

const IncompleteEmphasis = (props: ComponentProps) => {
  const parts = incompleteEmphasisParts(String(props['data-raw'] || ''));
  if (!parts)
    return null;
  if (parts.level === 1)
    return <em>{parts.content}</em>;
  if (parts.level === 2)
    return <strong>{parts.content}</strong>;
  return <em><strong>{parts.content}</strong></em>;
};

const ImageSkeleton = () => <Skeleton.Image active style={{ width: '60px', height: '60px' }} />;
const TableSkeleton = () => <Skeleton.Button active style={{ width: '160px', height: '22px' }} />;
const HtmlSkeleton = () => <Skeleton.Button active style={{ width: '383px', height: '120px' }} />;

const WelcomeCard = (props: Record<string, any>) => (
  <Welcome
    styles={{ icon: { flexShrink: 0 } }}
    icon={props['data-icon']}
    title={props.title}
    description={props['data-description']}
  />
);

const sourceStyle = computed(() => ({
  background: token.value.colorFillQuaternary,
  color: token.value.colorText,
  padding: '12px',
  borderRadius: '4px',
  fontSize: '13px',
  fontFamily: 'monospace',
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-word',
  margin: 0,
  maxHeight: '800px',
  overflow: 'auto',
}));

defineRender(() => (
  <div>
    <Flex gap={8} align="center" wrap="wrap" style={{ marginBottom: '12px' }}>
      <Segmented
        value={current.value}
        options={streamingFormatDemos.map((demo, index) => ({ label: demo.title, value: index }))}
        onChange={(value: string | number) => { current.value = Number(value); }}
      />
      <Button style={{ alignSelf: 'flex-start' }} onClick={startStream} loading={isStreaming.value}>
        Run Stream
      </Button>
    </Flex>
    <Flex gap={16} style={{ width: '100%' }}>
      <Card title="Markdown Source" size="small" style={{ flex: 1, minWidth: 0 }}>
        <div style={sourceStyle.value}>
          {displayText.value || 'Click Re-Render to start'}
        </div>
      </Card>
      <Card
        title="Rendered Output"
        size="small"
        style={{ flex: 1, minWidth: 0, overflow: 'auto' }}
        extra={(
          <Button type="primary" onClick={startStream} loading={isStreaming.value}>
            Re-Render
          </Button>
        )}
      >
        <div style={{ border: `1px solid ${token.value.colorBorderSecondary}`, borderRadius: '4px', padding: '12px', maxHeight: '800px', overflow: 'auto' }}>
          <XMarkdown
            content={displayText.value}
            className={markdownClass.value}
            openLinksInNewTab
            dompurifyConfig={{ ADD_ATTR: ['icon', 'description'] }}
            components={{
              'incomplete-image': ImageSkeleton,
              'incomplete-link': IncompleteLink,
              'incomplete-table': TableSkeleton,
              'incomplete-html': HtmlSkeleton,
              'incomplete-emphasis': IncompleteEmphasis,
              welcome: WelcomeCard,
            }}
            streaming={{
              hasNextChunk: isStreaming.value,
              enableAnimation: true,
            }}
          />
          {isStreaming.value ? <span aria-hidden="true">▋</span> : null}
        </div>
      </Card>
    </Flex>
  </div>
));
</script>

隐藏源代码

流式动画

流式动画

streaming.enableAnimation 让新出现的段落淡入。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownAnimationV2' });

import { onMounted, ref } from 'vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import '@ant-design-x-vue/x-markdown/themes/light.css';

const full = `# 流式动画

这一段会**淡入**。

- 第一行
- 第二行
`;

const content = ref('');

onMounted(() => {
  let i = 0;
  const timer = setInterval(() => {
    i += 2;
    content.value = full.slice(0, i);
    if (i >= full.length) clearInterval(timer);
  }, 40);
});

defineRender(() => (
  <XMarkdown
    className="x-markdown-light"
    content={content.value}
    streaming={{
      hasNextChunk: content.value.length < full.length,
      enableAnimation: true,
      animationConfig: { fadeDuration: 200, easing: 'ease-in-out' },
    }}
  />
));
</script>

隐藏源代码

新标签页打开链接

openLinksInNewTab enabled

Open links in a new tab

• Ant Design
• GitHub

Reference link

This is a reference-style link.

Default (same tab)

Open links in a new tab

• Ant Design
• GitHub

Reference link

This is a reference-style link.

新标签页打开链接

openLinksInNewTab 给链接加上 target="_blank"。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownOpenLinksV2' });

import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { Flex } from 'ant-design-vue';
import '@ant-design-x-vue/x-markdown/themes/light.css';

const content = `
### Open links in a new tab

- [Ant Design](https://ant.design)
- [GitHub](https://github.com)

### Reference link

This is a [reference-style link][1].

[1]: https://ant.design/components/overview
`;

defineRender(() => (
  <Flex vertical gap={24}>
    <div>
      <h4 style={{ marginTop: 0 }}>openLinksInNewTab enabled</h4>
      <XMarkdown className="x-markdown-light" openLinksInNewTab content={content} />
    </div>
    <div>
      <h4 style={{ marginTop: 0 }}>Default (same tab)</h4>
      <XMarkdown className="x-markdown-light" content={content} />
    </div>
  </Flex>
));
</script>

隐藏源代码

思考过程

Check the constraint, then answer.

The answer is 42.

思考过程

自定义标签交给 Think。

<script setup lang="tsx">
defineOptions({ name: 'AXXMarkdownThinkV2' });

import { Think } from 'ant-design-x-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';

const content = '<think>Check the constraint, then answer.</think>\n\nThe answer is 42.';

defineRender(() => (
  <XMarkdown content={content} components={{ think: Think }} />
));
</script>

隐藏源代码

API

属性	说明	类型	默认值
content	要渲染的 Markdown 内容	string	-
children	Markdown 内容，content 的别名	string	-
components	用自定义 Vue 组件替换 HTML / 自定义标签，详见 组件总览	Record<string, Component>	-
paragraphTag	段落使用的 HTML 标签。自定义组件含块级元素时可改成 div，避免非法嵌套	string	'p'
streaming	流式渲染配置，见 流式语法	boolean | StreamingOption	-
config	marked 解析与扩展配置	MarkedExtension	{ gfm: true }
plugins	兼容旧写法：带 transform(content) 的对象会在解析前改写字符串；优先用 config + marked extensions	any[]	-
openLinksInNewTab	是否给所有 a 标签加上 target="_blank"（以及 rel="noopener noreferrer"）	boolean	false
dompurifyConfig	DOMPurify 配置，用于 HTML 消毒与 XSS 防护	DOMPurify.Config	-
className	根节点额外 CSS 类名	string	-
rootClassName	className 的别名	string	-
style	根节点内联样式	CSSProperties	-
prefixCls	CSS 类名前缀覆盖	string	-

StreamingOption

属性	说明	类型	默认值
hasNextChunk	后面是否还有 chunk。为 false 时刷新缓存并完成渲染	boolean	false
enableAnimation	为块级元素（p、li、h1–h4）启用文字淡入	boolean	false
animationConfig	文字出现动画配置	AnimationConfig	{ fadeDuration: 200, easing: 'ease-in-out' }
incompleteMarkdownComponentMap	未完成语法对应的自定义组件名。流式输出遇到未闭合的链接、表格、HTML 等时，可用占位 / loading 组件包裹片段	Partial<Record<Exclude<StreamCacheTokenType, 'text'>, string>>	{}

AnimationConfig

属性	说明	类型	默认值
fadeDuration	淡入动画时长（毫秒）	number	200
easing	缓动函数	string	'ease-in-out'

ComponentProps

自定义 components 映射组件收到的入参：

属性	说明	类型	默认值
domNode	解析后的 DOM 节点信息（标签名、属性、子节点结构）	DOMNode	-
streamStatus	流式状态：loading 表示该块仍在输出，done 表示已闭合。目前主要覆盖 HTML 与围栏代码；缩进代码块没有明确结束符，始终为 done。code 也可读 data-state	'loading' | 'done'	-
block	仅 code：data-block="true" 时为块级代码	boolean	-
children	组件包裹的内容	VNode[] | string	-
其余	标准 HTML 属性（href、title、class / className 等）与自定义 data-*	Record<string, any>	-

StreamCacheTokenType

与源码 StreamCacheTokenType 枚举一致（注意是 html，不是文档旧稿里的 heading / xml）：

type StreamCacheTokenType =
  | 'text' // 纯文本
  | 'link' // 链接 [text](url)
  | 'image' // 图片 ![alt](src)
  | 'html' // HTML / 自定义标签 <tag>
  | 'emphasis' // 强调 *斜体* **粗体**
  | 'list' // 列表 - + *
  | 'table'; // 表格 | header | content |

hasNextChunk 为 true 时，未完成 token 会转成 incomplete-<token>（可用 incompleteMarkdownComponentMap 改名），原文放在 data-raw（encodeURIComponent）。text 不生成占位标签。

FAQ

Components 与 config marked extensions 的区别

config marked extensions（解析扩展）

config 里的 extensions 在 Markdown → HTML 阶段生效：

• 阶段：Markdown 解析
• 作用：识别并转换特殊语法
• 例子：把 [^1] 脚注语法变成 <footnote>1</footnote>
• 场景：扩展 Markdown 语法

const footnoteExtension = {
  name: 'footnote',
  level: 'inline',
  start(src) {
    return src.match(/\[\^/)?.index;
  },
  tokenizer(src) {
    const rule = /^\[\^([^\]]+)\]/;
    const match = rule.exec(src);
    if (match) {
      return {
        type: 'footnote',
        raw: match[0],
        text: match[1],
      };
    }
  },
  renderer(token) {
    return `<footnote>${token.text}</footnote>`;
  },
};

// <XMarkdown content="脚注示例[^1]" :config="{ extensions: [footnoteExtension] }" />

components（组件替换）

components 在 HTML → VNode 阶段把标签换成 Vue 组件：

• 阶段：渲染
• 作用：替换 HTML / 自定义标签
• 例子：把 <footnote>1</footnote> 换成可点击的脚注组件
• 场景：自定义样式与交互

完整示例见 自定义插件。