---
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)

::: details 为什么不用 官方的 @vuepress/plugin-shiki ？

你可以认为本插件是 官方 [@vuepress/plugin-shiki](https://ecosystem.vuejs.press/zh/plugins/shiki.html) 的
一个分支版本，但本插件更为激进，支持更多新的特性。

同时，我也是 [@vuepress/plugin-shiki](https://ecosystem.vuejs.press/zh/plugins/shiki.html) 的主要维护者之一
，在 `@vuepress-plume/plugin-shikiji` 插件中新增的试验性的新特性，会在未来合适的时候合并到 官方插件中。
:::

## 特性

- [代码行高亮](../../guide/代码/特性支持.md#在代码块中实现行高亮)
- [代码聚焦](../../guide/代码/特性支持.md#代码块中聚焦)
- [代码对比差异](../../guide/代码/特性支持.md#代码块中的颜色差异)
- [代码高亮“错误”和“警告”](../../guide/代码/特性支持.md#高亮-错误-和-警告)
- [代码词高亮](../../guide/代码/特性支持.md#代码块中-词高亮)
- [代码块折叠](../../guide/代码/特性支持.md#折叠代码块)
- [twoslash](../../guide/代码/twoslash.md#twoslash) ：在代码块内提供内联类型提示。

## 配置

默认配置：

::: code-tabs
@tab .vuepress/config.ts

```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' }`

代码高亮主题，支持 浅色/暗色 双主题。

可在 支持的 [主题列表](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
    }
  }
}
```

### twoslash

- 类型: `boolean`
- 默认值: `false`

实验性功能，是否启用 对 `typescript` 和 `vue` 语言的 类型提示 支持。

### whitespace

- 类型: `boolean | 'all' | 'boundary' | 'trailing'`
- 默认值: `false`

将空白字符（Tab 和空格）渲染为单独的标签（具有 tab 或 space 类名）。

效果：

<!-- @include: ../../snippet/whitespace.snippet.md{18-24} -->

### collapseLines

- 类型: `boolean | number`
- 默认值： `false`

将代码块折叠到指定行数。

### codeTransformers

- 类型: `ShikiTransformer[]`
- 默认值: `[]`

代码转换器， 查看 [shiki transformers](https://shiki.style/guide/transformers) 了解更多信息。