vuepress-theme-plume/docs/en/config/plugins/shiki.md

title, createTime, permalink

title	createTime	permalink
Code Highlighting	2025/10/09 10:21:47	/en/config/plugins/code-highlight/

Overview

The theme's built-in code highlighting plugin provides syntax highlighting for code blocks.

Related plugin: @vuepress/plugin-shiki

The theme uses Shiki to implement syntax highlighting with colored text in Markdown code blocks. Shiki supports multiple programming languages.

You can find the list of supported languages in Shiki's repository.

Features

• Code Block Titles
• Line Highlighting
• Code Focus
• Code Diff
• Error and Warning Highlighting
• Word Highlighting
• Code Block Folding
• twoslash: Provides inline type hints within code blocks.

Configuration

Default configuration:

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    codeHighlighter: {
      themes: { light: 'vitesse-light', dark: 'vitesse-dark' },
      notationDiff: true,
      notationErrorLevel: true,
      notationFocus: true,
      notationHighlight: true,
      notationWordHighlight: true,
      highlightLines: true,
      collapsedLines: false,
      lineNumbers: true,
    },
    // Can also be configured via plugins.shiki, but not recommended
    plugins: {
      shiki: {}
    }
  }),
})

themes

• Type: { light: string, dark: string }
• Default: { light: 'vitesse-light', dark: 'vitesse-dark' }

Code highlighting themes supporting light/dark dual themes.

You can choose your preferred themes from the list of supported themes.

langs

• Type: string[]
• Default: []

Programming languages to be highlighted, such as javascript, typescript, python, java, c++, c#, etc. By default, languages are automatically detected based on code block language identifiers.

You can find the list of supported languages in Shiki's repository.

defaultLang

• Type: string
• Default: text

Fallback language to use when the specified language is not available.

lineNumbers

• Type: boolean | number
• Default: true

Whether to display line numbers.

true: Display line numbers
false: Hide line numbers
number: Minimum number of lines required to display line numbers.

twoslash

• Type: boolean | ShikiTwoslashOptions
• Default: false

Whether to enable type hint support for typescript and vue languages.

whitespace

• Type: boolean | 'all' | 'boundary' | 'trailing'
• Default: false

Render whitespace characters (tabs and spaces) as separate spans (with tab or space class names).

Effect:

collapsedLines

• Type: boolean | number
• Default: false

Collapse code blocks to the specified number of lines.

transformers

• Type: ShikiTransformer[]
• Default: []

Code transformers. Refer to shiki transformers for more information.