Code Highlighting

About 391 wordsAbout 1 min

2025-10-09

Overview

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

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:

.vuepress/config.ts
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.

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.