fix: handle unknown Shiki languages gracefully

Fixes TANSTACK-COM-M6

- Add eslintrc alias to jsonc
- Return effectiveLang from getHighlighter to ensure failed languages fallback to plaintext

Author: tannerlinsley

src/components/markdown/CodeBlock.tsx

@@ -21,14 +21,19 @@ const LANG_ALIASES: Record<string, string> = {
   text: 'plaintext',
   yml: 'yaml',
   json5: 'jsonc',
+  eslintrc: 'jsonc',
 }
 
 // Lazy highlighter singleton
 let highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null
 let mermaidInstance: Mermaid | null = null
 const genSvgMap = new Map<string, string>()
+const failedLanguages = new Set<string>()
 
-async function getHighlighter(language: string) {
+async function getHighlighter(language: string): Promise<{
+  highlighter: HighlighterGeneric<any, any>
+  effectiveLang: string
+}> {
   if (!highlighterPromise) {
     highlighterPromise = createHighlighter({
       themes: ['github-light', 'vitesse-dark'],
@@ -62,16 +67,23 @@ async function getHighlighter(language: string) {
   const normalizedLang = LANG_ALIASES[language] || language
   const langToLoad = normalizedLang === 'mermaid' ? 'plaintext' : normalizedLang
 
+  // Return plaintext for known failed languages
+  if (failedLanguages.has(langToLoad)) {
+    return { highlighter, effectiveLang: 'plaintext' }
+  }
+
   // Load language if not already loaded
   if (!highlighter.getLoadedLanguages().includes(langToLoad as any)) {
     try {
       await highlighter.loadLanguage(langToLoad as any)
     } catch {
       console.warn(`Shiki: Language "${langToLoad}" not found, using plaintext`)
+      failedLanguages.add(langToLoad)
+      return { highlighter, effectiveLang: 'plaintext' }
     }
   }
 
-  return highlighter
+  return { highlighter, effectiveLang: langToLoad }
 }
 
 // Lazy load mermaid only when needed
@@ -153,11 +165,8 @@ export function CodeBlock({
     ;(async () => {
       const themes = ['github-light', 'vitesse-dark']
       const langStr = lang || 'plaintext'
-      const normalizedLang = LANG_ALIASES[langStr] || langStr
-      const effectiveLang =
-        normalizedLang === 'mermaid' ? 'plaintext' : normalizedLang
 
-      const highlighter = await getHighlighter(langStr)
+      const { highlighter, effectiveLang } = await getHighlighter(langStr)
       // Trim trailing newlines to prevent empty lines at end of code block
       const trimmedCode = (code || '').trimEnd()