如何使用 ACE 編輯器突出顯示代碼？

Question

我想在語法上突出顯示十幾個小代碼片段，然后通過單擊它們使它們可以使用 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 高亮庫，但我想嘗試對正在顯示的文本和正在編輯的文本使用相同的熒光筆。

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。

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 主題），而無需加載整個編輯器和裝訂線。

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, () => {});
  }