16

我想对十几个小代码片段进行语法高亮显示，然后通过单击它们使它们可以使用 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 突出显示库，但我想尝试对正在显示的文本和正在编辑的文本使用相同的荧光笔。

4

5 回答 5

16

突出显示这个词：

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");
于 2012-02-21T10:47:54.703 回答
8

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

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

请注意，我已经声明了 a errorHighlight，这就是突出显示的方式。在您的 CSS 中放置以下内容：

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

此功能取消突出显示已突出显示的行

function unhighlightError(){
  editor.getSession().removeMarker(erroneousLine);
}
于 2015-01-14T21:28:32.493 回答
6

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

于 2012-01-24T23:55:49.750 回答
1

一个想法：

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

This function should highlight SQL syntax (ace-tomorrow theme) in the given text without loading the whole editor and without the gutter.

于 2015-08-24T10:02:51.090 回答
0

I think this is very late to answer, but I will still write in case it can help others.

I ended up creating a simple function in typescript which finds co-ordinates for range to highlight and also scrolls to it:

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, () => {});
  }
于 2021-02-17T07:01:03.180 回答