From df11c046854016e7d9ad043d0fc46b40beb9bddf Mon Sep 17 00:00:00 2001 From: Nicholas Ruffing Date: Thu, 28 Dec 2023 04:47:52 -0500 Subject: [PATCH] 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 --- .vscode/settings.json | 3 + plugins/plugin-shiki/package.json | 2 +- plugins/plugin-shiki/src/node/shikiPlugin.ts | 58 ++++++++++++++++++-- pnpm-lock.yaml | 32 ++++------- 4 files changed, 68 insertions(+), 27 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 0cf8a1b744..830f9a6abe 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -29,12 +29,15 @@ "globby", "gtag", "mdit", + "nord", "nprogress", "prefetch", "preload", "prismjs", "shiki", + "shikiji", "slugify", + "tsbuildinfo", "unmount", "vuejs", "vuepress", diff --git a/plugins/plugin-shiki/package.json b/plugins/plugin-shiki/package.json index 21660ff560..6ec544becb 100644 --- a/plugins/plugin-shiki/package.json +++ b/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" diff --git a/plugins/plugin-shiki/src/node/shikiPlugin.ts b/plugins/plugin-shiki/src/node/shikiPlugin.ts index 6ba97ecd21..1d4e5cc6df 100644 --- a/plugins/plugin-shiki/src/node/shikiPlugin.ts +++ b/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 + | SpecialLanguage + +export type ShikiTheme = + | ThemeRegistration + | ThemeRegistrationRaw + | StringLiteralUnion /** * Options of @vuepress/plugin-shiki */ -export type ShikiPluginOptions = Pick +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 }), }) }, }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 337d23077c..6c9e0b981b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -363,9 +363,9 @@ importers: '@vuepress/core': specifier: 2.0.0-rc.0 version: 2.0.0-rc.0(typescript@5.3.3) - shiki: - specifier: ^0.14.7 - version: 0.14.7 + shikiji: + specifier: ^0.9.12 + version: 0.9.12 plugins/plugin-theme-data: dependencies: @@ -3854,10 +3854,6 @@ packages: resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==} engines: {node: '>=12'} - /ansi-sequence-parser@1.1.1: - resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==} - dev: false - /ansi-styles@3.2.1: resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} engines: {node: '>=4'} @@ -6380,6 +6376,7 @@ packages: /jsonc-parser@3.2.0: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} + dev: true /jsonfile@6.1.0: resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} @@ -8074,13 +8071,14 @@ packages: resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==} dev: true - /shiki@0.14.7: - resolution: {integrity: sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==} + /shikiji-core@0.9.12: + resolution: {integrity: sha512-AYsAtsbZuq0FPT3mdskNMa+yxD5VwXrFC2sH7R2ELmncVGNYvSzR6Zlfq8iEzINq7/kKL5prtt81UFzFWTTbxQ==} + dev: false + + /shikiji@0.9.12: + resolution: {integrity: sha512-jYbulSGcPKYKu2uFZOSg4lgrF7s9s8/ITFzRvczE6633wypMjnnTcRnG/mCFe6v1Dbov7bRCMsXVINBUD2FV9w==} dependencies: - ansi-sequence-parser: 1.1.1 - jsonc-parser: 3.2.0 - vscode-oniguruma: 1.7.0 - vscode-textmate: 8.0.0 + shikiji-core: 0.9.12 dev: false /side-channel@1.0.4: @@ -9000,14 +8998,6 @@ packages: - terser dev: true - /vscode-oniguruma@1.7.0: - resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==} - dev: false - - /vscode-textmate@8.0.0: - resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==} - dev: false - /vue-demi@0.14.6(vue@3.3.13): resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==} engines: {node: '>=12'}