vuepress-theme-plume/docs/en/guide/code/intro.md

title, icon, createTime, permalink

title	icon	createTime	permalink
Introduction	ic:outline-code	2025/10/08 10:35:45	/en/guide/code/intro/

Overview

The theme uses Shiki to implement syntax highlighting in Markdown code blocks.

::: important Important Changes

Starting from version ==1.0.0-rc.136==, the theme has migrated the code highlighting plugin from the internally implemented @vuepress-plume/plugin-shikiji to @vuepress/plugin-shiki provided by the vuepress ecosystem.

(No need to worry about significant changes - I am also one of the main developers of @vuepress/plugin-shiki, which implements functionality consistent with the theme's original plugin.)

Some configuration items require adjustments:

• The languages configuration has been changed to the langs option. You no longer need to manually add the languages you use; the plugin will automatically recognize and load language packages as needed.
• The themes configuration has been changed to:
  • When using a single theme configuration, use the theme option to configure the code block theme
  • When using dual theme configuration, use the themes option to configure the code block themes.

:::

Languages

Shiki supports over 190+ languages. You can view the complete list of supported languages at languages.

You can use the following syntax to enable highlighting for code written in your chosen language:

``` [lang]
<!-- Your code content -->
```

Where [lang] represents the programming language you are using.

Example:

// [!code word:js]
``` js
const a = 1
console.log(a)
```

const a = 1
console.log(a)

Highlighting Themes

Shiki supports over 40+ highlighting themes.

You can find the complete list of supported themes at Themes and customize the highlighting theme according to your preference.

Theme Plume's default configuration for code block themes:

export default defineUserConfig({
  theme: plumeTheme({
    codeHighlighter: {
      themes: { light: 'vitesse-light', dark: 'vitesse-dark' }, // [!code highlight]
    }
  })
})

The default configuration supports using the vitesse-light/vitesse-dark themes for light/dark modes respectively.

Additional Features

Thanks to the powerful capabilities of Shiki, Theme Plume provides additional feature support for code blocks, enhancing their expressive power.

Additionally, to facilitate better code demonstrations, Theme Plume provides syntax support for embedding CodePen, Js Fiddle, Code Sandbox, and Replit, allowing you to easily embed code demonstrations.

Examples