如何使用ACE编辑器突出显示代码？

Question

我希望语法突出显示十几个小代码段,然后通过点击它们使它们可以使用ACE Editor进行编辑,因为我认为它比为每个代码设置完整编辑器要快得多.我看到有一个简单的命令来设置ACE编辑器:

<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
    var editor = ace.edit("editor");
};
</script>

是否有一种简单的方法可以调用API来突出显示文本而无需设置编辑器？理想的API将采用一些文本并返回带有可用于突出显示的标记的HTML.我知道JavaScript有专门的突出显示库,但我想尝试使用相同的荧光笔来显示正在显示的文本和正在编辑的文本.

Answer 1

突出显示这个词:

var range = new Range(rowStart, columnStart, rowEnd, columnEnd);
var marker = editor.getSession().addMarker(range,"ace_selected_word", "text");

删除突出显示的单词:

editor.getSession().removeMarker(marker);

突出显示该行:

editor.getSession().addMarker(range,"ace_active_line","background");

Answer 2

首先,您要将行号声明为全局变量.

var erroneousLine;

这是highlightError函数,它以行号(lineNumber)作为参数.可以从错误消息触发或使用editor.selection.getCursor().row获取当前行或其他内容.

function highlightError(lineNumber) {
  unhighlightError();
  var Range = ace.require("ace/range").Range
  erroneousLine = editor.session.addMarker(new Range(lineNumber, 0, lineNumber, 144), "errorHighlight", "fullLine");
}

请注意,我已声明了一个errorHighlight,这将突出显示.在你的css中放置以下内容:

.errorHighlight{
  position:absolute;
  z-index:20;
  background-color:#F4B9B7;
}

此功能不会突出显示已突出显示的行

function unhighlightError(){
  editor.getSession().removeMarker(erroneousLine);
}

Answer 3

有一个服务器端版本的荧光笔(在node.js中运行)可用,它可能很容易移植到基于web的javascript.