Monaco: What is the best way to create a language syntax definition for a custom language in the monaco-editor?

user_3806701 0
Viewed 1241

I have a fairly simple custom DSL created in antlr4. I'm trying to find the easiest way to use it in a web based monaco-editor with all the bells and whistles.

  1. I see you can create monarch definitions from scratch using: https://microsoft.github.io/monaco-editor/monarch.html (The problem with that is for future changes I'd have to keep 2 things up to date, the antlr grammar and the monarch json definition. Also, since they are separate implementations, how could I be certain they both match/agree).

  2. I also see you can manually use an ANTLR generated lexer/parser to do everything yourself with just ANTLR: https://tomassetti.me/writing-a-browser-based-editor-using-monaco-and-antlr/ (Compared to monarch, this seems like a LOT of manual work, and I'm having trouble finding many examples of this or much documentation).

  3. Is there an easy way to just generate the monarch json definition from the antlr files? If no, which of the first 2 options is generally preferred and why?

monaco-editor antlr4 dsl syntax-highlighting javascript
1 Answers

An ANTLR file is really just your syntax. It would probably be possible to get syntax highlighting from there, but I don’t recall seeing anything that does that for Monaco.

Beyond syntax highlighting, you’ll want code completion. If you target the Typescript target, then there’s the C3 code completion project that Mike Lischke (hope I spelled that right) put together. It gets you about as close as you can get I from just the grammar, but you still have work to do looking things up in you symbol table, taking scope into account. Etc. it’s also tricky to hand it the right logical cursor position (Mike has written up good guidance on getting it right (it made a lot more sense to me when I reread it after working through it though).

It can be made to work with the JavaScript target, but that’s a bit more work. (Mainly in adding to methods the type script target has that the JavaScript target does not.

Also, it’s not going to just plug in to Monaco. It will save you a lot of work when you write your code though.

user_737640
Related