Code 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.

Tips

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
   

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

   npm i -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: [
       shikiPlugin({
         // your options
         theme: "one-dark-pro",
       }),
     ],
   });
   

   // .vuepress/config.js
   import { shikiPlugin } from "@vuepress/plugin-shiki";
   
   export default {
     plugins: [
       shikiPlugin({
         // 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