概述

主题内置的代码高亮插件， 对代码块进行代码高亮。

主题 使用 Shiki 在 Markdown 代码块中使用彩色文本实现语法高亮。 Shiki 支持多种编程语言。

在 Shiki 的代码仓库中，可以找到 合法的编程语言列表 。

关联插件： @vuepress-plume/plugin-shikiji

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

你可以认为本插件是 官方 @vuepress/plugin-shiki 的 一个分支版本，但本插件更为激进，支持更多新的特性。

同时，我也是 @vuepress/plugin-shiki 的主要维护者之一 ，在 @vuepress-plume/plugin-shikiji 插件中新增的试验性的新特性，会在未来合适的时候合并到 官方插件中。

特性

• 代码行高亮
• 代码聚焦
• 代码对比差异
• 代码高亮“错误”和“警告”
• 代码词高亮
• 代码块折叠
• twoslash ：在代码块内提供内联类型提示。

配置

默认配置：

.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 语言的 类型提示 支持。

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 了解更多信息。