docs(plugin-shiki): update to use shikiji

vuepress · Dec 28, 2023 · e98b7fb · e98b7fb
1 parent d653031
commit e98b7fb
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 31 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -33,6 +33,7 @@
     "preload",
     "prismjs",
     "shiki",
+    "shikiji",
     "slugify",
     "unmount",
     "vuejs",

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -192,6 +192,11 @@ export default defineUserConfig({
       componentsDir: path.resolve(__dirname, './components'),
     }),
     // only enable shiki plugin in production mode
-    isProd ? shikiPlugin({ theme: 'dark-plus' }) : [],
+    isProd
+      ? shikiPlugin({
+          langs: ['bash', 'diff', 'json', 'md', 'ts', 'vue'],
+          theme: 'dark-plus',
+        })
+      : [],
   ],
 })
diff --git a/docs/reference/plugin/shiki.md b/docs/reference/plugin/shiki.md
@@ -2,10 +2,10 @@
 
 <NpmBadge package="@vuepress/plugin-shiki" />
 
-This plugin will enable syntax highlighting for markdown code fence with [Shiki](https://shiki.matsu.io/).
+This plugin will enable syntax highlighting for markdown code fence with [Shiki](https://shiki.matsu.io/) ([Shikiji](https://shikiji.netlify.app/)).
 
 ::: tip
-[Shiki](https://shiki.matsu.io/) is the syntax highlighter being used by VSCode. It has higher fidelity, but it is slower than [Prism.js](https://prismjs.com/).
+[Shiki](https://shiki.matsu.io/) is the syntax highlighter being used by VSCode. It has higher fidelity, but it could be slower than [Prism.js](https://prismjs.com/), especially when you have a lot of code blocks.
 
 You could consider disabling this plugin in `dev` mode to get better development experience.
 :::
@@ -23,41 +23,53 @@ 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:
+  - [shikiji > Languages](https://shikiji.netlify.app/languages)
+
 ### theme
 
-- Type: `IThemeRegistration`
+- Type: `ShikiTheme`
 
 - Default: `'nord'`
 
 - Details:
 
-  Theme of shiki.
+  Theme of shikiji.
 
-  This option will be forwarded to `getHighlighter()` method of shiki.
+  This option will be forwarded to `codeToHtml()` method of shikiji.
 
 - Also see:
-  - [shiki > themes](https://github.com/shikijs/shiki/blob/master/docs/themes.md)
+  - [shikiji > Themes](https://shikiji.netlify.app/themes)
 
-### langs
-
-- Type: `(Lang | ILanguageRegistration)[]`
+### themes
 
-- Default: `[]`
+- Type: `Record<'dark' | 'light', ShikiTheme>`
 
 - Details:
 
-  Languages of shiki.
-
-  This option will be forwarded to `getHighlighter()` method of shiki.
+  Dark / Light Dual themes of shikiji.
 
-  If no languages are provided, shiki will load all available languages automatically.
+  This option will be forwarded to `codeToHtml()` method of shikiji.
 
 - Also see:
-  - [shiki > languages](https://github.com/shikijs/shiki/blob/master/docs/languages.md)
+  - [shikiji > Dual Themes](https://shikiji.netlify.app/guide/dual-themes)
diff --git a/docs/zh/reference/plugin/shiki.md b/docs/zh/reference/plugin/shiki.md
@@ -2,10 +2,10 @@
 
 <NpmBadge package="@vuepress/plugin-shiki" />
 
-该插件使用 [Shiki](https://shiki.matsu.io/) 来为 Markdown 代码块启用代码高亮。
+该插件使用 [Shiki](https://shiki.matsu.io/) ([Shikiji](https://shikiji.netlify.app/)) 来为 Markdown 代码块启用代码高亮。
 
 ::: tip
-[Shiki](https://shiki.matsu.io/) 是 VSCode 正在使用的代码高亮器。它具有更高的保真度，但比 [Prism.js](https://prismjs.com/) 要慢一些，特别是在有大量代码块需要处理的时候。
+[Shiki](https://shiki.matsu.io/) 是 VSCode 正在使用的代码高亮器。它具有更高的保真度，但可能会比 [Prism.js](https://prismjs.com/) 要慢一些，特别是在有大量代码块需要处理的时候。
 
 你可以考虑在 `dev` 模式下禁用该插件来获取更好的开发体验。
 :::
@@ -23,41 +23,53 @@ export default {
   plugins: [
     shikiPlugin({
       // 配置项
+      langs: ['ts', 'json', 'vue', 'md', 'bash', 'diff'],
     }),
   ],
 }
 ```
 
 ## 配置项
 
+### langs
+
+- 类型： `ShikiLang[]`
+
+- 详情：
+
+  Shikiji 要解析的代码块的语言。
+
+  该配置项会被传递到 Shikiji 的 `getHighlighter()` 方法中。
+
+  你需要明确传入所有你使用的语言列表，否则 Shikiji 将不会加载任何语言。
+
+- 参考：
+  - [shikiji > Languages](https://shikiji.netlify.app/languages)
+
 ### theme
 
-- 类型： `IThemeRegistration`
+- 类型： `ShikiTheme`
 
 - 默认值： `'nord'`
 
 - 详情：
 
-  Shiki 的主题。
+  Shikiji 的主题。
 
-  该配置项会被传递到 Shiki 的 `getHighlighter()` 方法中。
+  该配置项会被传递到 Shikiji 的 `codeToHtml()` 方法中。
 
 - 参考：
-  - [shiki > themes](https://github.com/shikijs/shiki/blob/master/docs/themes.md)
+  - [shikiji > Themes](https://shikiji.netlify.app/themes)
 
-### langs
-
-- 类型： `(Lang | ILanguageRegistration)[]`
+### themes
 
-- 默认值： `[]`
+- 类型：`Record<'dark' | 'light', ShikiTheme>`
 
 - 详情：
 
-  Shiki 的语言。
-
-  该配置项会被传递到 Shiki 的 `getHighlighter()` 方法中。
+  Shikiji 的暗黑和明亮模式双主题。
 
-  如果没有传入语言， Shiki 会自动加载所有可用的语言。
+  该配置项会被传递到 Shikiji 的 `codeToHtml()` 方法中。
 
 - 参考：
-  - [shiki > languages](https://github.com/shikijs/shiki/blob/master/docs/languages.md)
+  - [shikiji > Dual Themes](https://shikiji.netlify.app/guide/dual-themes)