VuePress EcosystemVuePress Ecosystem
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • Theme Guidelines
  • theme-default
  • Hope Theme
  • Plume Theme
  • Reco Theme
  • Feature Plugins
  • Markdown Plugins
  • Search Plugins
  • Blog Plugins
  • PWA Plugins
  • Analytics Plugins
  • SEO Plugins
  • Development Plugins
  • Tool Plugins
  • AI Plugins
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-preview
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • Slide Demo
    • Reveal.js Themes
  • shiki

prismjs

@vuepress/plugin-prismjs

This plugin will enable syntax highlighting for markdown code fence with Prism.js.

This plugin has been integrated into the default theme.

Notice that this plugin would only tokenize the code fence without adding styles. When using it with a custom theme, you may need to choose and import Prism.js style theme yourself.

Usage

npm i -D @vuepress/plugin-prismjs@next
.vuepress/config.ts
import { prismjsPlugin } from '@vuepress/plugin-prismjs'

export default {
  plugins: [
    prismjsPlugin({
      // options
    }),
  ],
}

Options

theme

  • Type: PrismjsTheme

  • Default: 'nord'

  • Details: Theme of Prismjs, will be applied to code blocks.

themes

  • Type: { light: PrismjsTheme; dark: PrismjsTheme }

  • Details:

    Apply Light / Dark Dual themes.

    Note: To use this, your theme must set data-theme="dark" attribute on the <html> tag when dark mode is enabled.

Available Prism.js Light themes

  • ateliersulphurpool-light
  • coldark-cold
  • coy
  • duotone-light
  • ghcolors
  • gruvbox-light
  • material-light
  • one-light
  • vs

Available Prism.js 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

lineNumbers

  • Type: boolean | number | 'disable'

  • Default: true

  • Details:

    • number: the minimum number of lines to enable line numbers.
      For example, if you set it to 4, line numbers will only be enabled when your code block has at least 4 lines of code.
    • true: enable line numbers globally.
    • false: disable line numbers globally.
    • 'disable': Completely disable line numbers, :line-numbers will not take effect.

    You can add :line-numbers / :no-line-numbers mark in your fenced code blocks to override the value set in config, and customize the beginning number by adding = after :line-numbers. For example, :line-numbers=2 means the line numbers in code blocks will start from 2.

// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
// line-numbers is disabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```ts:line-numbers
// line-numbers is enabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts :no-line-numbers
// line-numbers is disabled
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts :line-numbers=2
// line-numbers is enabled and start from 2
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```

highlightLines

  • Type: boolean

  • Default: true

  • Details:

    Whether enable code line highlighting. You can highlight specified lines of your code blocks by adding line ranges mark in your fenced code blocks:

    • Line ranges: {5-8}
    • Multiple single lines: {4,7,9}
    • Combined: {4,7-13,16,23-27,40}
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})
```ts {1,7-9}
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  title: 'Hello, VuePress',

  theme: defaultTheme({
    logo: 'https://vuepress.vuejs.org/images/hero.png',
  }),
})
```

collapsedLines

  • Type: boolean | number | 'disable'

  • Default: 'disable'

  • Details: Default behavior of code block collapsing.

    • number: collapse the code block starting from line number by default, for example, 12 means collapsing the code block starting from line 12.
    • true: Equivalent to 15, collapsing the code block starting from line 15 by default.
    • false: Add support for code block collapsing, but disable it globally
    • 'disable': Completely disable code block collapsing, :collapsed-lines will not take effect.

    To override global settings, you can add the :collapsed-lines / :no-collapsed-lines marker to the code block. You can also add = after :collapsed-lines to customize the starting line number being collapsed, for example, :collapsed-lines=12 means collapsing the code block starting from line 12.

html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: inherit;
}

/* the three main rows going down the page */

body > div {
  height: 25%;
}

.thumb {
  float: left;
  width: 25%;
  height: 100%;
  object-fit: cover;
}

.main {
  display: none;
}
html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: inherit;
}

/* the three main rows going down the page */

body > div {
  height: 25%;
}

.thumb {
  float: left;
  width: 25%;
  height: 100%;
  object-fit: cover;
}

.main {
  display: none;
}
html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: inherit;
}

/* the three main rows going down the page */

body > div {
  height: 25%;
}

.thumb {
  float: left;
  width: 25%;
  height: 100%;
  object-fit: cover;
}

.main {
  display: none;
}
<!-- Collapsed by default starting from line 15 -->

```css :collapsed-lines
html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: inherit;
}

/* the three main rows going down the page */

body > div {
  height: 25%;
}

.thumb {
  float: left;
  width: 25%;
  height: 100%;
  object-fit: cover;
}

.main {
  display: none;
}
```

<!-- Disabled collapsed -->

```css :no-collapsed-lines
html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: inherit;
}

/* the three main rows going down the page */

body > div {
  height: 25%;
}

.thumb {
  float: left;
  width: 25%;
  height: 100%;
  object-fit: cover;
}

.main {
  display: none;
}
```

<!-- Collapsed starting from line 10 -->

```css :collapsed-lines=10
html {
  margin: 0;
  background: black;
  height: 100%;
}

body {
  margin: 0;
  width: 100%;
  height: inherit;
}

/* the three main rows going down the page */

body > div {
  height: 25%;
}

.thumb {
  float: left;
  width: 25%;
  height: 100%;
  object-fit: cover;
}

