prevent failing when language is not loaded

Author: khanzadimahdi

package-lock.json

@@ -29,7 +29,6 @@
     "boring-avatars": "^1.11.2",
     "ckeditor5": "^44.1.0",
     "clsx": "^2.1.1",
-    "highlight.js": "^11.11.1",
     "html-react-parser": "^5.1.18",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",

package.json

@@ -1,57 +1,65 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import {
-  CodeHighlightAdapterProvider,
-  stripShikiCodeBlocks,
-} from '@mantine/code-highlight';
+import { CodeHighlightAdapterProvider, stripShikiCodeBlocks } from '@mantine/code-highlight';
 
-import {
-  transformerNotationDiff,
-  transformerNotationHighlight,
-} from '@shikijs/transformers';
+import { 
+  transformerNotationDiff, 
+  transformerNotationHighlight, 
+  transformerNotationFocus, 
+  transformerMetaHighlight,
+} from '@shikijs/transformers'
 
 import { darkTheme, lightTheme } from './code-highlight-themes';
 
+const preloadedLanguages = [
+  'tsx', 'scss', 'html', 'bash', 
+  'json', 'javascript', 'typescript', 'css', 
+  'markdown', 'go', 'python', 'java', 'kotlin', 
+  'rust', 'php', 'ruby', 'swift', 'dart', 'scala',
+];
+
 async function loadShiki() {
   const { createHighlighter } = await import('shiki');
-  const shiki = await createHighlighter({
-    langs: ['tsx', 'scss', 'html', 'bash', 'json'],
+  const highlighter = await createHighlighter({
+    langs: preloadedLanguages,
     themes: [],
   });
 
-  return shiki;
+  return highlighter;
 }
 
 const customShikiAdapter: any = {
   loadContext: loadShiki,
 
   getHighlighter: (ctx: any) => {
     if (!ctx) {
-      return ({ code }: { code: string }) => ({
-        highlightedCode: code,
-        isHighlighted: false,
-      });
+      return ({ code }: { code: string }) => ({highlightedCode: code, isHighlighted: false });
     }
 
-    return ({
-              code,
-              language,
-              colorScheme,
-            }: {
-      code: string;
-      language: string;
-      colorScheme: 'light' | 'dark';
-    }) => ({
-      isHighlighted: true,
-      highlightedCode: stripShikiCodeBlocks(
-        ctx.codeToHtml(code, {
-          lang: language,
-          theme: (colorScheme === 'light' ? lightTheme : darkTheme) as any,
-          transformers: [transformerNotationDiff(), transformerNotationHighlight()],
-        })
-      ),
-    });
+    return ({ code, language, colorScheme }) => {
+
+      // if the language is not loaded don't highlight it
+      if (!ctx.getLoadedLanguages().includes(language)) {
+        return {highlightedCode: code, isHighlighted: false };
+      }
+
+      return {
+        isHighlighted: true,
+        highlightedCode: stripShikiCodeBlocks(
+          ctx.codeToHtml(code, {
+            lang: language,
+            theme: (colorScheme === 'light' ? lightTheme : darkTheme) as any,
+            transformers: [
+              transformerNotationDiff(), 
+              transformerNotationHighlight(), 
+              transformerNotationFocus(), 
+              transformerMetaHighlight(),
+            ],
+          })
+        ),
+      };
+    };
   },
 };