自定义插件

可以用 Marked extensions，也可以用带 transform(content) 的对象在解析前改写字符串。自定义标签再走 components 映射。

字符串 transform

plugin

Ship the TODO before Friday.

字符串 transform

plugins 的 transform 在 marked 之前把 TODO 加粗。

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

隐藏源代码

Marked extension：脚注

下面用 tokenizer / renderer 把 [^n] 转成 <footnote>，再映射成带 Popover 的组件（对齐 React CustomPlugin/custom.tsx）。

XMarkdown supports custom marked extensions.1

Map the generated tag with components for interaction.2

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

脚注语法 + components 映射。

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

隐藏源代码

与 components 的分工

方式	阶段	作用
config.extensions / marked 插件	Markdown → HTML	识别新语法，输出 HTML 标签
plugins[].transform	解析前	纯字符串改写
components	HTML → VNode	把标签换成 Vue 组件

更多 API 说明见 代码示例 · FAQ。