Ace 编辑器用标记突出显示一行的一部分

Question

我正在尝试使用标记部分突出显示一条线。

根据 documentation on ranges 可以创建一个具有 4 个输入的：startLine, startColumn, endLine, endColumn

我将这样的范围输入到添加标记方法中，但它只是突出显示了整行

我的代码：

var editor = ace.edit("editor");
var Range = ace.require('ace/range').Range;
editor.session.addMarker(
        new Range(startLine - 1, startPos, stopLine - 1, stopPos),
        "highlightError",
        "line",
        true
);

我认为我的问题可能与 addMarker 的第 3 个参数有关，documentation 我设法只找到说明这应该是 'type of marker' 但我找不到可用的类型标记是。

Answer 1

使用 "text" 而不是 "line" 作为第三个参数。

其他支持的类型是 "fullLine" 和 "screenLine" https://github.com/ajaxorg/ace/blob/master/lib/ace/layer/marker.js#L99

Answer 2

我重新意识到 'line' 的替代选项是 'text' 但是设置这个并没有解决我的问题。我最终几乎没有任何突出显示的区域。经过进一步的研究，我意识到 addMarker() 创建的标记没有将它们的位置设置为绝对位置。我将 position: absolute; 添加到我的 highlightError class css 并解决了问题，现在突出显示了正确的文本。

Answer 3

由于选择的答案不够明确，我在这个答案中添加了一个例子。

您需要将 position: absolute; 添加到突出显示 class。

例如here我正在使用.blue选择蓝色，然后我应该添加position: absolute;。

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

var Range = ace.require("ace/range").Range;
editor.selection.setRange(new Range(4, 0, 6, 5));

editor.session.addMarker(new Range(0, 0, 1, 5), "blue", "text");

#editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.blue {
  position: absolute;
  background-color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<script src="https://pagecdn.io/lib/ace/1.4.6/ace.js" integrity="sha256-CVkji/u32aj2TeC+D13f7scFSIfphw2pmu4LaKWMSY8=" crossorigin="anonymous"></script>
</head>
<body>

<div id="editor">
function foo(items) {
    var x = items * items;
    return x;
}

var test = foo(2);

console.log(test); //should be 4

console.log(foo(1)); //should be 1

console.log(foo(3)); //should be 9
</div>

</body>
</html>

Ace 编辑器用标记突出显示一行的一部分

Ace Editor highlight part of a line with marker

javascript

ace-editor