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

.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.5"
+    "shikiji": "^0.9.11"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,26 +1,58 @@
 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';
+
+const defaultTheme = 'nord'
+
+export type ShikiPluginTheme =
+  | ThemeRegistration
+  | ThemeRegistrationRaw
+  | StringLiteralUnion<BundledTheme>
 
 /**
  * Options of @vuepress/plugin-shiki
  */
-export type ShikiPluginOptions = Pick<HighlighterOptions, 'theme' | 'langs'>
+export interface ShikiPluginOptions {
+  theme?: ShikiPluginTheme
+  lightTheme?: ShikiPluginTheme
+  darkTheme?: ShikiPluginTheme
+  langs?: (
+    | LanguageInput
+    | StringLiteralUnion<BundledLanguage>
+    | SpecialLanguage
+  )[]
+}
 
 export const shikiPlugin = ({
-  theme = 'nord',
+  theme,
+  lightTheme,
+  darkTheme,
   langs,
 }: ShikiPluginOptions = {}): Plugin => ({
   name: '@vuepress/plugin-shiki',
-
   extendsMarkdown: async (md) => {
     const highlighter = await getHighlighter({
-      theme,
+      themes: [theme, lightTheme, darkTheme].filter(
+        (t) => t !== undefined,
+      ) as ShikiPluginTheme[],
       langs,
     })
     md.options.highlight = (code, lang) =>
       highlighter.codeToHtml(code, {
         lang,
+        themes: {
+          light: lightTheme ?? theme ?? defaultTheme,
+          dark: darkTheme ?? theme ?? defaultTheme,
+        },
       })
   },
 })