From 5395bca4b1c1d35a4a1e06e86415b83dc5d6fd41 Mon Sep 17 00:00:00 2001 From: Nicholas Ruffing Date: Sun, 24 Dec 2023 10:47:15 -0500 Subject: [PATCH 1/6] feat(plugin-shiki): migrate to esm-based shikiji (close #12) --- .vscode/settings.json | 3 ++ plugins/plugin-shiki/package.json | 2 +- plugins/plugin-shiki/src/node/shikiPlugin.ts | 44 +++++++++++++++++--- pnpm-lock.yaml | 32 +++++--------- 4 files changed, 53 insertions(+), 28 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 d3fc5ace9a..012d9d5459 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.5" + "shikiji": "^0.9.11" }, "publishConfig": { "access": "public" diff --git a/plugins/plugin-shiki/src/node/shikiPlugin.ts b/plugins/plugin-shiki/src/node/shikiPlugin.ts index 6ba97ecd21..08c56f0d09 100644 --- a/plugins/plugin-shiki/src/node/shikiPlugin.ts +++ b/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 /** * Options of @vuepress/plugin-shiki */ -export type ShikiPluginOptions = Pick +export interface ShikiPluginOptions { + theme?: ShikiPluginTheme + lightTheme?: ShikiPluginTheme + darkTheme?: ShikiPluginTheme + langs?: ( + | LanguageInput + | StringLiteralUnion + | 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, + }, }) }, }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6d93fdcf3b..b7cb9f4aac 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.2) - shiki: - specifier: ^0.14.5 - version: 0.14.5 + shikiji: + specifier: ^0.9.11 + version: 0.9.11 plugins/plugin-theme-data: dependencies: @@ -3801,10 +3801,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'} @@ -6369,6 +6365,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==} @@ -8108,13 +8105,14 @@ packages: resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==} dev: true - /shiki@0.14.5: - resolution: {integrity: sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==} + /shikiji-core@0.9.11: + resolution: {integrity: sha512-KbZdB+0oyoyNiQT0ueXCigp/0ilu1sMvb2aD3gDIDkaQwfayet0f1/9kkh0Wvtk42KMASDR36qA8ctnTQvpocA==} + dev: false + + /shikiji@0.9.11: + resolution: {integrity: sha512-3lZxXOPdhUr42fDTWmWiSrWTbbrRR3YY70F24G+hwh3VmN33ocKdH8RpytyhBhYvSRpiPhHDwGl2C5ozlO6Xow==} 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.11 dev: false /side-channel@1.0.4: @@ -9046,14 +9044,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.9): resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==} engines: {node: '>=12'} From f391b0c07be5816ee78feae014ec68692b06b68c Mon Sep 17 00:00:00 2001 From: Nicholas Ruffing Date: Sun, 24 Dec 2023 11:38:40 -0500 Subject: [PATCH 2/6] fix(plugin-shiki): lint/formatting fix --- plugins/plugin-shiki/src/node/shikiPlugin.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/plugins/plugin-shiki/src/node/shikiPlugin.ts b/plugins/plugin-shiki/src/node/shikiPlugin.ts index 08c56f0d09..0cf1a0338f 100644 --- a/plugins/plugin-shiki/src/node/shikiPlugin.ts +++ b/plugins/plugin-shiki/src/node/shikiPlugin.ts @@ -1,15 +1,14 @@ import type { Plugin } from '@vuepress/core' -import { - - - getHighlighter - - - - - +import { getHighlighter } from 'shikiji' +import type { + BundledLanguage, + BundledTheme, + LanguageInput, + SpecialLanguage, + StringLiteralUnion, + ThemeRegistration, + ThemeRegistrationRaw, } from 'shikiji' -import type {BundledLanguage, BundledTheme, LanguageInput, SpecialLanguage, StringLiteralUnion, ThemeRegistration, ThemeRegistrationRaw} from 'shikiji'; const defaultTheme = 'nord' From 8e3f7e8a6f69897a31a282493ed37b247c084157 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Wed, 27 Dec 2023 14:39:07 +0800 Subject: [PATCH 3/6] chore: updates --- plugins/plugin-shiki/src/node/shikiPlugin.ts | 37 +++++++++----------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/plugins/plugin-shiki/src/node/shikiPlugin.ts b/plugins/plugin-shiki/src/node/shikiPlugin.ts index 0cf1a0338f..1b94a79d3c 100644 --- a/plugins/plugin-shiki/src/node/shikiPlugin.ts +++ b/plugins/plugin-shiki/src/node/shikiPlugin.ts @@ -10,48 +10,43 @@ import type { ThemeRegistrationRaw, } from 'shikiji' -const defaultTheme = 'nord' - -export type ShikiPluginTheme = +export type ShikiTheme = | ThemeRegistration | ThemeRegistrationRaw | StringLiteralUnion +export type ShikiLang = + | LanguageInput + | StringLiteralUnion + | SpecialLanguage + /** * Options of @vuepress/plugin-shiki */ export interface ShikiPluginOptions { - theme?: ShikiPluginTheme - lightTheme?: ShikiPluginTheme - darkTheme?: ShikiPluginTheme - langs?: ( - | LanguageInput - | StringLiteralUnion - | SpecialLanguage - )[] + langs?: ShikiLang[] + theme?: ShikiTheme + themes?: { + dark: ShikiTheme + light: ShikiTheme + } } export const shikiPlugin = ({ - theme, - lightTheme, - darkTheme, langs, + theme = 'nord', + themes, }: ShikiPluginOptions = {}): Plugin => ({ name: '@vuepress/plugin-shiki', extendsMarkdown: async (md) => { const highlighter = await getHighlighter({ - themes: [theme, lightTheme, darkTheme].filter( - (t) => t !== undefined, - ) as ShikiPluginTheme[], langs, + themes: themes ? [themes.dark, themes.light] : [theme], }) md.options.highlight = (code, lang) => highlighter.codeToHtml(code, { lang, - themes: { - light: lightTheme ?? theme ?? defaultTheme, - dark: darkTheme ?? theme ?? defaultTheme, - }, + ...(themes ? { themes } : { theme }), }) }, }) From 0095144915dd3e56dd462cca861eaa70ffecb9bf Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Wed, 27 Dec 2023 14:47:41 +0800 Subject: [PATCH 4/6] chore: tweaks --- plugins/plugin-shiki/src/node/shikiPlugin.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/plugin-shiki/src/node/shikiPlugin.ts b/plugins/plugin-shiki/src/node/shikiPlugin.ts index 1b94a79d3c..d2aa01bf9d 100644 --- a/plugins/plugin-shiki/src/node/shikiPlugin.ts +++ b/plugins/plugin-shiki/src/node/shikiPlugin.ts @@ -10,16 +10,16 @@ import type { ThemeRegistrationRaw, } from 'shikiji' -export type ShikiTheme = - | ThemeRegistration - | ThemeRegistrationRaw - | StringLiteralUnion - export type ShikiLang = | LanguageInput | StringLiteralUnion | SpecialLanguage +export type ShikiTheme = + | ThemeRegistration + | ThemeRegistrationRaw + | StringLiteralUnion + /** * Options of @vuepress/plugin-shiki */ From 401f916dbb11f8cdc1d3bb24f7d13227a5c24ab7 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Wed, 27 Dec 2023 14:54:34 +0800 Subject: [PATCH 5/6] chore: tweaks --- plugins/plugin-shiki/src/node/shikiPlugin.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/plugin-shiki/src/node/shikiPlugin.ts b/plugins/plugin-shiki/src/node/shikiPlugin.ts index d2aa01bf9d..514ca80c4b 100644 --- a/plugins/plugin-shiki/src/node/shikiPlugin.ts +++ b/plugins/plugin-shiki/src/node/shikiPlugin.ts @@ -38,11 +38,13 @@ export const shikiPlugin = ({ themes, }: ShikiPluginOptions = {}): Plugin => ({ name: '@vuepress/plugin-shiki', + extendsMarkdown: async (md) => { const highlighter = await getHighlighter({ langs, themes: themes ? [themes.dark, themes.light] : [theme], }) + md.options.highlight = (code, lang) => highlighter.codeToHtml(code, { lang, From 77a3edc5b35c62a89b5c10578ec861b609397395 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Wed, 27 Dec 2023 15:03:34 +0800 Subject: [PATCH 6/6] chore: add options comments --- plugins/plugin-shiki/src/node/shikiPlugin.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/plugins/plugin-shiki/src/node/shikiPlugin.ts b/plugins/plugin-shiki/src/node/shikiPlugin.ts index 514ca80c4b..1d4e5cc6df 100644 --- a/plugins/plugin-shiki/src/node/shikiPlugin.ts +++ b/plugins/plugin-shiki/src/node/shikiPlugin.ts @@ -24,8 +24,28 @@ export type ShikiTheme = * Options of @vuepress/plugin-shiki */ 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