Participate in the WeaveFox "AI Artist" contest to win SEE Conf tickets and thousands of prizes

logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Overview
  • Common
    • Bubble
    • Conversations
    • Notification
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Expression
    • CodeHighlighterCode Highlighting
    • MermaidDiagram Tool
  • Confirmation
    • Sources
    • Think
    • ThoughtChain
  • Feedback
    • Actions
    • FileCard
  • Others
    • XProvider

CodeHighlighter
Code Highlighting

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

When to Use

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

  • When you need to display code snippets with syntax highlighting
  • When you want to provide a copy function for the code block
  • When you need to display code language information in the header

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-

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