Ant Design Style Dumi ThemeAnt Design Style Dumi Theme
Guide
Components
Config
Changelog
⌘ K

Table of Contents

Demo
Shiki Syntax Highlighter
JS
自定义主题
Prism Syntax Highlighter
JS
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.
引入方法
js
import { Highlighter } from 'dumi-theme-antd-style';
NPM
UNPKG
BundlePhobia
PackagePhobia
Anvaka Graph
查看源码
编辑文档
PREV
Overview
NEXT
ApiHeader Reference

相关资源

Ant Design
Ant Design Pro
Ant Design Pro Components
Umi-React 应用开发框架
Dumi-组件/文档研发工具
qiankun-微前端框架

社区

Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-SEE Conf-蚂蚁体验科技大会

帮助

GitHub
更新日志
讨论

more products更多产品

yuque语雀-知识创作与分享工具
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
Copyright © 2022-2024
Made with ❤️ by 蚂蚁集团 - AFX & 数字科技
‌
‌
‌
‌

Demo

Shiki Syntax Highlighter

JS

Custom Theme

Prism Syntax Highlighter

JS

INFO

It can only be used normally when wrapped in DumiSiteProvider.

API

NameTypeDescription
childrenstringThe text content that needs to be syntax highlighted
languageLanguageKeys or stringThe 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'
backgroundbooleanWhether to display the background container, default is true
classNamestringThe class name of the component
trimbooleanWhether to remove leading and trailing spaces, default is true
styleCSSPropertiesThe style of the component
syntaxThemesHighlighterSyntaxThemeThe theme of the syntax highlighter
copyablebooleanWhether it is copyable

HighlighterSyntaxTheme

NameTypeDescription
shikiPartial<ShikiSyntaxTheme>The theme of Shiki syntax highlighter, as a partial object of properties
prismPartial<PrismSyntaxTheme>The theme of Prism syntax highlighter, as a partial object of properties

ShikiSyntaxTheme

NameTypeDescription
darkThemeThe dark theme of Shiki syntax highlighter
lightThemeThe light theme of Shiki syntax highlighter

PrismSyntaxTheme

NameTypeDescription
dark{ [key: string]: React.CSSProperties }The dark theme of Prism syntax highlighter
light{ [key: string]: React.CSSProperties }The light theme of Prism syntax highlighter
自定义主题

自定义了暗色和亮色模式下的高亮效果

js
tsx
js
import { DumiSiteProvider, Highlighter } from 'dumi-theme-antd-style';