高亮 Code

围栏代码渲染成带 language-* 的 <code>，再用 components.code 交给 HighlightCode。行内代码保持普通 <code>。

从 @ant-design-x-vue/x-markdown/plugins/HighlightCode 引入（主入口也导出同名）。

代码演示

A fenced block picks up the language class:

ts
export const answer = 42;

Inline const x = 1 stays a plain code tag.

代码演示

基础高亮。

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

隐藏源代码

流式高亮。

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

隐藏源代码

API

属性	说明	类型	默认值
lang	语言名	string	-
children	代码文本	string	-
header	顶栏。传入 VNode 则完全自定义；null 时不渲染默认顶栏	VNode | null	默认语言名 + 复制按钮
className	根节点类名	string	-
classNames	语义化类名：root / header / headerTitle / code	Partial<Record<'root' | 'header' | 'headerTitle' | 'code', string>>	-
styles	语义化样式，键与 classNames 相同	Partial<Record<..., CSSProperties>>	-
style	根节点内联样式	CSSProperties	-
prefixCls	类名前缀覆盖	string	-

复制按钮文案来自 useLocale('HighlightCode')，可用 XProvider 的 locale 切换，见 主题与文案。

属性和更多示例也在 插件 · HighlightCode。