fix: monaco editor highlight

composables/shiki.ts

@@ -4,20 +4,19 @@ import langHtml from 'shiki/langs/html.mjs'
 import langJson from 'shiki/langs/json.mjs'
 import langTs from 'shiki/langs/typescript.mjs'
 import langVue from 'shiki/langs/vue.mjs'
-import themeDarkPlus from 'shiki/themes/dark-plus.mjs'
-import themeLightPlus from 'shiki/themes/light-plus.mjs'
 import vitesseDark from 'shiki/themes/vitesse-dark.mjs'
 import vitesseLight from 'shiki/themes/vitesse-light.mjs'
 
+export const shikiLangs = [langTs, langVue, langJson, langHtml, langCss]
 export const highlighter = createHighlighterCoreSync({
-  langs: [langTs, langVue, langJson, langHtml, langCss],
-  themes: [themeLightPlus, themeDarkPlus, vitesseLight, vitesseDark],
+  langs: shikiLangs,
+  themes: [vitesseLight, vitesseDark],
   engine: createJavaScriptRegexEngine(),
 })
 
 const highlight = useMemoize((code: string, theme: string) => {
   return highlighter.codeToTokens(code, {
-    lang: 'javascript',
+    lang: 'typescript',
     theme,
   })
 })

plugins/2.shiki.client.ts

@@ -1,8 +1,20 @@
 import { shikiToMonaco } from '@shikijs/monaco'
-import { highlighter } from '~/composables/shiki'
+import {
+  createHighlighterCoreSync,
+  createJavaScriptRegexEngine,
+} from 'shiki/core'
+import themeDark from 'shiki/themes/dark-plus.mjs'
+import themeLight from 'shiki/themes/light-plus.mjs'
+import { shikiLangs } from '~/composables/shiki'
 
 export default defineNuxtPlugin(() => {
   const monaco = useMonaco()!
   monaco.languages.register({ id: 'vue' })
+
+  const highlighter = createHighlighterCoreSync({
+    themes: [themeDark, themeLight],
+    langs: shikiLangs,
+    engine: createJavaScriptRegexEngine(),
+  })
   shikiToMonaco(highlighter, monaco)
 })