代码块

大约 2 分钟

高亮器

Shiki

使用 @vuepress/plugin-shiki，你可以使用 shiki 来高亮你的代码块。

代码主题

如果你想要使用单一主题，你可以在主题选项中设置 plugins.shiki.theme：

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

export default {
  theme: hopeTheme({
    plugins: {
      shiki: {
        // 你想要使用的主题
        theme: "nord",
      },
    },
  }),
};

如果你想要在日间模式和夜间模式下使用不同的主题，你可以在主题选项中设置 plugins.shiki.themes：

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

export default {
  theme: hopeTheme({
    plugins: {
      shiki: {
        // 你想要使用的主题
        themes: {
          light: "one-light",
          dark: "one-dark-pro",
        },
      },
    },
  }),
};

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

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

Prism.js

通过 @vuepress/plugin-prismjs，你可以使用 PrismJS 来高亮你的代码块。

相关信息

vuepress-theme-hope 将主题选项中的 plugins.prismjs 选项作为插件选项提供给 @vuepress/plugin-prismjs。

由于它不是默认的高亮器，所以你需要先安装插件：

pnpm

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

yarn

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

npm

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

之后在主题选项中启用 prismjs 插件并使用 plugins.prismjs 进行自定义（你不能设置 plugins.shiki 选项）：

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

复制按钮

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