Come posso evidenziare il codice con l'editor ACE?

Question

Vorrei sintassi evidenziare più di una dozzina di piccoli snippet di codice e quindi renderli modificabili con ACE Editor facendo clic su di essi, poiché penso che sarebbe molto più veloce di impostare l'editor completo per ciascuno. Vedo che c'è un simple command for setting up an ACE editor:

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

C'è un modo semplice per mettere in l'API per appena highlight il testo senza configurare l'editor? L'API ideale dovrebbe contenere del testo e restituire HTML con tag che potrebbero essere utilizzati per l'evidenziazione. Sono consapevole che esistono librerie di evidenziazione specializzate per JavaScript, ma mi piacerebbe provare a utilizzare lo stesso evidenziatore sia per il testo che viene visualizzato sia per il testo che si sta modificando.

Answer 1

Esiste una versione lato server dell'evidenziatore (che viene eseguito in node.js) available, che probabilmente sarà facilmente trasferibile su web javascript.

Answer 2

evidenziare la parola:

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

Rimuovere la parola evidenziata:

editor.getSession().removeMarker(marker); 

Evidenziare la linea:

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

Answer 3

primo luogo si vuole dichiarare il vostro numero di riga come variabile globale .

var erroneousLine; 

Questa è la funzione highlightError, che prende in 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"); 
} 

Notate che ho dichiarato errorHighlight, che è come questo viene evidenziato. Al tuo posto css il seguente:

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

Questa funzione unhighlights 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 (asso-domani a tema) nel testo dato senza caricare l'intero editor e senza la grondaia.