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

How can I highlight code with ACE editor?

本文关键字：显示 代码 编辑器 何使用 ACE      更新时间：2023-09-26

我想在语法上突出显示十几个小代码片段，然后通过单击ACE编辑器使其可编辑，因为我认为这比为每个片段设置完整的编辑器要快得多。我看到有一个简单的命令来设置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有专门的高亮显示库，但我想尝试对正在显示的文本和正在编辑的文本使用相同的高亮显示。

突出显示单词：

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");

首先，您需要将行号声明为全局变量。

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);
}

有一个服务器端版本的highlighter（运行在node.js中）可用，它可能很容易移植到基于web的javascript。

一个想法：

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语法（明天的王牌主题），而不加载整个编辑器，也不使用槽。

我认为这已经很晚了，但我仍然会写，以防它能帮助其他人。

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

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, () => {});
  }
相关文章：