代码块

大约 2 分钟

高亮器

你可以使用 markdown.highlighter 来选择你想要使用的高亮器，shiki 为 Shiki，prismjs 为 Prism.js。你也可以将 markdown.highlighter 设置为一个对象，通过 type 字段指定高亮器的类型，并将选项传递给高亮器：

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    markdown: {
      highlighter: "shiki",

      // 或

      highlighter: "prismjs",

      // 或

      highlighter: {
        type: "shiki", // 或 "prismjs"

        // shiki 或 prism 选项
      },
    },
  }),
});

Shiki 插件是内置的，所以你不需要安装它。如果你想要使用 Prism.js，你需要先安装插件：

pnpm

pnpm add -D @vuepress/plugin-prismjs@next

yarn

yarn add -D @vuepress/plugin-prismjs@next

npm

npm i -D @vuepress/plugin-prismjs@next

Shiki

通过 @vuepress/plugin-shiki 插件，你可以使用 Shiki 高亮器。

我们支持 @vuepress/plugin-shiki 插件的所有选项。

代码块主题的背景

为了让主题正确显示代码块，你应该根据 Shiki 中使用的主题设置代码块的背景颜色和字体颜色，通过在 .vuepress/styles/config.scss 中添加这些变量来实现：

$code-bg-color：代码块的背景颜色
$code-color：代码块的字体颜色

Prism.js

通过 @vuepress/plugin-prismjs 插件，你可以使用 prism.js 来高亮你的代码块。

我们支持 @vuepress/plugin-prismjs 插件的所有选项。

复制按钮

主题使用 @vuepress/plugin-copy-code 在所有代码块上添加复制按钮。