主题与文案

用 XProvider 做插件的全局文案；高亮 / Mermaid 外观可跟随 ant-design-vue Design Token，或通过组件 styles / classNames 定制。

使用说明

XProvider 继承 ant-design-vue 的 ConfigProvider，并为 ant-design-x-vue 组件（含 Markdown 插件文案）提供全局配置。若项目已在用 ConfigProvider，请改为：

- import { ConfigProvider } from 'ant-design-vue';
+ import { XProvider } from 'ant-design-x-vue';

  const App = () => (
-   <ConfigProvider>
+   <XProvider>
      <YourApp />
-   </ConfigProvider>
+   </XProvider>
  );

把 ant-design-vue 的语言包与 ant-design-x-vue 的 zh_CN / en_US 合并后传入 locale。HighlightCode 的「复制」与 Mermaid 的工具栏文案会跟着切换。

代码演示

国际化

Change locale of components:

English中文

```ts
export const answer = 42;
```

```mermaid
quadrantChart
    title Reach and engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Expand
    quadrant-2 Promote
    quadrant-3 Re-evaluate
    quadrant-4 Improve
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
```

国际化

切换中 / 英，观察 HighlightCode 复制按钮与 Mermaid 工具栏文案。

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

import { ref } from 'vue';
import { Card, Flex, Radio, Typography } from 'ant-design-vue';
import enUS from 'ant-design-vue/es/locale/en_US';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { XProvider, en_US, zh_CN } 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 Mermaid from '@ant-design-x-vue/x-markdown/plugins/Mermaid';
import { codeRenderer } from '../_shared/markdown-code';

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

const content = [
  '```ts',
  'export const answer = 42;',
  '```',
  '',
  '```mermaid',
  'quadrantChart',
  '    title Reach and engagement',
  '    x-axis Low Reach --> High Reach',
  '    y-axis Low Engagement --> High Engagement',
  '    quadrant-1 Expand',
  '    quadrant-2 Promote',
  '    quadrant-3 Re-evaluate',
  '    quadrant-4 Improve',
  '    Campaign A: [0.3, 0.6]',
  '    Campaign B: [0.45, 0.23]',
  '```',
].join('\n');

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

const localeType = ref<'zh' | 'en'>('zh');
const locale = ref({ ...zhCN, ...zh_CN });

const changeLocale = (e: { target: { value: 'zh' | 'en' } }) => {
  const next = e.target.value;
  localeType.value = next;
  locale.value = next === 'zh' ? { ...zhCN, ...zh_CN } : { ...enUS, ...en_US };
};

defineRender(() => (
  <>
    <Flex gap={12} style={{ marginBottom: '16px' }} align="center">
      <Typography.Text>Change locale of components:</Typography.Text>
      <Radio.Group value={localeType.value} onChange={changeLocale}>
        <Radio.Button value="en">English</Radio.Button>
        <Radio.Button value="zh">中文</Radio.Button>
      </Radio.Group>
    </Flex>
    <XProvider locale={locale.value}>
      <Card>
        {isClient
          ? <XMarkdown content={content} components={{ code: Code }} />
          : <pre>{content}</pre>}
      </Card>
    </XProvider>
  </>
));
</script>

隐藏源代码

主题色

Header fill (colorFillContent):

Here's a Python example:

python
def fibonacci(n):
    if n <= 1:
        return n
    a, b = 0, 1
    for _ in range(2, n + 1):
        a, b = b, a + b
    return b

print(fibonacci(10))

主题色

通过 XProvider theme.token 调整容器色，HighlightCode 顶栏会跟随 colorFillContent 等 token。

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

import { computed, ref } from 'vue';
import { Card, Flex, Typography } from 'ant-design-vue';
import { XProvider } 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 { codeRenderer } from '../_shared/markdown-code';

const content = [
  "Here's a Python example:",
  '',
  '```python',
  'def fibonacci(n):',
  '    if n <= 1:',
  '        return n',
  '    a, b = 0, 1',
  '    for _ in range(2, n + 1):',
  '        a, b = b, a + b',
  '    return b',
  '',
  'print(fibonacci(10))',
  '```',
].join('\n');

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

const colorBgTitle = ref('#d9afdf');

const theme = computed(() => ({
  token: {
    colorFillContent: colorBgTitle.value,
  },
}));

defineRender(() => (
  <>
    <Flex gap={12} style={{ marginBottom: '16px' }} align="center">
      <Typography.Text>Header fill (colorFillContent):</Typography.Text>
      {/* ant-design-vue@4.2.6 has no ColorPicker export; match x-provider theme demo. */}
      <input
        type="color"
        value={colorBgTitle.value}
        onInput={(e: Event) => {
          colorBgTitle.value = (e.target as HTMLInputElement).value;
        }}
      />
    </Flex>
    <Card>
      <XProvider theme={theme.value}>
        <XMarkdown content={content} components={{ code: Code }} />
      </XProvider>
    </Card>
  </>
));
</script>

隐藏源代码

相关

• 组件级 API：styles / classNames 见 HighlightCode、Mermaid
• Markdown 正文 light / dark CSS：主题
• XProvider 全量 API：XProvider