Monaco Editor Colorize Issue Or Requirement.

[vinothkumarkp]

This is the code below. I need to highlight element inside "highlightContent" div ID. But I want to highlight without removing <del> node. Highlight.js is doing fine. But monaco editor is removing all the node. Please help it.

<span id="highlightContent" data-lang="javascript">
         this.<del>updateDailyBuildOptions</del>();
</span>

[vinothkumarkp]

@alexdima - Any solution for this write now. Atleast temporary solution would help us. Because we hardly replaced "highlight js" and use monaco in our product.

[alexdima]

@vinothkumarkp I don't think there is a straight forward way to achieve what you want.

Here is an idea, but to be honest, I have doubts that it would work in practice. You can visit each element you want to colorize on your own, and for each element you can build a string with the underlying text and an array of extra HTML elements. The complexity of this datastructure depends on the complexity of the HTML you want to support (i.e. do you want to support elements inside elements or not). For the above snippet the data you would need to maintain would be the following:

text:        this.updateDailyBuildOptions();
decorations: [{ from: 13, length: 23, element: 'del' }]

If you have already loaded javascript, you can then use something like monaco.editor.tokenize(' this.updateDailyBuildOptions();', 'javascript') which would give you an array of tokens per line of text. You would then need to write a for loop to reconcile the tokens with the decorations you have collected upfront and then emit HTML to render them.