XMarkdown plugins

Plug-ins are divided into two categories. Objects with transform(content) in plugins will rewrite the Markdown string before parsing. Formulas, highlighting, and Mermaid use the marked extension or components mapping, just like React @ant-design/x-markdown@2.10.0.

Publish the subpath in the package:

• @ant-design-x-vue/x-markdown/plugins/Latex
• @ant-design-x-vue/x-markdown/plugins/HighlightCode
• @ant-design-x-vue/x-markdown/plugins/Mermaid

The main entrance also exports these three names. The browser script package does not have a separate copy of dist/plugins/*.min.js, please use the package entry or subpath.

String transform

plugin

Ship the TODO before Friday.

String transform

The transform of plugins runs before marked.

<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

Latex

Latex(options?) returns marked extensions, which are passed to config.extensions. By default, align* is replaced with aligned. katexOptions are passed directly to KaTeX.

Prop	Description	Type	Default
replaceAlignStart	Whether to replace align* with aligned	boolean	true
katexOptions	KaTeX configuration	KatexOptions	{ output: 'html', throwOnError: false }

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

$$S=\pi r^2$$

Inline $...$ and block $$.

<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

Progressively parse formulas while they stream.

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

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

const fullContent = `
### Latex

inline standard: $\\frac{df}{dt}$

block standard:

$$
\\Delta t' = \\frac{\\Delta t}{\\sqrt{1 - \\frac{v^2}{c^2}}}
$$

inline: \\(\\frac{df}{dt}\\)

block:

\\[
\\Delta t' = \\frac{\\Delta t}{\\sqrt{1 - \\frac{v^2}{c^2}}}
\\]
`;

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

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

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

defineRender(() => (
  <Flex vertical gap="small">
    <Button style={{ alignSelf: 'flex-end' }} onClick={() => (index.value = 0)}>
      Re-Render
    </Button>
    <Bubble
      content={fullContent.slice(0, index.value)}
      contentRender={(content) => (
        <XMarkdown
          content={content as string}
          config={{ extensions: Latex() }}
          paragraphTag="div"
        />
      )}
      variant="outlined"
    />
  </Flex>
));
</script>

Hide source

Standalone page: Formulas.

HighlightCode

Fenced code is rendered as <code class="language-*">. The class is read via components.code and then passed to HighlightCode. Inline code remains as standard <code>.

Prop	Description	Type	Default
lang	Language name	string	-
children	Code text	string	-
header	Top bar; if null, the default top bar is not rendered	VNode | null	Default top bar
className	Root class name	string	-
classNames	root / header / headerTitle / code	object	-
styles	Inline styles corresponding to classNames	object	-

A fenced block picks up the language class:

ts
export const answer = 42;

Inline const x = 1 stays a plain code tag.

Fenced code goes through 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

Progressively highlight a streaming code block.

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

import { onUnmounted, ref, watchEffect } from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import HighlightCode from '@ant-design-x-vue/x-markdown/plugins/HighlightCode';
import { Button, Flex } from 'ant-design-vue';
import { codeRenderer } from '../_shared/markdown-code';

const text = `
Here's a Python code block example that demonstrates how to calculate Fibonacci numbers:

\`\`\` python
def fibonacci(n):
    """
    Calculate the nth Fibonacci number
    :param n: The position in the Fibonacci sequence (must be a positive integer)
    :return: The value at position n
    """
    if n <= 0:
        return 0
    elif n == 1:
        return 1
    else:
        a, b = 0, 1
        for _ in range(2, n+1):
            a, b = b, a + b
        return b

# Example usage
if __name__ == "__main__":
    num = 10
    print(f"The {num}th Fibonacci number is: {fibonacci(num)}")
\`\`\`

This code includes a Fibonacci helper, docstring, and a short main block.
`;

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

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

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

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

defineRender(() => (
  <Flex vertical gap="small">
    <Button style={{ alignSelf: 'flex-end' }} onClick={() => (index.value = 0)}>
      Re-Render
    </Button>
    <Bubble
      content={text.slice(0, index.value)}
      contentRender={(content) => (
        <XMarkdown
          content={content as string}
          components={{ code: Code }}
          paragraphTag="div"
        />
      )}
      variant="outlined"
    />
  </Flex>
));
</script>

Hide source

Standalone page: Highlighted Code.

Mermaid

components.code is replaced by Mermaid when the language is mermaid. The chart library is only initialized in the browser, and server-side rendering displays the source code first.

Prop	Description	Type	Default
children	Chart source code	string	-
header	Top bar; do not render the default toolbar when null	VNode | null	Default toolbar
className	Root class name	string	-
classNames	root / header / graph / code	object	-
styles	Inline styles corresponding to classNames	object	-

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

A flowchart.

<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

Here are several Mermaid diagram examples

#### 1. Flowchart (Vertical)

``` mermaid
graph TD
    A[Start] --> B{Data Valid?}
    B -->|Yes| C[Process Data]
    B -->|No| D[Error Handling]
    C --> E[Generate Report]
    D --> E
    E --> F[End]
    style A fill:#2ecc71,stroke:#27ae60
    style F fill:#e74c3c,stroke:#c0392b
```

#### 2. Sequence Diagram

``` mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: POST /api/data
    Server->>Database: INSERT record
    Database-->>Server: Success
    Server-->>Client: 201 Created
```

#### 3. Quadrant Chart

```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

Progressively render a streaming Mermaid fence.

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

import { onUnmounted, ref, watchEffect } from 'vue';
import { Bubble } from 'ant-design-x-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import Mermaid from '@ant-design-x-vue/x-markdown/plugins/Mermaid';
import { Button, Flex } from 'ant-design-vue';
import { codeRenderer } from '../_shared/markdown-code';

const fullContent = `
Here are several Mermaid diagram examples

#### 1. Flowchart (Vertical)

\`\`\` mermaid
graph TD
    A[Start] --> B{Data Valid?}
    B -->|Yes| C[Process Data]
    B -->|No| D[Error Handling]
    C --> E[Generate Report]
    D --> E
    E --> F[End]
    style A fill:#2ecc71,stroke:#27ae60
    style F fill:#e74c3c,stroke:#c0392b
\`\`\`

#### 2. Sequence Diagram

\`\`\` mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Database

    Client->>Server: POST /api/data
    Server->>Database: INSERT record
    Database-->>Server: Success
    Server-->>Client: 201 Created
\`\`\`

#### 3. Quadrant Chart

\`\`\`mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
\`\`\`
`;

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

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

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

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

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

defineRender(() => (
  <Flex vertical gap="small">
    <Button style={{ alignSelf: 'flex-end' }} onClick={() => (index.value = 0)}>
      Re-Render
    </Button>
    {isClient ? (
      <Bubble
        content={fullContent.slice(0, index.value)}
        contentRender={(content) => (
          <XMarkdown
            content={content as string}
            components={{ code: Code }}
            paragraphTag="div"
          />
        )}
        variant="outlined"
      />
    ) : (
      <pre>{fullContent}</pre>
    )}
  </Flex>
));
</script>

Hide source

Independent page: Mermaid · GPT-VIS.

Think

Custom labels can be mapped to dialog components. think is handed over to Think, the default slot is the text in the label. Sources / ThoughtChain use the same components notation, see Chat Enhancement.

Check the constraint, then answer.

The answer is 42.

Render think tags as 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

Theme and copy

The button text of HighlightCode and Mermaid comes from useLocale. Use XProvider to wrap it up and replace it. Styles are available in the components styles / classNames, or follow the ant-design-vue Design Token. See Theme and Copy for details. For the Markdown text theme class name, see theme.

Custom plugin

Supports marked extensions or custom plug-ins with transform, see custom plug-in.