feat: use shiki for highlighting

package.json

@@ -16,13 +16,15 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@shikijs/monaco": "^1.11.1",
     "@typescript-eslint/parser": "^7.16.1",
     "ansi-regex": "^6.0.1",
     "fflate": "^0.8.2",
     "json-to-ast": "^2.1.0",
     "json5": "^2.2.3",
     "monaco-editor": "^0.50.0",
-    "monaco-editor-auto-typings": "^0.4.5"
+    "monaco-editor-auto-typings": "^0.4.5",
+    "shiki": "^1.11.1"
   },
   "devDependencies": {
     "@babel/parser": "^7.24.8",

plugins/shiki.client.ts

@@ -0,0 +1,21 @@
+import { createHighlighterCore } from 'shiki'
+import { shikiToMonaco } from '@shikijs/monaco'
+import langJson from 'shiki/langs/json.mjs'
+import langHtml from 'shiki/langs/html.mjs'
+import langCss from 'shiki/langs/css.mjs'
+import langVue from 'shiki/langs/vue.mjs'
+import langTs from 'shiki/langs/typescript.mjs'
+import themeDark from 'shiki/themes/dark-plus.mjs'
+import themeLight from 'shiki/themes/light-plus.mjs'
+
+export default defineNuxtPlugin(async () => {
+  const monaco = useMonaco()!
+
+  monaco.languages.register({ id: 'vue' })
+  const highlighter = await createHighlighterCore({
+    themes: [themeDark, themeLight],
+    langs: [langJson, langHtml, langCss, langVue, langTs],
+    loadWasm: import('shiki/wasm'),
+  })
+  shikiToMonaco(highlighter, monaco)
+})

utils/monaco.ts

@@ -1,9 +1,11 @@
+import themeDark from 'shiki/themes/dark-plus.mjs'
+import themeLight from 'shiki/themes/light-plus.mjs'
 import type * as monaco from 'monaco-editor'
 
 export function getSharedMonacoOptions(): monaco.editor.IStandaloneEditorConstructionOptions {
   return {
     automaticLayout: true,
-    theme: isDark.value ? 'vs-dark' : 'vs',
+    theme: isDark.value ? themeDark.name! : themeLight.name!,
     fontFamily:
       '"Cascadia Code", "Jetbrains Mono", "Fira Code", "Menlo", "Consolas", monospace',
     tabSize: 2,