如何在 ACE 编辑器中突出显示某行？

Posted 2023-05-07

【中文标题】如何在 ACE 编辑器中突出显示某行？

【英文标题】：How to highlight a certain line in ACE editor?

【发布时间】：2015-02-16 08:54:54

【问题描述】：

我正在为我的网站使用 ACE 编辑器。我需要在编辑器中选择/突出显示某些行。但是当它是一个大代码时，ACE 编辑器会显示一些错误，例如，当它向下滚动时行号更改并且突出显示的行号与我想要突出显示的行号不同。我已经搜索并找到了这个Problem. 但实际上我无法理解它。任何人都可以举一些在ACE编辑器中突出显示一行的例子吗？ 这是我当前的代码：

var aceLines = document.getElementsByClassName("ace_line");
var gutters = document.getElementsByClassName("ace_gutter-cell");
var gutLineNo = parseInt(gutters[0].innerhtml)-1;

if(count1 != 0)
        aceLines[arNum[count]-gutLineNo].style.backgroundColor = "green";
        aceLines[arNum[count1]-gutLineNo].style.backgroundColor = "black";

    else
        aceLines[arNum[count]-gutLineNo].style.backgroundColor = "green";
    

【参考方案1】：

不要尝试直接修改编辑器 dom。 Ace 只为可见线创建 dom 节点，并且 你需要像How can I highlight multiple lines with Ace?中描述的那样使用 setMarker

首先创建一个设置背景的css类

.myMarker 
  position:absolute;
  background:rgba(100,200,100,0.5);
  z-index:20

然后添加一个标记

var Range = ace.require('ace/range').Range;
editor.session.addMarker(new Range(from, 0, to, 1), "myMarker", "fullLine");

这里的from 和to 是您要突出显示的行数