突出显示ace中的单个字符

Highlighting a single character in ace

本文关键字：单个 字符 ace 显示      更新时间：2023-09-26

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

以下是一个快速演示尝试（fidd）：

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);

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

我的问题是*为什么它会这样？*我该如何让它按照我想要的方式运行？*我读过关于"动态"标记的文章，但找不到任何关于这些标记的信息。那么，它们是什么？

您需要为标记的类添加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>

相关文章：