Тег диапазона рендеринга внутри Ace Editor

Я использую Ace для отображения некоторого кода JavaScript и загружаю его в соответствии с руководством по внедрению:

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

Div и его содержимое выглядят следующим образом:

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

В настоящее время редактор Ace будет отображать как HTML, так и JavaScript вместе как обычный текст. Есть ли простой способ отобразить HTML таким образом, чтобы отображался только текст JavaScript, а диапазон был оформлен в соответствии с CSS? Например:

Я должен отметить, что диапазон обычно добавляется динамически, вызывая editor.setValue().

Я пытался создать собственные режимы/подсветку синтаксиса для Ace, но это кажется излишним для такой простой задачи. Мне интересно, есть ли другой способ.