CodeHighlighter

Highlight formatted code. Aligned with React @ant-design/x CodeHighlighter.

Standalone component. The Markdown plugin HighlightCode is still available; the two serve different purposes (plugin ≠ this component).

中文：CodeHighlighter 代码高亮

When to use

• Show syntax-highlighted snippets with copy and header language info.
• Combine with XMarkdown via components.code to render fenced code blocks.

Examples

Basic

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;

Basic

Basic usage with on-demand language loading (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>

Hide source

Custom header

Vue 计数器示例

JavaScript

import { ref } from 'vue';

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

Custom header

Customize the header with header. Pass false / null to hide it.

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

Hide source

With XMarkdown

With XMarkdown

Use it as components.code inside Bubble + XMarkdown.

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

Hide source

API

CodeHighlighterProps

Prop	Description	Type	Default	Version
lang	Language id	string	-	-
children	Code content (or default slot)	string	-	-
header	Header content; hidden when false / null	VNode | string | (() => VNode | string | false | null) | false | null	-	-
highlightProps	Extra options for the highlighter (showLineNumbers / startingLineNumber / codeTagProps, …)	CodeHighlighterHighlightProps	-	-
prismLightMode	Prism light mode (lazy-load by lang)	boolean	true	-
classNames	Semantic class names	Partial\<Record\<SemanticType, string\>\>	-	-
styles	Semantic styles	Partial\<Record\<SemanticType, CSSProperties\>\>	-	-
prefixCls	Class prefix	string	-	-
rootClassName	Extra class on the root	string	-	-

Slots

Slot	Description
default	Code content (string)
header	Custom header

CodeHighlighter Ref

Prop	Description	Type
nativeElement	Native DOM node	HTMLElement

SemanticType

Name	Description
root	Root
header	Header container
headerTitle	Title
code	Code container

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	Description	Default
colorBgTitle	Title background	colorFillContent
colorTextTitle	Title text	colorText
colorBorderCode	Code block border	colorBorderSecondary

Contributors

Contributors

Loading contributors…