In many services where we need to provide users with the ability to write code, we need to provide users with an editor that is powerful enough to make writing code smoother, reduce the number of document queries, reduce the probability of errors, and improve coding efficiency.
To provide these capabilities, we need a powerful enough code editor and add our custom language support to it, so that users can get enough support in syntax highlighting, autocomplete, etc.
Why Monaco Editor?
Visual Studio Code is a very popular code editor in the world, and the Monaco Editor is the code editor used to build the core functionality of VSCode, which provides quite a lot of features for implementing various code editing capabilities. And Microsoft provides a standalone project for Monaco Editor, with a separate packaging script, so we can easily integrate Monaco Editor into our own web applications.
The Monaco Editor already provides a series of infrastructure to complete the support for custom languages, and in a few small steps, we can build a code editor with our own language support.
So, let’s get started!
Step 1. Register a Language
Here we will not go over how to introduce the Monaco Editor into the web application, instructions for integrating Monaco Editor in various ways are provided in the Monaco Editor repository.
In order to let the Monaco Editor know that we are adding a custom language support, we need to register a custom language identifier, and here we choose mylang as our custom language identifier.
Registering a custom language is very simple for the Monaco Editor, and can be done with a single line of code:
All done!
Of course, this is just the first step in adding custom language support, it just lets the Monaco Editor know that we need to add a custom language called mylang. There is more work to be done to make this custom language more like a fully supported language in the Monaco Editor.
Step 2. Add Keywords
Next, we need to add keyword highlighting support to mylang, a custom language for our editor.
Usually, the most important thing to add custom language support in a code editor is to get the ability to highlight various keywords, strings, comments and other content specific syntax when writing code, so that you can read the code more clearly.
In this step, there is a little more involved, because highlighting keywords, strings, comments, etc. involves the definition of keywords, strings, comments, etc., and what color to use to display them after they have been identified, which in turn involves the theme in the Monaco Editor, which defines the color, style, etc. of each custom language element.
Let’s start with a list of keywords included in mylang, through which is an array of words:
When matching keywords, it should be noted that usually keywords are not preceded or followed by other characters, either at the beginning of the line or immediately after a word separator, such as a space, tab, etc. Therefore, a regular expression can be used here to obtain such a word and match it with the list of keywords listed above, and those that match the keywords will be identified as keywords, while identifiers in the same format but not in the list of keywords will be identified as variables:
Of course, we also need to define what format the strings and comments are in, and this can be done using regular expressions too, for example, a string enclosed by double quotes can usually be represented by the following regular expression:
And the use of a double slash to indicate a single line comment can be matched with the following regular expression:
Finally, the entire syntax highlighting can be added to our custom language by setMonarchTokensProvider of the Monaco Editor:
Now to see what we have got:
Oh, a syntax highlighting support with keywords, strings and comments finished!
What seems to have been missed here? Yes! The colors here are the definitions for keyword, string, and comment colors in the theme that comes with the Monaco Editor, how do we do it if we need to define different colors?
Aha, see we get a completely different syntax highlighting result:
By now, we have completed the basic keyword syntax highlighting for our custom language, and this editor has the initial available capability for coding with our custom language mylang.
Step 3. Add Auto Completion
What is another important feature when using a code editor? Yes, autocomplete!
We often don’t want to remember so many keywords, we just want to hit the first few characters of a keyword and ask the editor to auto-complete the rest for me. The Monaco Editor also provides good support for this feature.
With Monaco Editor’s registered autocomplete provider feature, it’s easy to add autocomplete capabilities to our custom language.
Here, we will provide autocomplete capability for all keywords. When the user enters the first few characters of all the keywords in the keyword list in the editor, he will get an autocomplete list to indicate what the complete keyword is, and he can do it automatically by hitting the Tab key.
Is it very simple? To see how it works:
As you can see, the editor prompts us for the complete keyword string after typing only two characters, and you can hit Tab key to finish typing with one click.
Step 4. Add Parsing Error Marker
Finally, if we have a custom language with a compiler behind it, we need to give the user a hint if he or she enters something that is not what compiler expect, so that the user can detect the error in the code and quickly locate the problem and fix it.
For example, in mylang, string is a keyword, but strig is not. If strig is entered in the code and our compiler can point out the error, then we can use the Marker feature of the Monaco Editor to identify the problem so that the user can quickly know where the error is and can fix the problem more quickly.
For example, the back-end compiler can give a structure of error messages like this:
Then, we can use the Monaco Editor to prompt for this error in the code editor with following code:
Attention: the editor here is the instance object that created of the Monaco Editor.
In the end, we get a useful error message indicator, and the user can mouse over this error and get its corresponding error message:
By now, we finished the complete development support for a custom language, mylang, with keyword syntax highlighting, keyword autocompletion, and compile error prompting, all of which are essential features provided by the Monaco Editor.
At the end
Of course, don’t forget to specify the language of the Monaco Editor instance as our custom language mylang when you initialize it, otherwise it will not render and prompt the code as we expect it to.
In addition, Monaco Editor’s support for custom languages is not limited to these features, there are more powerful capabilities that can be explored in the Monaco Editor’s API.
Hope this article will be useful for you.
