[FAQ] 自定义语言和主题 - Custom languages and themes

[zty012]

不能直接导入monaco-editor注册语言，需要使用mount事件的第二个参数提供的monaco对象注册语言

<template>
  <vue-monaco-editor language="mylang" theme="mylang-theme" :options="options" @mount="ready" />
</template>

<script lang="ts" setup>
import type { editor } from 'monaco-editor/esm/vs/editor/editor.api'

const options: editor.IStandaloneEditorConstructionOptions = {
  contextmenu: false,
  minimap: {
    enabled: false
  },
  smoothScrolling: true,
  cursorBlinking: 'expand',
  scrollbar: {
    vertical: 'hidden',
    horizontal: 'hidden'
  },
  overviewRulerLanes: 0,
  lineNumbers: 'off'
}

function ready(_e: unknown, monaco: typeof import('monaco-editor')) {
  // 防止重复注册
  if (
    !monaco.languages
      .getLanguages()
      .map((lang) => lang.id)
      .includes('mylang')
  ) {
    monaco.languages.register({
      id: 'mylang'
    })
    monaco.languages.setMonarchTokensProvider('mylang', {
      tokenizer: {
        root: [
          [/^\/[a-z:]/, { token: 'keyword' }],
          [/test/, { token: 'keyword' }]
        ]
      }
    })
    monaco.editor.defineTheme('mylang-theme', {
      base: 'vs',
      inherit: true,
      rules: [{ token: 'keyword', foreground: '#000ed1', fontStyle: 'bold' }],
      colors: {}
    })
  }
}
</script>