fix: import of rehypeHighlight

Author: Kumzy

helpers/mdc-parser.mjs

@@ -1,4 +1,4 @@
-import { parseMarkdown } from '@nuxtjs/mdc/runtime'
+import { rehypeHighlight, parseMarkdown } from '@nuxtjs/mdc/runtime'
 import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
 import { createJavaScriptRegexEngine } from 'shiki'
 
@@ -9,27 +9,17 @@ export function createShikiHighlighter({
   bundledThemes = {},
   getMdcConfigs,
   options: shikiOptions,
-  engine,
+  engine
 } = {}) {
   let shiki
   let configs
   async function _getShiki() {
-    const {
-      createHighlighterCore,
-      addClassToHast,
-      isSpecialLang,
-      isSpecialTheme,
-    } = await import('shiki/core')
-    const {
-      transformerNotationDiff,
-      transformerNotationErrorLevel,
-      transformerNotationFocus,
-      transformerNotationHighlight,
-    } = await import('@shikijs/transformers')
+    const { createHighlighterCore, addClassToHast, isSpecialLang, isSpecialTheme } = await import('shiki/core')
+    const { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight } = await import('@shikijs/transformers')
     const shiki2 = await createHighlighterCore({
       langs,
       themes,
-      engine: engine || createJavaScriptRegexEngine(),
+      engine: engine || createJavaScriptRegexEngine()
     })
     for await (const config of await getConfigs()) {
       await config.shiki?.setup?.(shiki2)
@@ -43,8 +33,8 @@ export function createShikiHighlighter({
         transformerNotationDiff(),
         transformerNotationErrorLevel(),
         transformerNotationFocus(),
-        transformerNotationHighlight(),
-      ],
+        transformerNotationHighlight()
+      ]
     }
   }
   async function getShiki() {
@@ -65,13 +55,13 @@ export function createShikiHighlighter({
       addClassToHast,
       isSpecialLang,
       isSpecialTheme,
-      transformers: baseTransformers,
+      transformers: baseTransformers
     } = await getShiki()
     const codeToHastOptions = {
       defaultColor: false,
       meta: {
-        __raw: options.meta,
-      },
+        __raw: options.meta
+      }
     }
     if (lang === 'ts-type' || lang === 'typescript-type') {
       lang = 'typescript'
@@ -80,51 +70,36 @@ export function createShikiHighlighter({
       lang = 'vue'
       codeToHastOptions.grammarContextCode = '<template>'
     }
-    const themesObject = {
-      ...(typeof theme === 'string' ? { default: theme } : theme || {}),
-    }
+    const themesObject = { ...typeof theme === 'string' ? { default: theme } : theme || {} }
     const loadedThemes = shiki2.getLoadedThemes()
     const loadedLanguages = shiki2.getLoadedLanguages()
-    if (
-      typeof lang === 'string' &&
-      !loadedLanguages.includes(lang) &&
-      !isSpecialLang(lang)
-    ) {
+    if (typeof lang === 'string' && !loadedLanguages.includes(lang) && !isSpecialLang(lang)) {
       if (bundledLangs[lang]) {
         await shiki2.loadLanguage(bundledLangs[lang])
       } else {
         if (import.meta.dev) {
-          console.warn(
-            `[@nuxtjs/mdc] Language "${lang}" is not loaded to the Shiki highlighter, fallback to plain text. Add the language to "mdc.highlight.langs" to fix this.`,
-          )
+          console.warn(`[@nuxtjs/mdc] Language "${lang}" is not loaded to the Shiki highlighter, fallback to plain text. Add the language to "mdc.highlight.langs" to fix this.`)
         }
         lang = 'text'
       }
     }
     for (const [color, theme2] of Object.entries(themesObject)) {
-      if (
-        typeof theme2 === 'string' &&
-        !loadedThemes.includes(theme2) &&
-        !isSpecialTheme(theme2)
-      ) {
+      if (typeof theme2 === 'string' && !loadedThemes.includes(theme2) && !isSpecialTheme(theme2)) {
         if (bundledThemes[theme2]) {
           await shiki2.loadTheme(bundledThemes[theme2])
         } else {
           if (import.meta.dev) {
-            console.warn(
-              `[@nuxtjs/mdc] Theme "${theme2}" is not loaded to the Shiki highlighter. Add the theme to "mdc.highlight.themes" to fix this.`,
-            )
+            console.warn(`[@nuxtjs/mdc] Theme "${theme2}" is not loaded to the Shiki highlighter. Add the theme to "mdc.highlight.themes" to fix this.`)
           }
           themesObject[color] = 'none'
         }
       }
     }
-    const transformers = [...baseTransformers]
+    const transformers = [
+      ...baseTransformers
+    ]
     for (const config of await getConfigs()) {
-      const newTransformers =
-        typeof config.shiki?.transformers === 'function'
-          ? await config.shiki?.transformers(code, lang, theme, options)
-          : config.shiki?.transformers || []
+      const newTransformers = typeof config.shiki?.transformers === 'function' ? await config.shiki?.transformers(code, lang, theme, options) : config.shiki?.transformers || []
       transformers.push(...newTransformers)
     }
     const root = shiki2.codeToHast(code.trimEnd(), {
@@ -139,52 +114,40 @@ export function createShikiHighlighter({
             if (options.highlights?.includes(line))
               addClassToHast(node, 'highlight')
             node.properties.line = line
-          },
+          }
         },
         {
           name: 'mdc:newline',
           line(node) {
             if (code?.includes('\n')) {
-              if (
-                node.children.length === 0 ||
-                (node.children.length === 1 &&
-                  node.children[0].type === 'element' &&
-                  node.children[0].children.length === 1 &&
-                  node.children[0].children[0].type === 'text' &&
-                  node.children[0].children[0].value === '')
-              ) {
-                node.children = [
-                  {
-                    type: 'element',
-                    tagName: 'span',
-                    properties: {
-                      emptyLinePlaceholder: true,
-                    },
-                    children: [{ type: 'text', value: '\n' }],
+              if (node.children.length === 0 || (node.children.length === 1 && node.children[0].type === 'element' && node.children[0].children.length === 1 && node.children[0].children[0].type === 'text' && node.children[0].children[0].value === '')) {
+                node.children = [{
+                  type: 'element',
+                  tagName: 'span',
+                  properties: {
+                    emptyLinePlaceholder: true
                   },
-                ]
+                  children: [{ type: 'text', value: '\n' }]
+                }]
                 return
               }
               const last = node.children.at(-1)
               if (last?.type === 'element' && last.tagName === 'span') {
                 const text = last.children.at(-1)
-                if (text?.type === 'text') text.value += '\n'
+                if (text?.type === 'text')
+                  text.value += '\n'
               }
             }
-          },
-        },
-      ],
+          }
+        }
+      ]
     })
     const preEl = root.children[0]
     const codeEl = preEl.children[0]
     const wrapperStyle = shikiOptions?.wrapperStyle
-    preEl.properties.style = wrapperStyle
-      ? typeof wrapperStyle === 'string'
-        ? wrapperStyle
-        : preEl.properties.style
-      : ''
+    preEl.properties.style = wrapperStyle ? typeof wrapperStyle === 'string' ? wrapperStyle : preEl.properties.style : ''
     const styles = []
-    Object.keys(themesObject).forEach((color) => {
+    for (const color in themesObject) {
       const colorScheme = color !== 'default' ? `.${color}` : ''
       styles.push(
         wrapperStyle ? `${colorScheme} .shiki,` : '',
@@ -194,7 +157,7 @@ export function createShikiHighlighter({
         `font-style: var(--shiki-${color}-font-style);`,
         `font-weight: var(--shiki-${color}-font-weight);`,
         `text-decoration: var(--shiki-${color}-text-decoration);`,
-        '}',
+        '}'
       )
       styles.push(
         `html${colorScheme} .shiki span {`,
@@ -203,16 +166,14 @@ export function createShikiHighlighter({
         `font-style: var(--shiki-${color}-font-style);`,
         `font-weight: var(--shiki-${color}-font-weight);`,
         `text-decoration: var(--shiki-${color}-text-decoration);`,
-        '}',
+        '}'
       )
-    })
+    }
     return {
       tree: codeEl.children,
-      className: Array.isArray(preEl.properties.class)
-        ? preEl.properties.class.join(' ')
-        : preEl.properties.class,
+      className: Array.isArray(preEl.properties.class) ? preEl.properties.class.join(' ') : preEl.properties.class,
       inlineStyle: preEl.properties.style,
-      style: styles.join(''),
+      style: styles.join('')
     }
   }
   return highlighter
@@ -228,24 +189,14 @@ const bundledLangs = {
   ts: () => import('shiki/langs/ts.mjs'),
   tsx: () => import('shiki/langs/tsx.mjs'),
   jsx: () => import('shiki/langs/jsx.mjs'),
-  json: () => import('shiki/langs/json.mjs'),
-  python: () => import('shiki/langs/python.mjs'),
-  shell: () => import('shiki/langs/shell.mjs'),
-  toml: () => import('shiki/langs/toml.mjs'),
+  json: () => import('shiki/langs/json.mjs')
+
 }
 const bundledThemes = {
-  'material-theme-lighter': () =>
-    import('shiki/themes/material-theme-lighter.mjs').then((r) => r.default),
-  'material-theme-palenight': () =>
-    import('shiki/themes/material-theme-palenight.mjs').then((r) => r.default),
-}
-const options = {
-  theme: {
-    light: 'material-theme-lighter',
-    default: 'material-theme-lighter',
-    dark: 'material-theme-palenight',
-  },
+  'material-theme-lighter': () => import('shiki/themes/material-theme-lighter.mjs').then(r => r.default),
+  'material-theme-palenight': () => import('shiki/themes/material-theme-palenight.mjs').then(r => r.default)
 }
+const options = { theme: { light: 'material-theme-lighter', default: 'material-theme-lighter', dark: 'material-theme-palenight' } }
 let configs
 export function getMdcConfigs() {
   if (!configs) {
@@ -255,31 +206,24 @@ export function getMdcConfigs() {
   return configs
 }
 const engine = createOnigurumaEngine(() => import('shiki/wasm'))
-const highlighter = createShikiHighlighter({
-  bundledLangs,
-  bundledThemes,
-  options,
-  getMdcConfigs,
-  engine,
-})
+const highlighter = createShikiHighlighter({ bundledLangs, bundledThemes, options, getMdcConfigs, engine })
 
 export async function parseMdc(content) {
-  const { default: rehypeHighlight } = await import('@nuxtjs/mdc/runtime/highlighter/rehype-nuxt')
   return await parseMarkdown(content, {
     rehype: {
       plugins: {
         highlight: {
-          instance: rehypeHighlight,
-        },
-      },
+          instance: rehypeHighlight
+        }
+      }
     },
     highlight: {
       highlighter,
-      langs: ['js', 'vue', 'python', 'shell', 'toml'],
+      langs: ['js', 'vue', 'python', 'shell' ,'toml'],
       theme: {
         default: 'material-theme-lighter',
-        dark: 'material-theme-palenight',
-      },
-    },
+        dark: 'material-theme-palenight'
+      }
+    }
   })
 }