2

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/

Phil
  • 46,436
  • 33
  • 110
  • 175
  • 1
    Is this demo of [json formatter](https://fe-tool.com/en-us/formatter/json) what you want? Then just use `defaultLanguage="json"` via [@monaco-editor/react](https://www.npmjs.com/package/@monaco-editor/react) – cwtuan Jan 10 '23 at 13:20

1 Answers1

3

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"],
        ]
    }
});
Mike Lischke
  • 48,925
  • 16
  • 119
  • 181
  • Yes correct thanks https://jsfiddle.net/938uxmve/12/ – Phil Aug 06 '21 at 12:21
  • I think this is still not the expected answer. I run into the same situation where I have a json file describing the syntax (for example, this one https://github.com/jlelong/vscode-latex-basics/blob/main/syntaxes/LaTeX.tmLanguage.json), the question is how to use the json file in monaco editor. – Kai ZHAO Aug 03 '23 at 22:47
  • Isn't that obvious? Look at the code example in the answer. The `tokenizer` entry contains a json object. – Mike Lischke Aug 04 '23 at 10:55