Code Block

Highlighter

You can use markdown.highlighter to choose the highlighter you want to use, shiki for shiki, prismjs for prism.js. You can also set markdown.highlighter to an object to pass options to the highlighter, while specifying the type of highlighter with the type field:

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

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

      // or

      highlighter: "prismjs",

      // or

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

        // shiki or prism options
      },
    },
  }),
});

The shiki plugin is built-in, so you don't need to install it. If you want to use prismjs, you need to install the plugin first:

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

With @vuepress/plugin-shiki, you can use shiki to highlight your code blocks.

We support all options in @vuepress/plugin-shiki.

Background for code block Themes

To let the theme display fenced code blocks correctly, you should set background color and font color for code blocks according to theme you use in shiki by adding these variables in .vuepress/styles/config.scss:.

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

Prism.js

With @vuepress/plugin-prismjs, you can use prism.js to highlight your code blocks.

We support all options in @vuepress/plugin-prismjs.

Copy Button

The theme uses @vuepress/plugin-copy-code to add copy buttons on all fenced code blocks.

Info

vuepress-theme-hope passes plugins.copyCode in theme options as plugin options to @vuepress/plugin-copy-code.

By default, the copy button is only displayed on desktop mode. Set plugins.copyCode.showInMobile to true in theme options to display this button on mobile devices.

A success hint will be displayed once user press the copy button, and its default duration is 2000 ms, you can customize it with plugins.copyCode.duration in theme options, and you can disable the hint by setting duration to 0.