.main {
  display: none;
}
```

codeBlockTitle

  • Type: boolean | CodeBlockTitleRender

    type CodeBlockTitleRender = (title: string, code: string) => string
  • Default: true

  • Details: Whether to enable code block title rendering. Add title="Title" after the code block ``` to set the title.

    Pass CodeBlockTitleRender to customize the title rendering.

  • Example:

    foo/baz.js
    console.log('hello')
    ```ts title="foo/baz.js"
    console.log('hello')
    ```

Tips

In the new version, some functionalities similar to shiki have been implemented, allowing you to style code blocks using the same syntax.

notationDiff

  • Type: boolean

  • Default: false

  • Details: Whether enable notation diff.

  • Example:

    console.log('hewwo') 
    console.log('hello') 
    console.log('goodbye')
    ```ts
    console.log('hewwo') // [!code --]
    console.log('hello') // [!code ++]
    console.log('goodbye')
    ```
  • Also see:

    • Shiki > Notation Diff

notationFocus

  • Type: boolean

  • Default: false

  • Details: Whether enable notation focus.

  • Example:

    console.log('Not focused')
    console.log('Focused') 
    console.log('Not focused')
    ```ts
    console.log('Not focused')
    console.log('Focused') // [!code focus]
    console.log('Not focused')
    ```
  • Also see:

    • Shiki > Notation Focus

notationHighlight

  • Type: boolean

  • Default: false

  • Details: Whether enable notation highlight.

  • Example:

    console.log('Not highlighted')
    console.log('Highlighted') 
    console.log('Not highlighted')
    ```ts
    console.log('Not highlighted')
    console.log('Highlighted') // [!code highlight]
    console.log('Not highlighted')
    ```
  • Also see:

    • Shiki > Notation Highlight

notationErrorLevel

  • Type: boolean

  • Default: false

  • Details: Whether enable notation error level.

  • Example:

    console.log('No errors or warnings')
    console.warn('Warning') 
    console.error('Error') 
    ```ts
    console.log('No errors or warnings')
    console.warn('Warning') // [!code warning]
    console.error('Error') // [!code error]
    ```
  • Also see:

    • Shiki > Notation Error Level

notationWordHighlight

  • Type: boolean

  • Default: false

  • Details: Whether enable notation word highlight.

    Word highlight must be written on a separate line.

  • Example:

    Highlight words with comments

    const message = 'Hello World'
    console.log(message) // prints Hello World
    ```ts
    // [!code word:Hello]
    const message = 'Hello World'
    console.log(message) // prints Hello World
    ```

    Highlight words based on the meta string provided on the code snippet

    const msg = 'Hello World'
    console.log(msg) // prints Hello World
    ```js /Hello/
    const msg = 'Hello World'
    console.log(msg) // prints Hello World
    ```
  • Also see:

    • Shiki > Notation Word Highlight

whitespace

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

  • Default: false

  • Details: Whether enable whitespace characters (Space and Tab).

    • true: enable whitespace, but not render any whitespace by default
    • false: completely disable render whitespace, :whitespace will not take effect.
    • 'all': render all whitespace
    • 'boundary': render leading and trailing whitespace of the line
    • 'trailing': render trailing whitespace of the line

    You can add :whitespace / :no-whitespace mark in your fenced code blocks to override the value set in config, and customize the render type by adding = after :whitespace. For example :whitespace=boundary will render leading and trailing whitespace of the line.

  • Example:

    <!-- render all whitespace -->
    
    A text  
    with trailing spaces
    
        indented text
    <!-- render leading and trailing whitespace of the line -->
    
    A text  
    with trailing spaces
    
        indented text
    <!-- render trailing whitespace of the line -->
    
    A text  
    with trailing spaces
    
        indented text
    <!-- disable render whitespace -->
    
    A text  
    with trailing spaces
    
        indented text
    ```md :whitespace
    <!-- render all whitespace -->
    
    A text  
    with trailing spaces
    
        indented text
    ```
    
    ```md :whitespace=boundary
    <!-- render leading and trailing whitespace of the line -->
    
    A text  
    with trailing spaces
    
        indented text
    ```
    
    ```md :whitespace=trailing
    <!-- render trailing whitespace of the line -->
    
    A text  
    with trailing spaces
    
        indented text
    ```
    
    ```md :no-whitespace
    <!-- disable render whitespace -->
    
    A text  
    with trailing spaces
    
        indented text
    ```
  • Also see:

    • Shiki > Render Whitespace

preloadLanguages

  • Type: string[]

  • Default: ['markdown', 'jsdoc', 'yaml']

  • Details:

    Languages to preload.

    By default, languages will be loaded on demand when parsing markdown files.

    However, Prism.js has some potential issues about loading languages dynamically. To avoid them, you can preload languages via this option.

preWrapper

  • Type: boolean

  • Default: true

  • Details:

    Adds extra wrapper outside <pre> tag or not.

    The wrapper is required by the lineNumbers and collapsedLines. That means, if you disable preWrapper, the line line numbers and collapsed lines will also be disabled.

    Tips

    You can disable it if you want to implement them in client side. For example, Prismjs Line Highlight or Prismjs Line Numbers.

Edit this page on GitHub
Last Updated:: 6/2/25, 3:20 PM
Contributors: Mister-Hope, pengzhanbo
Prev
links-check
Next
revealjs