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
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
Default:
true
Details:
true
: enable line numbers.false
: disabled line numbers.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.
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 from2
.
Input:
```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'
```
Output:
// 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'
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}
- Line ranges:
Input:
```ts {1,7-9}
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'
export default defineUserConfig({
title: 'Hello, VuePress',
theme: defaultTheme({
logo: 'https://vuejs.org/images/logo.png',
}),
})
```
Output:
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'
export default defineUserConfig({
title: 'Hello, VuePress',
theme: defaultTheme({
logo: 'https://vuejs.org/images/logo.png',
}),
})
TIP
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:
Input:
```ts console.log('hewwo') // [!code --] console.log('hello') // [!code ++] console.log('goodbye') ```
Output:
console.log('hewwo') console.log('hello') console.log('goodbye')
Also see:
notationFocus
Type:
boolean
Default:
false
Details: Whether enable notation focus.
Example:
Input:
```ts console.log('Not focused') console.log('Focused') // [!code focus] console.log('Not focused') ```
Output:
console.log('Not focused') console.log('Focused') console.log('Not focused')
Also see:
notationHighlight
Type:
boolean
Default:
false
Details: Whether enable notation highlight.
Example:
Input:
```ts console.log('Not highlighted') console.log('Highlighted') // [!code highlight] console.log('Not highlighted') ```
Output:
console.log('Not highlighted') console.log('Highlighted') console.log('Not highlighted')
Also see:
notationErrorLevel
Type:
boolean
Default:
false
Details: Whether enable notation error level.
Example:
Input:
```ts console.log('No errors or warnings') console.warn('Warning') // [!code warning] console.error('Error') // [!code error] ```
Output:
console.log('No errors or warnings') console.warn('Warning') console.error('Error')
Also see:
notationWordHighlight
Type:
boolean
Default:
false
Details: Whether enable notation word highlight.
Word highlight must be written on a separate line.
Example:
Input:
```ts // [!code word:Hello] const message = 'Hello World' console.log(message) // prints Hello World ```
Output:
const message = 'Hello World' console.log(message) // prints Hello World
Example:Highlight words based on the meta string provided on the code snippet
Input:
```js /Hello/ const msg = 'Hello World' console.log(msg) console.log(msg) // prints Hello World ```
Output:
const msg = 'Hello World' console.log(msg) console.log(msg) // prints Hello World
Also see:
whitespace
Type:
boolean | 'all' | 'boundary' | 'trailing'
Default:
false
Details: Whether enable whitespace characters (Space and Tab).
true
: enable render whitespace, same ofall
false
: disable render whitespace'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:
Input:
```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 ```
Output:
<!-- 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
Also see:
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
. That means, if you disablepreWrapper
, the line line numbers will also be disabled.TIP
You can disable it if you want to implement them in client side. For example, Prismjs Line Highlight or Prismjs Line Numbers.