Custom plugin

You can use Marked extensions, or use an object with 'transform(content)' to rewrite the string before parsing. Customize the tag and then use the 'components' mapping.

String transform

plugin

Ship the TODO before Friday.

String transform

A plugin transform bolds TODO before marked runs.

<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

Marked extension: footnotes

Next, use tokenizer / renderer to convert [^n] to <footnote>, then map it to a component with Popover.

XMarkdown supports custom marked extensions.1

Map the generated tag with components for interaction.2

See the plugins page for Latex / Highlight / Mermaid.3

Footnote syntax plus a components mapping.

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

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

const referenceList = [
  { url: 'https://x.ant.design', title: 'link1' },
  { url: 'https://x.ant.design', title: 'link2' },
  { url: 'https://x.ant.design', title: 'link3' },
];

const content = [
  'XMarkdown supports custom marked extensions.[^1]',
  '',
  'Map the generated tag with `components` for interaction.[^2]',
  '',
  'See the plugins page for Latex / Highlight / Mermaid.[^3]',
].join('\n');

const Footnote = (props: ComponentProps & { href?: string; title?: string }) => (
  <Popover content={props.title} title="Footnote" trigger="hover">
    <span
      class="markdown-cite"
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        minWidth: '16px',
        height: '16px',
        margin: '0 2px',
        padding: '0 4px',
        borderRadius: '8px',
        background: 'rgba(0,0,0,0.08)',
        fontSize: '11px',
        cursor: 'pointer',
        verticalAlign: 'super',
      }}
      onClick={() => props.href && window.open(props.href, '_blank')}
    >
      {props.children}
    </span>
  </Popover>
);

const footNoteExtension = {
  name: 'footnote',
  level: 'inline' as const,
  tokenizer(src: string) {
    const match = src.match(/^\[\^(\d+)\]/);
    if (!match) return undefined;
    return {
      type: 'footnote',
      raw: match[0],
      text: match[1],
    };
  },
  renderer(token: Token) {
    const order = Number(token.text) - 1;
    const current = referenceList[order];
    if (!current) return '';
    return `<footnote href="${current.url}" title="${current.title}">${token.text}</footnote>`;
  },
};

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

Hide source

Division of work with components

Method	Stage	Function
config.extensions / marked plugin	Markdown → HTML	Recognize new syntax, output HTML tags
plugins[].transform	Before parsing	Rewrite as plain string
components	HTML → VNode	Replace tags with Vue components

For more API details, see Code Examples · FAQ.