CodeHighlighter 代码高亮

用于高亮代码格式。对齐 React @ant-design/x CodeHighlighter。

独立组件。Markdown 插件 HighlightCode 仍保留，二者用途不同（插件 ≠ 本组件）。

何时使用

• 展示带语法高亮的代码片段，并提供复制功能及头部语言信息。
• 与 XMarkdown 结合，通过 components.code 渲染围栏代码块。

代码演示

基本

JavaScript Code

javascript

import { ref } from 'vue';
import { Button } from 'ant-design-vue';

const App = () => (
  <div>
    <Button type="primary">Primary Button</Button>
  </div>
);

export default App;

CSS Code

css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

HTML Code

html

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Prism Light Mode

使用 prismLightMode 按需加载语言，减小打包体积。

javascript

import { ref } from 'vue';
import { Button } from 'ant-design-vue';

const App = () => (
  <div>
    <Button type="primary">Primary Button</Button>
  </div>
);

export default App;

基本

基础用法，支持按需语言加载（prismLightMode）。

<script setup lang="tsx">
import { CodeHighlighter } from 'ant-design-x-vue';

defineOptions({ name: 'AXCodeHighlighterBasic' });

const code = `import { ref } from 'vue';
import { Button } from 'ant-design-vue';

const App = () => (
  <div>
    <Button type="primary">Primary Button</Button>
  </div>
);

export default App;`;

defineRender(() => (
  <div>
    <h3 style={{ marginBottom: 8 }}>JavaScript Code</h3>
    <CodeHighlighter lang="javascript">{code}</CodeHighlighter>

    <h3 style={{ margin: '8px 0' }}>CSS Code</h3>
    <CodeHighlighter lang="css">
      {`.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}`}
    </CodeHighlighter>

    <h3 style={{ margin: '8px 0' }}>HTML Code</h3>
    <CodeHighlighter lang="html">
      {`<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>`}
    </CodeHighlighter>

    <h3 style={{ margin: '8px 0' }}>Prism Light Mode</h3>
    <p style={{ marginBottom: 8, color: '#666' }}>
      使用 <code>prismLightMode</code> 按需加载语言，减小打包体积。
    </p>
    <CodeHighlighter lang="javascript" prismLightMode>
      {code}
    </CodeHighlighter>
  </div>
));
</script>

隐藏源代码

自定义 Header

Vue 计数器示例

JavaScript

import { ref } from 'vue';

function useCounter() {
  const count = ref(0);
  const inc = () => {
    count.value += 1;
  };
  return { count, inc };
}

自定义 Header

通过 header 自定义头部；传 false / null 可隐藏。

<script setup lang="tsx">
import { CodeHighlighter } from 'ant-design-x-vue';
import { Button, Space } from 'ant-design-vue';

defineOptions({ name: 'AXCodeHighlighterCustomHeader' });

const code = `import { ref } from 'vue';

function useCounter() {
  const count = ref(0);
  const inc = () => {
    count.value += 1;
  };
  return { count, inc };
}`;

const customHeader = (
  <div
    style={{
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '8px 16px',
      background: '#f5f5f5',
    }}
  >
    <Space>
      <span style={{ fontWeight: 500 }}>Vue 计数器示例</span>
      <span
        style={{
          padding: '2px 8px',
          background: '#e6f7ff',
          borderRadius: '4px',
          fontSize: '12px',
          color: '#1890ff',
        }}
      >
        JavaScript
      </span>
    </Space>
    <Space>
      <Button size="small" type="text">
        运行
      </Button>
      <Button size="small" type="text">
        分享
      </Button>
    </Space>
  </div>
);

defineRender(() => (
  <CodeHighlighter lang="javascript" header={customHeader}>
    {code}
  </CodeHighlighter>
));
</script>

隐藏源代码

配合 XMarkdown

配合 XMarkdown

在 Bubble + XMarkdown 中作为 components.code 使用。

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

import { CodeHighlighter, Bubble } from 'ant-design-x-vue';
import { XMarkdown } from '@ant-design-x-vue/x-markdown';
import { Button, Flex } from 'ant-design-vue';
import { ref, watchEffect } from '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)}")
\`\`\`
`;

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

const index = ref(0);
const isServer = import.meta.env.SSR;
const contentRef = ref<HTMLDivElement>();

watchEffect((onCleanup) => {
  if (!isServer && index.value < text.length) {
    const timerId = setTimeout(() => {
      index.value = Math.min(index.value + 5, text.length);
    }, 20);
    onCleanup(() => clearTimeout(timerId));
  }
});

watchEffect(() => {
  const el = contentRef.value;
  if (!el || index.value <= 0 || index.value >= text.length) return;
  if (el.scrollHeight > el.clientHeight) {
    el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
  }
});

defineRender(() => (
  <Flex
    ref={contentRef as any}
    vertical
    gap="small"
    style={{ height: 600, overflow: 'auto' }}
  >
    <Flex justify="flex-end">
      <Button onClick={() => (index.value = 0)}>Re-Render</Button>
    </Flex>
    <Bubble
      content={text.slice(0, index.value)}
      contentRender={(content) => (
        <XMarkdown
          content={content as string}
          components={{ code: Code }}
          paragraphTag="div"
        />
      )}
      variant="outlined"
    />
  </Flex>
));
</script>

隐藏源代码

API

CodeHighlighterProps

属性	说明	类型	默认值	版本
lang	代码语言类型	string	-	-
children	代码内容（也可用默认插槽）	string	-	-
header	头部内容；false / null 时不显示	VNode | string | (() => VNode | string | false | null) | false | null	-	-
highlightProps	透传给高亮引擎的额外配置（当前支持 showLineNumbers / startingLineNumber / codeTagProps 等）	CodeHighlighterHighlightProps	-	-
prismLightMode	是否 Prism 轻量模式（按 lang 按需加载）	boolean	true	-
classNames	语义化 className	Partial<Record<SemanticType, string>>	-	-
styles	语义化 style	Partial<Record<SemanticType, CSSProperties>>	-	-
prefixCls	样式类名前缀	string	-	-
rootClassName	根节点额外 class	string	-	-

Slots

插槽名	说明
default	代码内容（字符串文本）
header	自定义头部

CodeHighlighter Ref

属性	说明	类型
nativeElement	获取原生 DOM 节点	HTMLElement

SemanticType

名称	说明
root	根节点
header	头部容器
headerTitle	标题
code	代码容器

Semantic DOM

typescript

import { XMarkdown } from '@ant-design-x-vue/x-markdown';

const App = () => <XMarkdown content='Hello World' />;
export default App;

• root

  根节点

• header

  头部的容器

• headerTitle

  标题

• code

  代码容器

主题变量（Design Token）

Token	说明	默认
colorBgTitle	标题背景颜色	colorFillContent
colorTextTitle	标题文本颜色	colorText
colorBorderCode	代码块边框颜色	colorBorderSecondary

贡献者

贡献者

正在加载贡献者信息...