fix: does not import every langs and themes

playground/nuxt.config.ts

@@ -7,21 +7,12 @@ export default defineNuxtConfig({
   mdc: {
     highlight: {
       theme: {
-        default: 'vitesse-light',
-        dark: 'material-theme-palenight',
+        // default: 'vitesse-light',
+        // dark: 'material-theme-palenight',
       },
-      preload: [
-        'sql'
-      ]
-    },
-    remarkPlugins: {
-      'remark-mdc': {
-        options: {
-          experimental: {
-            autoUnwrap: true
-          }
-        }
-      }
+      // preload: [
+      //   'sql'
+      // ]
     }
   },
   devtools: {

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 })
   })
 })

src/runtime/shiki/highlighter.ts

@@ -1,44 +1,46 @@
-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'
 
 export const useShikiHighlighter = createSingleton((opts?: any) => {
   // Grab highlighter config from publicRuntimeConfig
   const { theme, preload, wrapperStyle } = opts || {}
 
-  let promise: Promise<Highlighter> | undefined
+  let promise: Promise<HighlighterCore> | 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 @@
       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 @@
         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 }],