Code Themes

About 1 minInterfaceInterfaceCode Themes

With Prism.js Highlighter

vuepress-theme-hope bundles @vuepress/plugin-prismjs to support code highlighting by default, and we allow you to set code block themes for lightmode and darkmode globally.

By default, we use one-light and one-dark for lightmode and darkmode respectively, and you can change them by setting light and dark in plugin.prismjs.


Due to output size consideration, we will not import all styles globally to support code theme config per code block.

Available Themes

Light themes

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

Dark themes

  • 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

With Shiki Highlighter

Prism.js is fast and lightweight, but it can not highlight all syntax correctly. If you want a more accurate highlight result, you can use @vuepress/plugin-shiki.

  1. Disable @vuepress/plugin-prismjs plugin by setting plugins.prismjs: false in theme options.

  2. Install the plugin:

    pnpm add -D @vuepress/plugin-shiki@next
  3. Import shiki plugin and use it:

    // .vuepress/config.ts
    import { shikiPlugin } from "@vuepress/plugin-shiki";
    import { defineUserConfig } from "vuepress";
    export default defineUserConfig({
      plugins: [
          // your options
          theme: "one-dark-pro",
  4. Set background color and font color for code blocks according to theme you want to use by adding these variables in .vuepress/styles/config.scss:.

    • $code-bg-color: background color for code blocks
    • $code-color: font color for code blocks