Styled Components: Features

Stylized Components: Hero Header

Others: DumiSiteProvider Theme Container

Highlighter Syntax Highlighter

A code highlighting component that encapsulates two syntax highlighting engines, Shiki and Prism.

引入方法

import { Highlighter } from 'dumi-theme-antd-style';

Ant Design Style Dumi Theme

Shiki Syntax Highlighter

自定义主题

Prism Syntax Highlighter

API

HighlighterSyntaxTheme

ShikiSyntaxTheme

PrismSyntaxTheme

Overview

Functional Components: Highlighter Syntax Highlighter; ApiHeader Reference

Layout: Footer; Table of Contents

Styled Components: Features

Stylized Components: Hero Header

Others: DumiSiteProvider Theme Container

Highlighter Syntax Highlighter

A code highlighting component that encapsulates two syntax highlighting engines, Shiki and Prism.

引入方法

import { Highlighter } from 'dumi-theme-antd-style';

‌
‌
‌
‌

Demo

Shiki Syntax Highlighter

JS

Custom Theme

Prism Syntax Highlighter

JS

INFO

It can only be used normally when wrapped in DumiSiteProvider.

API

Name	Type	Description
children	string	The text content that needs to be syntax highlighted
language	`LanguageKeys` or string	The type of language, which can be a string identifier of the language or an enumeration type
type	`'shiki'` or `'prism'`	The type of syntax highlighter, default is `'shiki'`
background	boolean	Whether to display the background container, default is `true`
className	string	The class name of the component
trim	boolean	Whether to remove leading and trailing spaces, default is `true`
style	CSSProperties	The style of the component
syntaxThemes	`HighlighterSyntaxTheme`	The theme of the syntax highlighter
copyable	boolean	Whether it is copyable

HighlighterSyntaxTheme

Name	Type	Description
shiki	`Partial<ShikiSyntaxTheme>`	The theme of Shiki syntax highlighter, as a partial object of properties
prism	`Partial<PrismSyntaxTheme>`	The theme of Prism syntax highlighter, as a partial object of properties

ShikiSyntaxTheme

Name	Type	Description
dark	`Theme`	The dark theme of Shiki syntax highlighter
light	`Theme`	The light theme of Shiki syntax highlighter

PrismSyntaxTheme

Name	Type	Description
dark	`{ [key: string]: React.CSSProperties }`	The dark theme of Prism syntax highlighter
light	`{ [key: string]: React.CSSProperties }`	The light theme of Prism syntax highlighter

‌
‌
‌
‌

Demo

Shiki Syntax Highlighter

JS

Custom Theme

Prism Syntax Highlighter

JS

INFO

It can only be used normally when wrapped in DumiSiteProvider.

API

Name	Type	Description
children	string	The text content that needs to be syntax highlighted
language	`LanguageKeys` or string	The type of language, which can be a string identifier of the language or an enumeration type
type	`'shiki'` or `'prism'`	The type of syntax highlighter, default is `'shiki'`
background	boolean	Whether to display the background container, default is `true`
className	string	The class name of the component
trim	boolean	Whether to remove leading and trailing spaces, default is `true`
style	CSSProperties	The style of the component
syntaxThemes	`HighlighterSyntaxTheme`	The theme of the syntax highlighter
copyable	boolean	Whether it is copyable

HighlighterSyntaxTheme

Name	Type	Description
shiki	`Partial<ShikiSyntaxTheme>`	The theme of Shiki syntax highlighter, as a partial object of properties
prism	`Partial<PrismSyntaxTheme>`	The theme of Prism syntax highlighter, as a partial object of properties

ShikiSyntaxTheme

Name	Type	Description
dark	`Theme`	The dark theme of Shiki syntax highlighter
light	`Theme`	The light theme of Shiki syntax highlighter

PrismSyntaxTheme

Name	Type	Description
dark	`{ [key: string]: React.CSSProperties }`	The dark theme of Prism syntax highlighter
light	`{ [key: string]: React.CSSProperties }`	The light theme of Prism syntax highlighter

Table of Contents

Highlighter Syntax Highlighter

Table of Contents

Highlighter Syntax Highlighter

Demo

Shiki Syntax Highlighter

JS

Custom Theme

Prism Syntax Highlighter

JS

API

HighlighterSyntaxTheme

ShikiSyntaxTheme

PrismSyntaxTheme

Demo

Shiki Syntax Highlighter

JS

Custom Theme

Prism Syntax Highlighter

JS

API

HighlighterSyntaxTheme

ShikiSyntaxTheme

PrismSyntaxTheme

自定义主题