VuePress

shiki

@vuepress/plugin-shiki

This plugin will enable syntax highlighting for markdown code fence with Shikiopen in new window (Shikijiopen in new window).

TIP

Shikiopen in new window is the syntax highlighter being used by VSCode. It has higher fidelity, but it could be slower than Prism.jsopen in new window, 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 shikiji.

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

    You need to provide the languages list you are using explicitly, otherwise shikiji won't load any languages.

  • Also see:

theme

themes

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

  • Details:

    Dark / Light Dual themes of shikiji.

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

  • Also see: