shiki

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

TIP

Shiki is the syntax highlighter being used by VSCode. It has higher fidelity, but it could be slower than Prism.js, especially when you have a lot of code blocks.

You could consider disabling this plugin in dev mode to get better development experience.

Usage

npm i -D @vuepress/plugin-shiki@next

import { shikiPlugin } from '@vuepress/plugin-shiki'

export default {
  plugins: [
    shikiPlugin({
      // options
      langs: ['ts', 'json', 'vue', 'md', 'bash', 'diff'],
    }),
  ],
}

Options

langs

• Type: ShikiLang[]

• Details:

  Languages of code blocks to be parsed by Shiki.

  This option will be forwarded to getHighlighter() method of Shiki.

  You'd better provide the languages list you are using explicitly, otherwise Shiki will load all languages and can affect performance.

• Also see:

  • Shiki > Languages

theme

• Type: ShikiTheme

• Default: 'nord'

• Details:

  Theme of Shiki.

  This option will be forwarded to codeToHtml() method of Shiki.

• Also see:

  • Shiki > Themes

themes

• Type: Record<'dark' | 'light', ShikiTheme>

• Details:

  Dark / Light Dual themes of Shiki.

  This option will be forwarded to codeToHtml() method of Shiki.

• Also see:

  • Shiki > Dual Themes

transformers

• Type: ShikiTransformer[]

• Details:

  Transformers of Shiki.

  This option will be forwarded to codeToHtml() method of Shiki.

• Also see:

  • Shiki > Transformers