How to add customized language?

[yjl9903]

I want to add my customized language, and I use the demo in Monaco Editor Playground. I bind the event editorWillMount, and use the monaco object to add customized language, but its highlight does not work.

And I also see this issue, he add languages in editorDidMount. I tried it, but it does not work either.

<template>
  <MonacoEditor class="editor" v-model="code" language="mySpecialLanguage" @editorWillMount="editorWillMount" />
</template>

<script>
import MonacoEditor from 'vue-monaco'

export default {
  components: {
    MonacoEditor
  },

  data() {
    return {
      code: '[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations'
    }
  },

  methods: {
    editorWillMount(monaco) {
      // Register a new language
      monaco.languages.register({ id: 'mySpecialLanguage' });

      // Register a tokens provider for the language
      monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
        tokenizer: {
          root: [
            [/\[error.*/, "custom-error"],
            [/\[notice.*/, "custom-notice"],
            [/\[info.*/, "custom-info"],
            [/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
          ]
        }
      });
    }
  }
}
</script>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>

[shade]

editorDidMount is the appropriate callback, in the example provided the author directly accesses the vue monaco component using this however, you should specify a ref and use this.$refs.(your ref nam). I did the following and it worked:

        editorDidMount(editor) {
          const monaco = this.$refs.editor.monaco
          console.info(`monaco: `, monaco)
          // Register a new language
          monaco.languages.register({ id: 'mySpecialLanguage' });

          // Register a tokens provider for the language
          monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
            tokenizer: {
              root: [
                [/\[error.*/, "custom-error"],
                [/\[notice.*/, "custom-notice"],
                [/\[info.*/, "custom-info"],
                [/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
              ]
            }
          });

          // Define a new theme that contains only rules that match this language
          monaco.editor.defineTheme('myCoolTheme', {
            base: 'vs',
            inherit: false,
            rules: [
              { token: 'custom-info', foreground: '808080' },
              { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
              { token: 'custom-notice', foreground: 'FFA500' },
              { token: 'custom-date', foreground: '008800' },
            ]
          });

          // Register a completion item provider for the new language
          monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
            provideCompletionItems: () => {
              var suggestions = [{
                label: 'simpleText',
                kind: monaco.languages.CompletionItemKind.Text,
                insertText: 'simpleText'
              }, {
                label: 'testing',
                kind: monaco.languages.CompletionItemKind.Keyword,
                insertText: 'testing(${1:condition})',
                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
              }, {
                label: 'ifelse',
                kind: monaco.languages.CompletionItemKind.Snippet,
                insertText: [
                  'if (${1:condition}) {',
                  '\t$0',
                  '} else {',
                  '\t',
                  '}'
                ].join('\n'),
                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                documentation: 'If-Else Statement'
              }];
              return { suggestions: suggestions };
            }
          });

      this.$refs.editor.language = 'mySpecialLanguage'
      this.$refs.editor.theme = 'myCoolTheme'
    }