为 Vitepress 添加代码关键字高亮

Vitepress 默认支持多种 Markdown 代码特性，包括：在代码块中实现行高亮、代码块聚焦和代码颜色差异化等。

除了内置的代码样式外，还可以通过扩展实现更丰富的代码展示效果。

Vitepress使用 Shiki 进行代码高亮处理，因此可以通过添加常用转换器 来扩展其功能。

本文将介绍如何使用 transformerMetaWordHighlight 为 Vitepress 添加关键字高亮功能。

安装

首先，将 @shikijs/transformers 安装到项目中：

yarn add -D @shikijs/transformers

配置

在 docs/.vitepress/config.ts 文件中启用它：

import { defineConfig } from "vitepress";
import { transformerMetaWordHighlight } from "@shikijs/transformers"; // [!code ++]

export default defineConfig({
  themeConfig: {
		 // ...
  },
  markdown: { // [!code ++]
    codeTransformers: [transformerMetaWordHighlight() as any], // [!code ++]
  }, // [!code ++]
});

配置完成后，可以在 .md 文档中使用 /word/ 语法来高亮指定关键字：

npm i -D @shikijs/transformers

此时渲染的 HTML 结构中，关键字 @shikijs 和 transformers 会自动添加 .highlighted-word 类名，便于自定义样式。

添加样式

在 docs/.vitepress/theme/ 目录下创建以下文件：

:root {
  --vp-code-word-hightlight-light-color: #cbfbf1;
  --vp-code-word-hightlight-dark-color: #0d4e4a;
}

.highlighted-word {
  background-color: var(--vp-code-word-hightlight-light-color);
  border-radius: 3px;
  padding: 0 2px;
}

/* dark background-color */
.dark .highlighted-word {
  background-color: var(--vp-code-word-hightlight-dark-color);
}

import DefaultTheme from "vitepress/theme";
import "./style.css"; // [!code ++]

export default DefaultTheme;

完成以上配置后，就可以在文档中使用关键字高亮功能了，使阅读体验更加友好。