Ant Design X

HighlightCode

Ant Design X

HighlightCode

When to Use

When you need to render highlighted code blocks in Markdown.

Code Demo

API

Property	Description	Type	Default
lang	Language	`string`	-
children	Code content	`string`	-
header	Header section	`React.ReactNode \| null`	React.ReactNode
className	Style class name	`string`
classNames	Style class names	`string`	-
highlightProps	Code highlighting configuration	`highlightProps`	-

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
colorBgTitle	Title background color	string	rgba(0,0,0,0.06)
colorBorderCode	Code block border color	string	#f0f0f0
colorTextTitle	Title text color	string	rgba(0,0,0,0.88)

Global TokenHow to use?

When to Use

When you need to render highlighted code blocks in Markdown.

Code Demo

API

Property	Description	Type	Default
lang	Language	`string`	-
children	Code content	`string`	-
header	Header section	`React.ReactNode \| null`	React.ReactNode
className	Style class name	`string`
classNames	Style class names	`string`	-
highlightProps	Code highlighting configuration	`highlightProps`	-

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
colorBgTitle	Title background color	string	rgba(0,0,0,0.06)
colorBorderCode	Code block border color	string	#f0f0f0
colorTextTitle	Title text color	string	rgba(0,0,0,0.88)

Global TokenHow to use?

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

HighlightCode

HighlightCode

When to Use

Code Demo

API

Semantic DOM

Design Token

When to Use

Code Demo

API

Semantic DOM

Design Token

root

header

headerTitle

code