feat: use shikiji for more accurate highlight (vuejs#190)

Author: antfu

package.json

@@ -81,11 +81,9 @@
     "hash-sum": "^2.0.0",
     "lint-staged": "^15.1.0",
     "monaco-editor-core": "^0.44.0",
-    "monaco-editor-textmate": "^4.0.0",
-    "monaco-textmate": "^3.0.1",
-    "monaco-volar": "^0.4.0",
-    "onigasm": "^2.2.5",
     "prettier": "^3.1.0",
+    "shikiji": "^0.9.6",
+    "shikiji-monaco": "^0.9.6",
     "simple-git-hooks": "^2.9.0",
     "sucrase": "^3.34.0",
     "typescript": "^5.3.2",

pnpm-lock.yaml

@@ -13,7 +13,6 @@ import {
 import * as monaco from 'monaco-editor-core'
 import { initMonaco } from './env'
 import { getOrCreateModel } from './utils'
-import { loadGrammars, loadTheme } from 'monaco-volar'
 import { Store } from '../store'
 import type { PreviewMode } from '../editor/types'
 
@@ -44,7 +43,7 @@ const lang = computed(() => (props.mode === 'css' ? 'css' : 'javascript'))
 
 const replTheme = inject<Ref<'dark' | 'light'>>('theme')!
 onMounted(async () => {
-  const theme = await loadTheme(monaco.editor)
+  const theme = await import('./highlight').then(r => r.registerHighlighter())
   ready.value = true
   await nextTick()
 
@@ -68,7 +67,6 @@ onMounted(async () => {
     inlineSuggest: {
       enabled: false,
     },
-    'semanticHighlighting.enabled': true,
     fixedOverflowWidgets: true,
   })
   editor.value = editorInstance
@@ -137,8 +135,6 @@ onMounted(async () => {
     )
   }
 
-  await loadGrammars(monaco, editorInstance)
-
   editorInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
     // ignore save event
   })

src/monaco/Monaco.vue

@@ -2,8 +2,6 @@ import { jsDelivrUriBase } from '@volar/cdn'
 import * as volar from '@volar/monaco'
 import { editor, languages, Uri } from 'monaco-editor-core'
 import editorWorker from 'monaco-editor-core/esm/vs/editor/editor.worker?worker'
-import * as onigasm from 'onigasm'
-import onigasmWasm from 'onigasm/lib/onigasm.wasm?url'
 import { watchEffect } from 'vue'
 import { Store } from '../store'
 import { getOrCreateModel } from './utils'
@@ -14,7 +12,6 @@ let initted = false
 export function initMonaco(store: Store) {
   if (initted) return
   loadMonacoEnv(store)
-  loadWasm()
 
   watchEffect(() => {
     // create a model for each file in the store
@@ -62,10 +59,6 @@ export function initMonaco(store: Store) {
   initted = true
 }
 
-export function loadWasm() {
-  return onigasm.loadWASM(onigasmWasm)
-}
-
 export class WorkerHost {
   onFetchCdnFile(uri: string, text: string) {
     getOrCreateModel(Uri.parse(uri), undefined, text)

src/monaco/env.ts

@@ -0,0 +1,23 @@
+import * as monaco from 'monaco-editor-core'
+import { getHighlighterCore } from 'shikiji/core'
+import { getWasmInlined } from 'shikiji/wasm'
+import { shikijiToMonaco } from 'shikiji-monaco'
+
+import langVue from 'shikiji/langs/vue.mjs'
+import themeDark from 'shikiji/themes/dark-plus.mjs'
+import themeLight from 'shikiji/themes/light-plus.mjs'
+
+
+export async function registerHighlighter() {
+  const highlighter = await getHighlighterCore({
+    themes: [themeDark, themeLight],
+    langs: [langVue],
+    loadWasm: getWasmInlined
+  })
+  monaco.languages.register({ id: 'vue' })
+  shikijiToMonaco(highlighter, monaco)
+  return {
+    light: themeLight.name!,
+    dark: themeDark.name!
+  }
+}