feat(plugin-shiki): migrate to esm-based shikiji (close #12) (#13)

BREAKING CHANGE: now `langs` option is required, you need to set the languages list explicitly

Co-authored-by: meteorlxy <[email protected]>

.vscode/settings.json

@@ -29,12 +29,15 @@
     "globby",
     "gtag",
     "mdit",
+    "nord",
     "nprogress",
     "prefetch",
     "preload",
     "prismjs",
     "shiki",
+    "shikiji",
     "slugify",
+    "tsbuildinfo",
     "unmount",
     "vuejs",
     "vuepress",

plugins/plugin-shiki/package.json

@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@vuepress/core": "2.0.0-rc.0",
-    "shiki": "^0.14.7"
+    "shikiji": "^0.9.12"
   },
   "publishConfig": {
     "access": "public"

plugins/plugin-shiki/src/node/shikiPlugin.ts

@@ -1,26 +1,74 @@
 import type { Plugin } from '@vuepress/core'
-import { getHighlighter } from 'shiki'
-import type { HighlighterOptions } from 'shiki'
+import { getHighlighter } from 'shikiji'
+import type {
+  BundledLanguage,
+  BundledTheme,
+  LanguageInput,
+  SpecialLanguage,
+  StringLiteralUnion,
+  ThemeRegistration,
+  ThemeRegistrationRaw,
+} from 'shikiji'
+
+export type ShikiLang =
+  | LanguageInput
+  | StringLiteralUnion<BundledLanguage>
+  | SpecialLanguage
+
+export type ShikiTheme =
+  | ThemeRegistration
+  | ThemeRegistrationRaw
+  | StringLiteralUnion<BundledTheme>
 
 /**
  * Options of @vuepress/plugin-shiki
  */
-export type ShikiPluginOptions = Pick<HighlighterOptions, 'theme' | 'langs'>
+export interface ShikiPluginOptions {
+  /**
+   * Languages to be loaded.
+   *
+   * Shikiji does not preload any languages to avoid extra overhead. So you need
+   * to specify the languages you want to use.
+   *
+   * @see https://shikiji.netlify.app/languages
+   */
+  langs?: ShikiLang[]
+
+  /**
+   * The single theme to use
+   *
+   * @see https://shikiji.netlify.app/themes
+   */
+  theme?: ShikiTheme
+
+  /**
+   * The dark and light themes to use
+   *
+   * @see https://shikiji.netlify.app/themes
+   */
+  themes?: {
+    dark: ShikiTheme
+    light: ShikiTheme
+  }
+}
 
 export const shikiPlugin = ({
-  theme = 'nord',
   langs,
+  theme = 'nord',
+  themes,
 }: ShikiPluginOptions = {}): Plugin => ({
   name: '@vuepress/plugin-shiki',
 
   extendsMarkdown: async (md) => {
     const highlighter = await getHighlighter({
-      theme,
       langs,
+      themes: themes ? [themes.dark, themes.light] : [theme],
     })
+
     md.options.highlight = (code, lang) =>
       highlighter.codeToHtml(code, {
         lang,
+        ...(themes ? { themes } : { theme }),
       })
   },
 })