fix: update support lang 2

src/lib/utils/highlighter.ts

@@ -1,32 +1,42 @@
 import { createHighlighter } from 'shiki'
 import { once } from 'lodash-es'
-import type { Highlighter } from 'shiki'
+import type {
+  Highlighter,
+  LanguageInput,
+  SpecialLanguage,
+  StringLiteralUnion,
+} from 'shiki'
+
+export const SUPPORT_LANGUAGES: (
+  | LanguageInput
+  | StringLiteralUnion<string>
+  | SpecialLanguage
+)[] = [
+  'typescript',
+  'javascript',
+  'jsx',
+  'tsx',
+  'html',
+  'css',
+  'scss',
+  'less',
+  'json5',
+  'vue',
+  'json',
+  'svelte',
+  'xml',
+  'yaml',
+  'yml',
+  'rust',
+  'java',
+  'kotlin',
+]
 
-let _highlighter: Highlighter
 async function _getHighlighter() {
-  if (!_highlighter) {
-    _highlighter = await createHighlighter({
-      themes: ['github-light', 'github-dark'],
-      langs: [
-        'typescript',
-        'javascript',
-        'jsx',
-        'tsx',
-        'json',
-        'svelte',
-        'xml',
-        'html',
-        'yaml',
-        'yml',
-        'json5',
-        'rust',
-        'java',
-        'kotlin',
-      ],
-    })
-  }
-  return _highlighter
+  return await createHighlighter({
+    themes: ['github-light', 'github-dark'],
+    langs: SUPPORT_LANGUAGES,
+  })
 }
 
-const getHighlighter = once(_getHighlighter)
-export const highlighter = await getHighlighter()
+export const highlighter = await _getHighlighter()

src/lib/utils/md2html.ts

@@ -7,6 +7,7 @@ import { gfm } from 'micromark-extension-gfm'
 import { type Highlighter } from 'shiki'
 import type { Code } from 'mdast'
 import type { Element } from 'hast'
+import { SUPPORT_LANGUAGES } from './highlighter'
 
 export function hastSvg(): Handler {
   return (_state, node, _parent) => {
@@ -29,10 +30,14 @@ export function hastSvg(): Handler {
 export function hastShiki(highlighter: Highlighter): Handler {
   return (_state, node, _parent) => {
     const code = node as Code
-    const lang = code.lang
+    let lang = code.lang ?? 'text'
     const value = code.value
+    if (!SUPPORT_LANGUAGES.includes(lang)) {
+      console.warn(`Unsupported language: ${lang}`)
+      lang = 'text'
+    }
     const hast = highlighter.codeToHast(value, {
-      lang: lang!,
+      lang,
       themes: {
         light: 'github-light',
         dark: 'github-dark',