monaco-editor | CommonJS/Webpack compatible Monaco editor | Editor library

Since Webpack 5, we need to use Asset Modules instead of loaders.

That is, the following code works on Webpack 5:

The css property text-decoration-skip-ink: none; might help if the goal is to make the underline more visible. Text underline is normally covered by descenders, i.e., parts of the letter that drop below the line. The skip-ink property allows the wavy underline to cover the text. It seems to have good browser support. And here is a link to documentation.

The Monaco editor is probably not a good solution if all you want to do is underline some text.

Run the code snippet below for examples of with and without text-decoration-skip-ink.

Various errors may occur depending on the bundler configuration, so I made it simple example by referring to codes monaco-editor and monaco-languageclient. Both repositories work after build, so I separated the main process and renderer process folders to avoid overlapping outputs. Maybe this is related to Forge's error.

I created an Electron renderer code using monaco-languageclient's client code, and in the main process, run monaco-languageclient's server. Therefore, both processes must share the same web socket port. You can also erase the following lines and run LanguageServer externally.

Here is an example without the iframe.

Adding ignoreCase:true to the options should work.

Editor Reference

That Webpack plugin isn't actually needed.

Based on the custom language example, you can register the language at runtime via monaco.languages.setMonarchTokensProvider(). The second function argument is an instance of IMonarchLanguage, which matches the language spec in the example you linked.

If you need the ability to change the value externally, you'll need to use the Editor as a controlled component by passing the value prop (sandbox):

For example:

with ember-source@3.16+, it's recommend to directly reference actions / functions, like:

If I understand you correctly then you cannot do what you want with a syntax highlighter. What you want is semantic highlighting.

Syntax is about the structure of a language. It determines what is an identifier, what is a number, a string etc.

Semantic gives meaning to things, for instance which identifier is a variable, which is a class name or another type etc.

Monarch is a declarative tokenizer, a tool that assigns token values to specific parts of text. How to find which part of the text gets which token value is declared in the tokenizer field.

But you cannot find semantic from syntax rules. Instead you would have to parse the input and decide from the parse tree/syntax tree which role a symbol plays in the input.

I just used that exact gist and it worked perfectly. Here are my steps:

1. Follow these "Getting Started" steps to create a fresh SvelteKit app

• Note: Since this gist uses TypeScript (