代码高亮
概述
主题内置的代码高亮插件， 对代码块进行代码高亮。
主题 使用 Shiki 在 Markdown 代码块中使用彩色文本实现语法高亮。 Shiki 支持多种编程语言。
在 Shiki 的代码仓库中，可以找到 合法的编程语言列表 。
关联插件： @vuepress-plume/plugin-shikiji
为什么不用 官方的 @vuepress/plugin-shiki ？
你可以认为本插件是 官方 @vuepress/plugin-shiki 的 一个分支版本，但本插件更为激进，支持更多新的特性。
同时，我也是 @vuepress/plugin-shiki 的主要维护者之一 ，在 @vuepress-plume/plugin-shikiji 插件中新增的试验性的新特性，会在未来合适的时候合并到 官方插件中。
特性
配置
默认配置：
.vuepress/config.ts
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
plugins: {
shiki: {
theme: { light: 'vitesse-light', dark: 'vitesse-dark' },
},
}
}),
})theme
- 类型:
string | { light: string, dark: string } - 默认值:
{ light: 'vitesse-light', dark: 'vitesse-dark' }
代码高亮主题，支持 浅色/暗色 双主题。
可在 支持的 主题列表 中选择你喜欢的主题。
languages
- 类型:
string[] - 默认值:
[]
需要高亮的编程语言， 例如 javascript、typescript、python、java、c++、c#等。 默认会根据代码块的语言自动识别。
在 Shiki 的代码仓库中，可以找到 合法的编程语言列表 。
defaultHighlightLang
- 类型：
string - 默认值：
text
默认高亮的编程语言。当代码块未指定语言时使用。
lineNumbers
- 类型：
boolean | number - 默认值：
true
是否显示行号。
true： 显示行号false： 不显示行号number： 指定需要显式代码行号的最小行数。
copyCode
- 类型:
boolean | CopyCodeOptions - 默认值：
true
是否允许复制代码。启用时，会在代码块右侧显示复制按钮。
interface CopyCodeOptions {
/**
* 复制成功后提示文本持续时间
*
* @default 2000
*/
duration?: number
/**
* 多语言配置
*/
locales?: {
[localePath: string]: {
/**
* 复制按钮标题
*
* @default 'Copy code'
*/
title?: string
/**
* 复制成功提示
*
* @default 'Copied'
*/
copied?: string
}
}
}twoslash
- 类型:
boolean - 默认值:
false
实验性功能，是否启用 对 typescript 和 vue 语言的 类型提示 支持。
查看 twoslash 了解更多信息。
whitespace
- 类型:
boolean | 'all' | 'boundary' | 'trailing' - 默认值:
false
将空白字符（Tab 和空格）渲染为单独的标签（具有 tab 或 space 类名）。
效果：
<catalog>
<book>
<title>Everyday Italian</title>
</book>
</catalog>collapseLines
- 类型:
boolean | number - 默认值：
false
将代码块折叠到指定行数。
codeTransformers
- 类型:
ShikiTransformer[] - 默认值:
[]
代码转换器， 查看 shiki transformers 了解更多信息。
贡献者
withesse
变更历史
最后更新于:
- -于 2024/12/25