代码高亮
概述
主题内置的代码高亮插件， 对代码块进行代码高亮。
主题 使用 Shiki 在 Markdown 代码块中使用彩色文本实现语法高亮。 Shiki 支持多种编程语言。
在 Shiki 的代码仓库中，可以找到 合法的编程语言列表 。
关联插件： @vuepress-plume/plugin-shikiji
相比于 官方的 @vuepress/plugin-prismjs 和 @vuepress/plugin-shiki 两个代码高亮插件， 提供了更为丰富的功能支持，包括：
默认配置：
import { plumeTheme } from 'vuepress-theme-plume'
import { defineUserConfig } from 'vuepress'
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
}
}
}codeTransformers
- 类型:
ShikiTransformer[] - 默认值:
[]
代码转换器， 查看 shiki transformers 了解更多信息。
twoslash 实验性
- 类型:
boolean - 默认值:
false
实验性功能，是否启用 对 typescript 和 vue 语言的 类型提示 支持。
查看 twoslash 了解更多信息。
whitespace
- 类型:
boolean - 默认值:
false
将空白字符（Tab 和空格）渲染为单独的标签（具有 tab 或 space 类名）。
效果：
function block() {
space()
table()
}