Examples

Used to render the streamed Markdown returned by LLM. The following is arranged according to the @ant-design/x-markdown@2.10.0 “Code Examples.” Each one represents a capability already implemented in Vue.

The editable preview is at Online Experience, using the same input box as the basic usage.

Basic usage

# 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;

Basic usage

Basic Markdown rendering. Edits in the textarea redraw immediately.

<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>

Hide source

Streaming handling

Status: idle

Streaming handling

Feed incomplete content chunk by chunk, then turn streaming off.

<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>

Hide source

Using plugins

plugin

Ship the TODO before Friday.

Using plugins

plugins’s transform rewrites the string before marked. Formulas, highlighting, and Mermaid see the corresponding plugin pages.

<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>

Hide source

Custom components

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

Custom Blue Title

Normal H2

Paragraph with bold and italic.

Custom components

components maps tags to its own Vue components.

<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>

Hide source

LaTeX

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

$$S=\pi r^2$$

LaTeX

Latex plugin.

<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>

Hide source

Code highlighting

A fenced block picks up the language class:

ts
export const answer = 42;

Inline const x = 1 stays a plain code tag.

Code highlighting

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>

Hide source

Mermaid

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

Mermaid

When the fence language is mermaid, it is handled by 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>

Hide source

Theme

Theme sample

Body text with a link.

• one
• two

Theme sample

Body text with a link.

• one
• two

Theme

light / dark class names.

<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>

Hide source

Custom tokenizer

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Custom tokenizer

Uses marked extensions to parse % headings into heading elements.

<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>

Hide source

Token handling with walkTokens

Please check: Invalid link

Token handling with walkTokens

Uses config.walkTokens to rewrite or intercept tokens.

<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>

Hide source

Pre-render handling with renderer

🚀 Render Code Text

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

Pre-render handling with renderer

Custom marked renderer, then with components replacing tags.

<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>

Hide source

Chinese link handling

Untreated

Treated

Chinese link handling

When a bare URL is followed by Chinese text or parentheses, truncate the link and keep the suffix.

<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>

Hide source

XSS defense

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 defense

DOMPurify strips dangerous scripts, event attributes, and javascript: links.

<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>

Hide source

Streaming syntax

Mixed

Link

Image

Html

Table

Emphasis

InlineCode

Markdown Source

Click Re-Render to start

Rendered Output

Streaming syntax

Incomplete links and tables use placeholders instead of half-parsed 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>

Hide source

Streaming animation

Streaming animation

streaming.enableAnimation makes newly appearing paragraphs fade in.

<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>

Hide source

Open links in a new tab

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.

Open links in a new tab

openLinksInNewTab adds target="_blank" to links.

<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>

Hide source

Thinking process

Check the constraint, then answer.

The answer is 42.

Thinking process

Hand a custom tag to 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>

Hide source

API

Prop	Description	Type	Default
content	Markdown content to be rendered	string	-
children	Markdown content, alias of content	string	-
components	Replace HTML/custom tags with custom Vue components, see Component Overview for details	Record\<string, Component\>	-
paragraphTag	The HTML tag used by the paragraph. When a custom component contains block-level elements, it can be changed to div to avoid illegal nesting	string	'p'
streaming	Streaming rendering configuration, see Streaming syntax	boolean | StreamingOption	-
config	marked parsing and extension configuration	MarkedExtension	{ gfm: true }
plugins	Compatible with old writing methods: objects with transform(content) will rewrite the string before parsing; use config + marked extensions first	any[]	-
openLinksInNewTab	Whether to add target="_blank" (and rel="noopener noreferrer") to all a tags	boolean	false
dompurifyConfig	DOMPurify configuration for HTML disinfection and XSS protection	DOMPurify.Config	-
componentsProps	Pass additional props to custom components in components according to tag names to keep component references stable and avoid repeated mounting caused by inline functions	Record\<string, Record\<string, unknown\>\>	-
protectCustomTagNewlines	Whether to protect blank line segments inside custom tags to prevent paragraph segmentation from destroying the tag structure	boolean	false
disableCustomTagBlockMarkdown	Whether disabled block-level Markdown parsing (list, title, quote, etc.) within custom tags; inline Markdown still takes effect	boolean	false
escapeRawHtml	Whether to escape the original HTML in Markdown into plain text for display (not parsed into real HTML) to prevent XSS while retaining the content	boolean	false
debug	Enable the FPS / memory performance overlay (development only)	boolean	false
disableDefaultStyles	Whether to turn off the default style of built-in tags. true closes all, the array is closed by label (such as ['ul', 'ol', 'li']), used to avoid default styles from polluting internal elements of custom components	boolean | Array<'p' | 'ul' | 'ol' | 'li' | 'pre' | 'code' | 'table' | 'th' | 'td' | 'img' | 'hr'\>	false
className	Root node additional CSS class name	string	-
rootClassName	Alias of className	string	-
style	Root inline style	CSSProperties	-
prefixCls	CSS Override class prefix	string	-

StreamingOption

Prop	Description	Type	Default
hasNextChunk	Whether there is another chunk after it. Refresh the cache and complete rendering when false	boolean	false
enableAnimation	Enable text fade-in for block-level elements (p, li, h1–h4)	boolean	false
animationConfig	Text appearance animation configuration	AnimationConfig	{ fadeDuration: 200, easing: 'ease-in-out' }
incompleteMarkdownComponentMap	Custom component name corresponding to incomplete syntax. When streaming output encounters unclosed links, tables, HTML, etc., you can wrap the fragments with placeholder/loading components	Partial\<Record\<Exclude\<StreamCacheTokenType, 'text'\>, string\>\>	{}

AnimationConfig

Prop	Description	Type	Default
fadeDuration	Fade-in animation duration (milliseconds)	number	200
easing	easing function	string	'ease-in-out'

ComponentProps

Customize the input parameters received by the components mapping component:

Prop	Description	Type	Default
domNode	Parsed DOM node information (tag name, attributes, child node structure)	DOMNode	-
streamStatus	Streaming status: loading means the block is still outputting, done means it has been closed. Currently mainly covers HTML and fenced code; indented code blocks have no explicit end marker and are always done. code can also read data-state	'loading' | 'done'	-
block	Only for code: block-level code when data-block="true"	boolean	-
children	Content wrapped by the component	VNode[] | string	-
Others	Standard HTML attributes (href, title, class / className, etc.) and custom data-*	Record\<string, any\>	-

StreamCacheTokenType

Consistent with the source code StreamCacheTokenType enum (note it is html, not heading / xml from the old document):

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

When hasNextChunk is true, unfinished tokens will be converted to incomplete-<token> (can be renamed using incompleteMarkdownComponentMap), and the original text is stored in data-raw (encodeURIComponent). text does not generate placeholder tags.

FAQ

Difference between components and config marked extensions

config marked extensions (parser extensions)

extensions in config take effect in the Markdown → HTML phase:

• Phase: Markdown parsing
• Purpose: Identify and transform special syntax
• Example: Convert footnote syntax [^1] into <footnote>1</footnote>
• Use case: Extend Markdown syntax

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 (component replacement)

components replaces tags with Vue components during the HTML → VNode stage:

• Stage: Rendering
• Function: Replaces HTML/custom tags
• Example: Replaces <footnote>1</footnote> with a clickable footnote component
• Scenario: Custom styles and interactions

See full example in Custom Plugin.