Question

我希望语法突出显示十几个小代码段，然后通过点击它们使它们可以使用ACE Editor进行编辑，因为我认为它比为每个代码设置完整编辑器要快得多。我看到有一个simple command for setting up an ACE editor：

<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中运行）available，它可能很容易移植到基于web的javascript。

Answer 4

一个想法：

function highlightSyntax(text) {
    var res = [];

    var Tokenizer = ace.require('ace/tokenizer').Tokenizer;
    var Rules = ace.require('ace/mode/sql_highlight_rules').SqlHighlightRules;
    var Text = ace.require('ace/layer/text').Text;

    var tok = new Tokenizer(new Rules().getRules());
    var lines = text.split('\n');

    lines.forEach(function(line) {
      var renderedTokens = [];
      var tokens = tok.getLineTokens(line);

      if (tokens && tokens.tokens.length) {
        new Text(document.createElement('div')).$renderSimpleLine(renderedTokens, tokens.tokens);
      }

      res.push('<div class="ace_line">' + renderedTokens.join('') + '</div>');
    });

    return '<div class="ace_editor ace-tomorrow"><div class="ace_layer" style="position: static;">' + res.join('') + '</div></div>';
}

此函数应突出显示给定文本中的SQL语法（ace-tomorrow theme），而不加载整个编辑器和没有装订线。

Answer 5

我觉得这个回答已经很晚了，但我还是会写，以防它可以帮助别人。

我最终在打字稿中创建了一个简单的函数，它找到要突出显示的范围的坐标并滚动到它：

highlighText(text: string) {
    const value = this.aceEditor.session.getValue();
    const startRow = value.substr(0, value.indexOf(text)).split(/\r\n|\r|\n/).length - 1;
    const startCol = this.aceEditor.session.getLine(startRow).indexOf(text);
    const endRowOffset = text.split(/\r\n|\r|\n/).length;
    const endRow = startRow + endRowOffset - 1;
    const endCollOffset = text.split(/\r\n|\r|\n/)[endRowOffset - 1].length;
    const endCol = startCol + (endCollOffset > 1 ? endCollOffset + 1 : endCollOffset);
    const range = new ace.Range(startRow, startCol, endRow, endCol);

    this.aceEditor.session.selection.setRange(range);
    this.aceEditor.scrollToLine(startRow, true, true, () => {});
  }

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

5 个答案: