Search code examples
javascripthtmlace-editor

Render span tag inside Ace Editor

I am using Ace to display some JavaScript code, and loading it as per the embedding guide:

editor = ace.edit("jsField");
editor.getSession().setMode("ace/mode/javascript");
editor.getSession().setUseWrapMode(true);

The div and its contents are as follows:

<div id="jsField">
    <span class="hl">var x = 0;</span>
    var y = 10;
</div>

Currently, the Ace editor will display both the HTML and the JavaScript together as plain text. Is there a simple way to render the HTML such that only the JavaScript text is displayed, and the span is styled according to CSS? For example:

enter image description here

I should note that the span is usually added dynamically by calling editor.setValue().

I have been looking into creating custom modes/syntax highlighters for Ace, but it seems like overkill for such a simple task. I am curious if there is another way.

Solution

  • There isn't built in support for this. You can do something similar to https://github.com/ajaxorg/ace/blob/v1.1.5/lib/ace/ext/static_highlight.js#L53 to detect ranges and add markers to the editor.