fix(highlight): warn about languages dynamic loading (#1291)

Co-authored-by: Yaël Guilloux <yael.guilloux@gmail.com>

src/runtime/server/api/highlight.ts

@@ -1,9 +1,13 @@
 import { createError, defineLazyEventHandler, useBody } from 'h3'
 import { getHighlighter, BUNDLED_LANGUAGES, BUNDLED_THEMES, Lang, Theme } from 'shiki-es'
+import { useLogger } from '@nuxt/kit'
 import { HighlightParams, HighlightThemedToken } from '../../types'
 import mdcTMLanguage from '../../assets/mdc.tmLanguage.json'
 import { useRuntimeConfig } from '#imports'
 
+// Re-create logger locally as utils cannot be imported from here
+export const logger = useLogger('@nuxt/content')
+
 /**
  * Resolve Shiki compatible lang from string.
  *
@@ -42,8 +46,8 @@ const resolveBody = (body: Partial<HighlightParams>) => {
     // Remove trailing carriage returns
     code: body.code.replace(/\n+$/, ''),
     // Resolve lang & theme (i.e check if shiki supports them)
-    lang: resolveLang(body.lang),
-    theme: resolveTheme(body.theme)
+    lang: resolveLang(body.lang || ''),
+    theme: resolveTheme(body.theme || '')
   }
 }
 
@@ -87,7 +91,16 @@ export default defineLazyEventHandler(async () => {
 
     // Load supported language on-demand
     if (!highlighter.getLoadedLanguages().includes(lang)) {
-      await highlighter.loadLanguage(lang)
+      let message = 'Content Highlighter Error\n\n'
+      message = message + `Language "${lang}" is not loaded Shiki. Falling back to plain code.\n\n`
+      message = message + `Please make sure you add "${lang}" to the 'preload' list in your Nuxt config.\n\n`
+      message = message + 'See: https://content.nuxtjs.org/api/configuration#highlight'
+      logger.warn(message)
+
+      // TODO: Enable autoloading of language when upstream Shiki supports it\
+      // See: https://github.com/nuxt/content/issues/1225#issuecomment-1148786924
+      // await highlighter.loadLanguage(lang)
+      return [[{ content: code }]]
     }
 
     // Load supported theme on-demand
@@ -119,15 +132,20 @@ export default defineLazyEventHandler(async () => {
           key: color.key,
           tokens: color.tokens[line]
         })
-      }, coloredTokens[0].tokens[line])
+      }, coloredTokens[0].tokens[line] as HighlightThemedToken[])
     }
 
     return highlightedCode
   }
 })
 
-function mergeLines (line1, line2) {
-  const mergedTokens = []
+interface HighlightThemedTokenLine {
+  key: string
+  tokens: HighlightThemedToken[]
+}
+
+function mergeLines (line1: HighlightThemedTokenLine, line2: HighlightThemedTokenLine) {
+  const mergedTokens: HighlightThemedToken[] = []
   const getColors = (h, i) => typeof h.tokens[i].color === 'string' ? { [h.key]: h.tokens[i].color } : h.tokens[i].color
 
   const [big, small] = line1.tokens.length > line2.tokens.length ? [line1, line2] : [line2, line1]

src/utils.ts

@@ -9,6 +9,7 @@ import type { ModuleOptions, MountOptions } from './module'
 import type { MarkdownPlugin } from './runtime/types'
 
 export const logger = useLogger('@nuxt/content')
+
 /**
  * Internal version that represents cache format.
  * This is used to invalidate cache when the format changes.