此页内容

约 290 字小于 1 分钟

2023-12-23

npm versionnpm yearly downloadsgithub source

指南

使用 shiki 来为 Markdown 代码块启用代码高亮。

说明

vuepress@v2 将会在新的版本中, 对 @vuepress/plugin-shiki 做出调整,迁移 shikishikiji

当前主题将会持续关注其进度,在其实现预期的功能后,主题会迁移至官方插件。

安装

yarn
yarn add @vuepress-plume/plugin-shikiji

使用

// .vuepress/config.ts
import shikiPlugin from '@vuepress-plume/plugin-shikiji'
module.exports = {
  //...
  plugins: [
    shikiPlugin({
      // options ...
    })
  ]
  // ...
}

Options

interface ShikiOptions {
  /**
   * Custom theme for syntax highlighting.
   *
   * You can also pass an object with `light` and `dark` themes to support dual themes.
   *
   * @example { theme: 'github-dark' }
   * @example { theme: { light: 'github-light', dark: 'github-dark' } }
   *
   * You can use an existing theme.
   * @see https://shiki.style/themes
   * Or add your own theme.
   * @see https://shiki.style/guide/load-theme
   */
  theme?: ThemeOptions
  /**
   * Languages for syntax highlighting.
   * @see https://shiki.style/languages
   */
  languages?: LanguageInput[]
  /**
   * Custom language aliases.
   *
   * @example { 'my-lang': 'js' }
   * @see https://shiki.style/guide/load-lang#custom-language-aliases
   */
  languageAlias?: Record<string, string>
  /**
   * Setup Shiki instance
   */
  shikiSetup?: (shikiji: Highlighter) => void | Promise<void>
  /**
   * Fallback language when the specified language is not available.
   */
  defaultHighlightLang?: string
  /**
   * Transformers applied to code blocks
   * @see https://shiki.style/guide/transformers
   */
  codeTransformers?: ShikiTransformer[]
  /**
   * Enable transformerRenderWhitespace
   * @default false
   */
  whitespace?: boolean
}