fix(parser): recreate highlighter when options did change

Author: farnabaz

src/utils/content/index.ts

@@ -1,7 +1,7 @@
 import { dirname } from 'node:path'
 import { createShikiHighlighter, rehypeHighlight } from '@nuxtjs/mdc/runtime'
 import { hash } from 'ohash'
-import type { Highlighter, MdcConfig, ModuleOptions as MDCModuleOptions } from '@nuxtjs/mdc'
+import type { Highlighter, MdcConfig, ModuleOptions as MDCModuleOptions, MdcThemeOptions } from '@nuxtjs/mdc'
 import type { Nuxt } from '@nuxt/schema'
 import { resolveAlias } from '@nuxt/kit'
 import type { LanguageRegistration } from 'shiki'
@@ -35,69 +35,75 @@ let highlightPlugin: {
 }
 let highlightPluginPromise: Promise<typeof highlightPlugin>
 async function getHighlightPluginInstance(options: HighlighterOptions) {
+  const key = hash(JSON.stringify(options || {}))
+
+  // If the key is different, reset the plugin
+  if (highlightPlugin && highlightPlugin.key !== key) {
+    highlightPlugin = undefined
+    highlightPluginPromise = undefined
+  }
+
+  // If the plugin is not initialized, initialize it
   if (!highlightPlugin) {
-    highlightPluginPromise = highlightPluginPromise || _getHighlightPlugin(options)
+    highlightPluginPromise = highlightPluginPromise || _getHighlightPlugin(key, options)
     await highlightPluginPromise
   }
 
   return highlightPlugin
 }
-async function _getHighlightPlugin(options: HighlighterOptions) {
-  const key = hash(JSON.stringify(options || {}))
-  if (!highlightPlugin || highlightPlugin.key !== key) {
-    const langs = Array.from(new Set(['bash', 'html', 'mdc', 'vue', 'yml', 'scss', 'ts', 'typescript', ...(options.langs || [])]))
-    const themesObject = typeof options.theme === 'string' ? { default: options.theme } : options.theme || { default: 'material-theme-palenight' }
-    const bundledThemes = await Promise.all(Object.entries(themesObject)
-      .map(async ([name, theme]) => [
-        name,
-        typeof theme === 'string' ? (await import(`shiki/themes/${theme}.mjs`).then(m => m.default || m)) : theme,
-      ]))
-    const bundledLangs = await Promise.all(langs.map(async lang => [
-      typeof lang === 'string' ? lang : (lang as unknown as LanguageRegistration).name,
-      typeof lang === 'string' ? await import(`@shikijs/langs/${lang}`).then(m => m.default || m) : lang,
+async function _getHighlightPlugin(key: string, options: HighlighterOptions) {
+  const langs = Array.from(new Set(['bash', 'html', 'mdc', 'vue', 'yml', 'scss', 'ts', 'typescript', ...(options.langs || [])]))
+  const themesObject = typeof options.theme === 'string' ? { default: options.theme } : options.theme || { default: 'material-theme-palenight' }
+  const bundledThemes = await Promise.all(Object.entries(themesObject)
+    .map(async ([name, theme]) => [
+      name,
+      typeof theme === 'string' ? (await import(`shiki/themes/${theme}.mjs`).then(m => m.default || m)) : theme,
     ]))
-
-    const highlighter = createShikiHighlighter({
-      bundledThemes: Object.fromEntries(bundledThemes),
-      // Configure the bundled languages
-      bundledLangs: Object.fromEntries(bundledLangs),
-      engine: createOnigurumaEngine(import('shiki/wasm')),
-      getMdcConfigs: () => Promise.resolve(parserOptions.mdcConfigs),
-    })
-
-    highlightPlugin = {
-      key,
-      instance: rehypeHighlight,
-      ...options,
-      options: {
-        highlighter: async (code, lang, theme, opts) => {
-          const result = await highlighter(code, lang, theme, opts)
-          const visitTree = {
-            type: 'element',
-            children: result.tree as Array<unknown>,
-          }
-          if (options.compress) {
-            const stylesMap: Record<string, string> = {}
-            visit(
-              visitTree,
-              node => !!(node as HighlightedNode).properties?.style,
-              (_node) => {
-                const node = _node as HighlightedNode
-                const style = node.properties!.style!
-                stylesMap[style] = stylesMap[style] || 's' + hash(style).substring(0, 4)
-                node.properties!.class = `${node.properties!.class || ''} ${stylesMap[style]}`.trim()
-                node.properties!.style = undefined
-              },
-            )
-
-            result.style = Object.entries(stylesMap).map(([style, cls]) => `html pre.shiki code .${cls}, html code.shiki .${cls}{${style}}`).join('') + result.style
-          }
-
-          return result
-        },
-        theme: Object.fromEntries(bundledThemes),
+  const bundledLangs = await Promise.all(langs.map(async lang => [
+    typeof lang === 'string' ? lang : (lang as unknown as LanguageRegistration).name,
+    typeof lang === 'string' ? await import(`@shikijs/langs/${lang}`).then(m => m.default || m) : lang,
+  ]))
+
+  const highlighter = createShikiHighlighter({
+    bundledThemes: Object.fromEntries(bundledThemes),
+    // Configure the bundled languages
+    bundledLangs: Object.fromEntries(bundledLangs),
+    engine: createOnigurumaEngine(import('shiki/wasm')),
+    getMdcConfigs: () => Promise.resolve(parserOptions.mdcConfigs),
+  })
+
+  highlightPlugin = {
+    key,
+    instance: rehypeHighlight,
+    ...options,
+    options: {
+      highlighter: async (code, lang, theme, opts) => {
+        const result = await highlighter(code, lang, theme, opts)
+        const visitTree = {
+          type: 'element',
+          children: result.tree as Array<unknown>,
+        }
+        if (options.compress) {
+          const stylesMap: Record<string, string> = {}
+          visit(
+            visitTree,
+            node => !!(node as HighlightedNode).properties?.style,
+            (_node) => {
+              const node = _node as HighlightedNode
+              const style = node.properties!.style!
+              stylesMap[style] = stylesMap[style] || 's' + hash(style).substring(0, 4)
+              node.properties!.class = `${node.properties!.class || ''} ${stylesMap[style]}`.trim()
+              node.properties!.style = undefined
+            },
+          )
+
+          result.style = Object.entries(stylesMap).map(([style, cls]) => `html pre.shiki code .${cls}, html code.shiki .${cls}{${style}}`).join('') + result.style
+        }
+
+        return result
       },
-    }
+      theme: Object.fromEntries(bundledThemes),
+    },
   }
   return highlightPlugin
 }