feat: support dynamically loading language

README.md

@@ -45,6 +45,7 @@ Available options:
 
 - `bundledThemes` and `bundledLangs` can be configured to set bundled themes and languages.
 - `defaultTheme` and `defaultLang` can be configured to set default theme and language.
+- `dynamic` can be configured to set whether languages are dynamically loaded. (in this way, all languages will be bundled)
 - `langAlias` can be configured to set language aliases.
 - `highlightOptions` can be configured to set highlight defaults.
 
@@ -101,6 +102,19 @@ export default defineEventHandler(async (event) => {
 })
 ```
 
+### `loadShikiLanguages(highlighter)`
+
+Dynamically loading languages when options.dynamic is true.
+
+**Example:**
+
+```vue
+<script setup>
+const highlighter = await getShikiHighlighter()
+await loadShikiLanguages(highlighter, "tsx", "vue");
+</script>
+```
+
 ### `useShikiHighlighted(code, options)`
 
 Return a lazy highlighted code ref (only usable in Vue)

src/module.ts

@@ -28,6 +28,9 @@ export interface ModuleOptions {
   /** Default language */
   defaultLang?: BundledLanguage
 
+  /** Is dynamic loading enabled */
+  dynamic?: boolean
+
   /** Additional highlight options */
   highlightOptions?: HighlightOptions
 
@@ -79,6 +82,21 @@ export default defineNuxtModule<ModuleOptions>({
       },
     ])
 
+    if (options.dynamic) {
+      addImports([
+        {
+          name: 'loadShikiLanguages',
+          from: resolver.resolve('./runtime/utils'),
+        }
+      ])
+      addServerImports([
+        {
+          name: 'loadShikiLanguages',
+          from: resolver.resolve('./runtime/utils'),
+        }
+      ])
+    }
+
     // Shiki config
     const bundledThemes = Array.from(
       new Set([

src/runtime/utils.ts

@@ -1,3 +1,4 @@
+import type { BundledLanguage } from 'shiki'
 import { ref, watchEffect, watch, toRef, type Ref } from 'vue'
 import type { HighlightOptions, ShikiHighlighter } from './types'
 import { createHighlighter } from './shiki'
@@ -78,3 +79,34 @@ export async function useShikiHighlighted(
 
   return highlighted
 }
+
+/**
+ * Dynamically loading languages when options.dynamic is true.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const highlighter = await getShikiHighlighter()
+ * await loadShikiLanguages(highlighter, "tsx", "vue");
+ * </script>
+ * ```
+ */
+export async function loadShikiLanguages(
+  highlighter: ShikiHighlighter,
+  ...langs: string[]
+) {
+  const { bundledLanguages } = await import("shiki/langs");
+  const loadedLanguages = highlighter.getLoadedLanguages();
+  await Promise.all(
+    langs
+      .filter((lang) => !loadedLanguages.includes(lang))
+      .map((lang) => bundledLanguages[lang as BundledLanguage])
+      .filter(Boolean)
+      .map((dynamicLang) => new Promise<void>((resolve) => {
+        dynamicLang().then((loadedLang) => {
+          highlighter.loadLanguage(loadedLang).then(() => resolve())
+        })
+      })
+    )
+  )
+}