From ff568659e5355e8572c3c8314a42902234165600 Mon Sep 17 00:00:00 2001 From: barbapapazes Date: Thu, 9 Nov 2023 16:48:12 +0100 Subject: [PATCH 1/2] fix: does not import every langs and themes --- playground/nuxt.config.ts | 17 +++------ src/runtime/shiki/event-handler.ts | 5 ++- src/runtime/shiki/highlighter.ts | 58 ++++++++++++++++-------------- 3 files changed, 39 insertions(+), 41 deletions(-) diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index a49b1d20..3365106e 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -8,20 +8,11 @@ export default defineNuxtConfig({ highlight: { theme: { default: 'vitesse-light', - dark: 'material-theme-palenight', + // dark: 'material-theme-palenight', }, - preload: [ - 'sql' - ] - }, - remarkPlugins: { - 'remark-mdc': { - options: { - experimental: { - autoUnwrap: true - } - } - } + // preload: [ + // 'sql' + // ] } }, devtools: { diff --git a/src/runtime/shiki/event-handler.ts b/src/runtime/shiki/event-handler.ts index b417ae62..7d0aa801 100644 --- a/src/runtime/shiki/event-handler.ts +++ b/src/runtime/shiki/event-handler.ts @@ -6,7 +6,9 @@ import { useRuntimeConfig } from '#imports' export default lazyEventHandler(async () => { const { highlight } = useRuntimeConfig().mdc - + + console.log(highlight) + try { // try loading `.wasm` directly, for cloudflare workers // @ts-expect-error @@ -25,6 +27,7 @@ export default lazyEventHandler(async () => { const theme = JSON.parse(themeString as string) const highlights = highlightsString ? JSON.parse(highlightsString as string) as number[] : undefined + console.log('event-handler.lang', lang) return await shiki.getHighlightedAST(code as string, lang as BuiltinLanguage, theme as BuiltinTheme, { highlights }) }) }) diff --git a/src/runtime/shiki/highlighter.ts b/src/runtime/shiki/highlighter.ts index d242ef16..8b52b5a5 100644 --- a/src/runtime/shiki/highlighter.ts +++ b/src/runtime/shiki/highlighter.ts @@ -1,4 +1,5 @@ -import { getHighlighter, type ThemeInput, type Highlighter, type BuiltinLanguage, type BuiltinTheme } from 'shikiji' +import { type ThemeInput, type Highlighter, type BuiltinLanguage, type BuiltinTheme} from 'shikiji' +import { HighlighterCore, getHighlighterCore } from 'shikiji/core' import type { HighlightResult, HighlighterOptions, Theme } from './types' import type { Element } from '../types/hast' @@ -6,39 +7,40 @@ export const useShikiHighlighter = createSingleton((opts?: any) => { // Grab highlighter config from publicRuntimeConfig const { theme, preload, wrapperStyle } = opts || {} - let promise: Promise | undefined + let promise: Promise | undefined const getShikiHighlighter = () => { if (!promise) { // Initialize highlighter with defaults - promise = getHighlighter({ + promise = getHighlighterCore({ themes: [ - ((theme as any)?.default || theme || 'dark-plus') as BuiltinTheme, + // ((theme as any)?.default || theme || 'dark-plus') as BuiltinTheme, ], langs: [ ...(preload || []), - 'diff', - 'json', - 'js', - 'ts', - 'css', - 'shell', - 'html', - 'md', - 'yaml', - 'vue', - 'mdc' + // 'diff', + // 'json', + // 'js', + // 'ts', + // 'css', + // 'shell', + // 'html', + // 'md', + // 'yaml', + // 'vue', + // 'mdc' ] as any[] - }).then((highlighter) => { - // Load all themes on-demand - const themes = Object.values(typeof theme === 'string' ? { default: theme } : (theme || {})) as ThemeInput[] - - if (themes.length) { - return Promise - .all(themes.map(theme => highlighter.loadTheme(theme))) - .then(() => highlighter) - } - return highlighter }) + // .then((highlighter) => { + // // Load all themes on-demand + // const themes = Object.values(typeof theme === 'string' ? { default: theme } : (theme || {})) as ThemeInput[] + + // if (themes.length) { + // return Promise + // .all(themes.map(theme => highlighter.loadTheme(theme))) + // .then(() => highlighter) + // } + // return highlighter + // }) } return promise } @@ -52,11 +54,12 @@ export const useShikiHighlighter = createSingleton((opts?: any) => { const themeNames = Object.values(themesObject) as BuiltinTheme[] if (themeNames.length) { - await Promise.all(themeNames.map(theme => highlighter.loadTheme(theme))) + await Promise.all(themeNames.map(theme => highlighter.loadTheme(import(`shikiji/themes/${theme}.mjs`)))) } + console.log('lang', lang) if (lang && !highlighter.getLoadedLanguages().includes(lang)) { - await highlighter.loadLanguage(lang) + // await highlighter.loadLanguage(bundledLanguages[lang]()) } const root = highlighter.codeToHast(code.trimEnd(), { @@ -135,6 +138,7 @@ export const useShikiHighlighter = createSingleton((opts?: any) => { style: styles.join(''), } } catch (error: any) { + console.error(error) console.warn('[@nuxtjs/mdc] Failed to highlight code block', error.message) return { tree: [{ type: 'text', value: code }], From 451fb212ef32e0c07d0366e82da36577b32020a9 Mon Sep 17 00:00:00 2001 From: barbapapazes Date: Thu, 9 Nov 2023 16:52:29 +0100 Subject: [PATCH 2/2] fix: remove themes --- playground/nuxt.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index 3365106e..c0c9e81f 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -7,7 +7,7 @@ export default defineNuxtConfig({ mdc: { highlight: { theme: { - default: 'vitesse-light', + // default: 'vitesse-light', // dark: 'material-theme-palenight', }, // preload: [