logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Code Examples
  • Themes
  • Streaming
    • Syntax Processing
    • Animation Effects
  • Components
    • Overview
    • Think
    • DataChart
    • Custom Component
  • Plugins
    • Overview
    • Latex
    • HighlightCode
    • Mermaid
    • CustomPlugins
    • Theme & Locale

HighlightCode

When to Use

When you need to render highlighted code blocks in Markdown.

Code Demo

API

PropertyDescriptionTypeDefault
langLanguagestring-
childrenCode contentstring-
headerHeader sectionReact.ReactNode | nullReact.ReactNode
classNameStyle class namestring
classNamesStyle class namesstring-
highlightPropsCode highlighting configurationhighlightProps-

Semantic DOM

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?
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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