Ant Design Style Dumi ThemeAnt Design Style Dumi Theme
指南
配置
组件
Changelog
⌘ K

Table of Contents

主题包内置的代码高亮器
shiki 高亮示例
TSX 高亮
Diff
介绍
简介
进展
特性
Builtin 内置组件
目录 Toc
页面 Tab
进阶特性
Demo 研发
Theme 主题
SyntaxHighlighter 代码高亮
ApiHeader API 概要
上一篇
Theme 主题
下一篇
ApiHeader API 概要

相关资源

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 & 数字科技
‌
‌
‌
‌

SyntaxHighlighter 代码高亮

主题包内置的代码高亮器

本主题包内建了两种代码高亮器供你使用:

  • Prism
  • Shiki

Prism 是最受欢迎的语法高亮器之一。它在代码文本中插入标签包裹需要高亮的元素并通过 CSS 文件来设置高亮样式。你可以直接使用 Prism 官方预设的主题,或者通过 prism-theme-vars 快速创建自己的高亮主题。

Shiki,一个基于 TextMate 语法的代码高亮器。它直接生成带样式的包裹元素,所以不需要引入额外的 CSS 文件。因为基于 TextMate 语法,所以生成的高亮区块非常准确,效果类似于 VS Code。同时这也意味着 shiki 可以支持任意 vscode 主题包。Shiki 也提供了 很多预设主题。不过 Shiki 需要通过 TextMate 主题来自定义高亮,这相对来说会比较麻烦。

你自行选择使用哪种高亮器:

  • Prism 更容易自定义样式
  • Shiki 生成的高亮区块更加准确

默认情况下本主题包使用 shiki,你可以在 frontmatter 中修改设置:

markdown

shiki 高亮示例

TSX 高亮

tsx

Diff

diff