javascript - Ace Editor 用标记突出显示部分行
问题描述
我正在尝试使用标记部分突出显示一行/几行。
根据有关范围的文档,可以使用 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 的第三个参数有关,我设法找到的文档仅指出这应该是“标记类型”,但我找不到可用的标记类型是什么。
解决方案
因为选择的答案不够清楚,所以我在这个答案中添加了一个例子。
您需要添加position: absolute;
到突出显示类。
例如,我在这里.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>
推荐阅读
- google-sheets - 列出开始日期和今天()之间的所有缺失日期
- docker - 从 localhost 连接到 kafka 容器
- python - 无法更新芹菜中的任务状态
- angular - 角删除谷歌地图标记
- ios - Firebase 每次查询返回不同的值
- mysql - MySQL“GROUP BY”忽略记录顺序
- html - IE 和 chrome 中的 html 表格
- angularjs - AngularJs $http 服务响应监听器
- java - Spring Boot - static content at root level while using a context-path
- javascript - 延迟加载 facebook 客户聊天插件 - 我可以强制打开聊天对话吗?