代码高亮

pengzhanbo

530字约2分钟

2024-03-06

概述

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

主题使用 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

默认高亮的编程语言。当代码块未指定语言时使用。

codeTransformers

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

代码转换器，查看 shiki transformers 了解更多信息。

twoslash 实验性

类型: boolean
默认值: false

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

查看 twoslash 了解更多信息。

whitespace

类型: boolean
默认值: false

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

效果：

function block() {
  space()
  table()
}