Theme and copy

Use XProvider as the global copy of the plug-in; the highlight/Mermaid appearance can follow the ant-design-vue Design Token, or be customized through the component styles / classNames.

Usage notes

XProvider inherits ConfigProvider of ant-design-vue and provides global configuration for ant-design-x-vue components (including Markdown plug-in copywriting). If the project is already using ConfigProvider, please change it to:

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

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

Merge the language package of ant-design-vue with the zh_CN / en_US of ant-design-x-vue and pass it to locale. The "Copy" of HighlightCode and the toolbar copy of Mermaid will be switched accordingly.

Examples

Internationalization

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

Internationalization

Switch between Chinese and English to see HighlightCode copy and Mermaid toolbar copy.

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

Hide source

Theme colors

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

Theme colors

Adjust container colors with XProvider theme.token. The HighlightCode header follows tokens such as colorFillContent.

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

Hide source

Related

• Component-level API: styles / classNames See HighlightCode, Mermaid
• Markdown body light / dark CSS: theme
• XProvider full API: XProvider