logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Overview
  • Common
    • Bubble
    • Conversations
    • Notification
      2.0.0
  • Confirmation
    • Think
      2.0.0
    • ThoughtChain
      2.0.0
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Feedback
    • Actions
    • CodeHighlighter
      2.1.0
    • FileCard
      2.0.0
    • Mermaid
      2.1.0
    • Sources
      2.0.0
  • Others
    • XProvider

CodeHighlighter

Used to highlight code formatting.
Importimport { CodeHighlighter } from "@ant-design/x";
Sourcex/components/code-highlighter
Docs
Edit this page
Versionsupported since 2.1.0
loading

When to Use

The CodeHighlighter component is used in scenarios where you need to display code snippets with syntax highlighting.

  • Used to display code snippets with syntax highlighting, providing copy functionality and header language information.
  • When used in combination with XMarkdown, it can render code blocks within Markdown content and enhance highlighting display and interactive features.

Code Examples

API

For common properties, refer to: Common Properties.

CodeHighlighterProps

PropertyDescriptionTypeDefault
langLanguagestring-
childrenCode contentstring-
headerHeaderReact.ReactNode | nullReact.ReactNode
classNameStyle class namestring
classNamesStyle class namesstring-
highlightPropsCode highlighting configurationhighlightProps-
prismLightModeWhether to use Prism light mode to automatically load language support based on lang prop for smaller bundle sizebooleantrue

CodeHighlighterRef

PropertyDescriptionTypeVersion
nativeElementGet native elementHTMLElement-

Semantic DOM

Theme Variables (Design Token)

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
colorBgTitleTitle background colorstringrgba(0,0,0,0.06)
colorBorderCodeCode block border colorstring#f0f0f0
colorTextTitleTitle text colorstringrgba(0,0,0,0.88)
Global TokenHow to use?
Basic
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Header
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
With XMarkdown
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

JavaScript Code

javascript
import React from 'react'; import { Button } from 'antd'; 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 React from 'react'; import { Button } from 'antd'; const App = () => ( <div> <Button type="primary">Primary Button</Button> </div> ); export default App;
React 计数器示例
JavaScript
import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>当前计数：{count}</p> <button onClick={() => setCount(count + 1)}>增加</button> </div> ); }
typescript
import React from 'react'; import { XMarkdown } from '@ant-design/x-markdown'; const App = () => <XMarkdown content='Hello World' />; export default App;
  • root
    root
  • header
    Wrapper element of the header
  • headerTitle
    Wrapper element of the headerTitle
  • code
    Wrapper element of the code
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>
import React from 'react';
import { Button } from 'antd';

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

export default App;
import React from 'react';
import { Button } from 'antd';

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

export default App;
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
import React from 'react';
import { XMarkdown } from '@ant-design/x-markdown';

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