Come posso evidenziare il codice con l'editor ACE?

Question

Vorrei evidenziare la sintassi più di una dozzina di piccoli frammenti di codice e quindi renderli modificabili con ACE Editor facendo clic su di essi, poiché penso che sarebbe molto più veloce dell'impostazione dell'editor completo per ciascuno.Vedo che c'è un semplice comando per impostare un editor 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>

Esiste un modo semplice per richiamare l'API per evidenziare il testo senza impostare l'editor?L'API ideale potrebbe contenere del testo e restituire HTML con tag che potrebbero essere utilizzati per evidenziare.Sono a conoscenza che esistono librerie di evidenziazione specializzate per JavaScript, ma vorrei provare a utilizzare lo stesso evidenziatore sia per il testo visualizzato che per il testo modificato.

Answer 1

Esiste una versione lato server dell'evidenziatore (che viene eseguito in node.js) disponibile , che sarà probabilmente portabile in javascript basato sul web abbastanza facile.

Answer 2

Evidenzia la parola:

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

Rimuovi la parola evidenziata:

editor.getSession().removeMarker(marker);

Evidenzia la riga:

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

Answer 3

Per prima cosa vuoi dichiarare il tuo numero di riga come variabile globale.

var erroneousLine;

Questa è la funzione highlightError, che accetta un numero di riga (lineNumber) come parametro.che potrebbe essere attivato da un messaggio di errore o utilizzando editor.selection.getCursor().row per ottenere la riga corrente o qualcos'altro.

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

Si noti che ho dichiarato un errorHighlight, che è il modo in cui verrà evidenziato.Nel tuo css inserisci quanto segue:

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

Questa funzione evidenzia la linea già evidenziata

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

Answer 4

Un'idea:

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

Questa funzione dovrebbe evidenziare la sintassi SQL (tema asso-domani) nel testo dato senza caricare l'intero editor e senza il gutter.