跳至主要內容

代码主题

大约 2 分钟界面界面代码主题

使用 Prism.js 高亮

vuepress-theme-hope 捆绑了 @vuepress/plugin-prismjs 以默认支持代码高亮,我们允许你全局设置日间模式和夜间模式的代码块主题。

默认情况下,我们分别为在日间模式和夜间模式使用 one-lightone-dark 主题,你可以通过在 plugins.prismjs 中设置 lightdark 来更改它们。

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

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      prismjs: {
        light: "日间主题关键词",
        dark: "夜间主题关键词",
      },
    },
  }),
});






 
 
 
 
 
 

提示

处于对输出样式大小的考量,我们不会全局引入所有样式。所以我们不支持在代码块单独配置主题。

可用的主题

浅色主题

  • ateliersulphurpool-light
  • coldark-cold
  • coy
  • duotone-light
  • ghcolors
  • gruvbox-light
  • material-light
  • one-light
  • vs

深色主题

  • atom-dark
  • cb
  • coldark-dark
  • dark
  • dracula
  • duotone-dark
  • duotone-earth
  • duotone-forest
  • duotone-sea
  • duotone-space
  • gruvbox-dark
  • holi
  • hopscotch
  • lucario
  • material-dark
  • material-oceanic
  • night-owl
  • nord
  • one-dark
  • pojoaque
  • shades-of-purple
  • solarized-dark-atom
  • tomorrow
  • vsc-dark-plus
  • xonokai
  • z-touch

使用 Shiki 高亮器

Prism.js 快速且轻量,但它无法正确高亮所有语法。如果你想要更准确的高亮结果,可以使用 @vuepress/plugin-shiki

  1. 通过在主题选项中设置 plugins.prismjs: false 来禁用 @vuepress/plugin-prismjs 插件。

  2. 安装插件:

    pnpm
    pnpm add -D @vuepress/plugin-shiki@next
    
  3. 导入 shiki 插件并使用:

    TS
    import { shikiPlugin } from "@vuepress/plugin-shiki";
    import { defineUserConfig } from "vuepress";
    
    export default defineUserConfig({
      plugins: [
        shikiPlugin({
          // 你的选项
    
          // 例子
          themes: {
            light: "github-light",
            dark: "one-dark-pro",
          },
        }),
      ],
    });
    
  4. 根据你要使用的主题,通过在 .vuepress/styles/config.scss 中添加这些变量来设置代码块的背景颜色和字体颜色:

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