Search code examples
monaco-editormonarch

How to use JSON which defines my language from Monarch within Monaco editor


If I produce a JSON within Monarch for my new language syntax and I wish to use it in my Monaco editor, how can I do that? Is there a way to load this JSON? I guess there is a function which I can call to add this JSON as a language but I'm finding it difficult work out how where it is. My thinking is that it should be step by step a) make Monarch JSON b) use some Monaco API to load it and c) See it working.

Monarch here

https://microsoft.github.io/monaco-editor/monarch.html

Monaco Editor here

https://microsoft.github.io/monaco-editor/


Solution

  • The API you are looking for is setMonarchTokensProvider

    This is also demo'ed in the Custom languages example for Monaco Editor. The keypart is this:

    
    // 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"],
            ]
        }
    });