Wie kann ich Code mit dem ACE-Editor hervorheben?

Question

Ich möchte mehr als ein Dutzend kleine Codeausschnitte mit der Syntax hervorheben und sie dann mit dem ACE-Editor bearbeiten, indem ich darauf klicke, da ich denke, dass dies viel schneller wäre, als den vollständigen Editor für jeden einzelnen einzurichten.Ich sehe, dass es einen einfachen Befehl zum Einrichten eines ACE-Editors gibt :

<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>

Gibt es eine einfache Möglichkeit, die API aufzurufen, um den Text nur hervorzuheben , ohne den Editor einzurichten?Die ideale API würde Text aufnehmen und HTML mit Tags zurückgeben, die zum Hervorheben verwendet werden könnten.Ich bin mir bewusst, dass es spezielle Hervorhebungsbibliotheken für JavaScript gibt, aber ich möchte versuchen, denselben Textmarker sowohl für angezeigten als auch für bearbeiteten Text zu verwenden.

Answer 1

Es gibt eine serverseitige Version des Textmarkers (der in node.js ausgeführt wird). verfügbar , das wird wahrscheinlich ziemlich einfach auf webbasiertes Javascript portierbar sein.

Answer 2

Markieren Sie das Wort:

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

Entfernen Sie das hervorgehobene Wort:

editor.getSession().removeMarker(marker);

Markieren Sie die Zeile:

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

Answer 3

Zuerst möchten Sie Ihre Zeilennummer als globale Variable deklarieren.

var erroneousLine;

Dies ist die HighlightError-Funktion, die eine Zeilennummer (lineNumber) als Parameter verwendet.Dies kann durch eine Fehlermeldung oder durch Verwendung von editor.selection.getCursor().row ausgelöst werden, um die aktuelle Zeile oder etwas anderes abzurufen.

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

Beachten Sie, dass ich einen errorHighlight deklariert habe. Auf diese Weise wird dies hervorgehoben.Geben Sie in Ihrem CSS Folgendes ein:

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

Diese Funktion hebt die bereits hervorgehobene Linie hervor

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

Answer 4

Eine Idee:

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

Diese Funktion sollte die SQL-Syntax (Ace-Morning-Thema) im angegebenen Text hervorheben, ohne den gesamten Editor zu laden und ohne die Rinne.