javascript - 突出显示ace中的单个字符

Question

我想在 ace 编辑器中突出显示单个字符(在给定位置)。似乎我可以为此使用 addMarker，但文档几乎不存在，我无法理解我的尝试中发生了什么。

这是一个快速演示尝试 ( fiddle ):

setInterval(function () {
    if (currentMarker) {
        editor.session.removeMarker(currentMarker);
    }

    currentMarker = editor.session.addMarker(new Range(1, x, 2, x+1), "marked", "text", false);

    x = ++x % 25;
}, 250);

我期望突出显示一个字符，并且每四分之一秒标记应该切换到它旁边的字符。但事实并非如此。

我的问题是* 为什么会这样？* 如何让它按照我想要的方式运行？* 我阅读了有关“动态”标记的信息，但找不到有关这些标记的任何信息。那么 - 它们是什么？

Answer 1

您需要为标记的类添加 position: absolute; 并为范围的开始和结束使用同一行 new Range(1, x, 1, x+1)

var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/javascript");

var Range = ace.require('ace/range').Range;

var currentMarker;
var x = 0;
setInterval(function () {
    if (currentMarker)
        editor.session.removeMarker(currentMarker);

    currentMarker = editor.session.addMarker(new Range(1, x, 1, x+1), "marked", "text", false);
    x = ++x % 25;
}, 250);

#editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.marked {
    background: red;
    color: red;
    position: absolute;
}

<div id="editor">function foo(items) { var x = "All this is syntax highlighted"; return x; }
function foo(items) { var x = "All this is syntax highlighted"; return x; }
function foo(items) { var x = "All this is syntax highlighted"; return x; }</div>
<script src="//cdn.jsdelivr.net/ace/1.1.7/min/ace.js" type="text/javascript" charset="utf-8"></script>