mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
159 lines
4.0 KiB
Markdown
159 lines
4.0 KiB
Markdown
---
|
||
title: 代码高亮
|
||
author: pengzhanbo
|
||
createTime: 2024/03/06 10:21:47
|
||
permalink: /config/plugins/code-highlight/
|
||
---
|
||
|
||
## 概述
|
||
|
||
主题内置的代码高亮插件， 对代码块进行代码高亮。
|
||
|
||
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
|
||
Shiki 支持多种编程语言。
|
||
|
||
在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages) 。
|
||
|
||
关联插件： [@vuepress-plume/plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji)
|
||
|
||
相比于 官方的 [@vuepress/plugin-prismjs](https://ecosystem.vuejs.press/zh/plugins/prismjs.html) 和
|
||
[@vuepress/plugin-shiki](https://ecosystem.vuejs.press/zh/plugins/shiki.html) 两个代码高亮插件，
|
||
提供了更为丰富的功能支持，包括：
|
||
|
||
- [代码行高亮](../../guide/代码/特性支持.md#在代码块中实现行高亮)
|
||
- [代码聚焦](../../guide/代码/特性支持.md#代码块中聚焦)
|
||
- [代码对比差异](../../guide/代码/特性支持.md#代码块中的颜色差异)
|
||
- [代码高亮“错误”和“警告”](../../guide/代码/特性支持.md#高亮-错误-和-警告)
|
||
- [代码词高亮](../../guide/代码/特性支持.md#代码块中-词高亮)
|
||
- [代码块折叠](../../guide/代码/特性支持.md#折叠代码块)
|
||
- [twoslash](../../guide/代码/twoslash.md#twoslash) ，在代码块内提供内联类型提示。
|
||
|
||
默认配置：
|
||
|
||
```ts
|
||
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' }`
|
||
|
||
代码高亮主题，支持 浅色/暗色 双主题。
|
||
|
||
可在 支持的 [主题列表](https://shiki.style/themes) 中选择你喜欢的主题。
|
||
|
||
### languages
|
||
|
||
- 类型: `string[]`
|
||
- 默认值: `[]`
|
||
|
||
需要高亮的编程语言， 例如 `javascript`、`typescript`、`python`、`java`、`c++`、`c#`等。
|
||
默认会根据代码块的语言自动识别。
|
||
|
||
在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages) 。
|
||
|
||
### defaultHighlightLang
|
||
|
||
- 类型： `string`
|
||
- 默认值： `text`
|
||
|
||
默认高亮的编程语言。当代码块未指定语言时使用。
|
||
|
||
### lineNumbers
|
||
|
||
- 类型：`boolean | number`
|
||
- 默认值： `true`
|
||
|
||
是否显示行号。
|
||
|
||
`true`： 显示行号\
|
||
`false`： 不显示行号\
|
||
`number`： 指定需要显式代码行号的最小行数。
|
||
|
||
### copyCode
|
||
|
||
- 类型: `boolean | CopyCodeOptions`
|
||
- 默认值： `true`
|
||
|
||
是否允许复制代码。启用时，会在代码块右侧显示复制按钮。
|
||
|
||
```ts
|
||
interface CopyCodeOptions {
|
||
/**
|
||
* 复制成功后提示文本持续时间
|
||
*
|
||
* @default 2000
|
||
*/
|
||
duration?: number
|
||
|
||
/**
|
||
* 多语言配置
|
||
*/
|
||
locales?: {
|
||
[localePath: string]: {
|
||
/**
|
||
* 复制按钮标题
|
||
*
|
||
* @default 'Copy code'
|
||
*/
|
||
title?: string
|
||
|
||
/**
|
||
* 复制成功提示
|
||
*
|
||
* @default 'Copied'
|
||
*/
|
||
copied?: string
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### codeTransformers
|
||
|
||
- 类型: `ShikiTransformer[]`
|
||
- 默认值: `[]`
|
||
|
||
代码转换器， 查看 [shiki transformers](https://shiki.style/guide/transformers) 了解更多信息。
|
||
|
||
### twoslash <Badge type="tip" text="实验性" />
|
||
|
||
- 类型: `boolean`
|
||
- 默认值: `false`
|
||
|
||
实验性功能，是否启用 对 `typescript` 和 `vue` 语言的 类型提示 支持。
|
||
|
||
查看 [twoslash](/guide/markdown/experiment/#twoslash) 了解更多信息。
|
||
|
||
### whitespace
|
||
|
||
- 类型: `boolean | 'all' | 'boundary' | 'trailing'`
|
||
- 默认值: `false`
|
||
|
||
将空白字符（Tab 和空格）渲染为单独的标签（具有 tab 或 space 类名）。
|
||
|
||
效果：
|
||
|
||
<!-- @include: ../../snippet/whitespace.snippet.md{18-24} -->
|
||
|
||
### collapseLines
|
||
|
||
- 类型: `boolean | number`
|
||
- 默认值： `false`
|
||
|
||
将代码块折叠到指定行数。
|