¿Cómo puedo resaltar el código con el editor de ACE?

Question

Me gustaría sintaxis resaltar más de una docena de pequeños fragmentos de código y luego hacerlos editables con ACE Editor haciendo clic en ellos, ya que creo que sería mucho más rápido que configurar el editor completo para cada uno. Veo que hay una 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> 

¿Hay una manera fácil de llamar a la API para simplemente destacado el texto sin configurar el editor? La API ideal tomaría texto y devolvería HTML con etiquetas que podrían usarse para resaltar. Soy consciente de que hay bibliotecas de resaltado especializadas para JavaScript, pero me gustaría intentar usar el mismo resaltador tanto para el texto que se muestra como para el texto que se está editando.

Answer 1

Hay una versión del lado del servidor del resaltador (que se ejecuta en node.js) available, que probablemente sea bastante fácil de transportar a javascript basado en web.

Answer 2

Resalte la palabra:

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

Retire la palabra resaltada:

editor.getSession().removeMarker(marker); 

Resalte la línea:

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

Answer 3

Primera desea declarar su número de línea como una variable global .

var erroneousLine; 

Esta es la función highlightError, que toma en un número de línea (lineNumber) como su parámetro. que podría activarse desde un mensaje de error o usando editor.selection.getCursor().row para obtener la fila actual, o alguna otra cosa.

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

Tenga en cuenta que he declarado errorHighlight, que es cómo esto se pondrá de relieve. En su lugar css lo siguiente:

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

Esta función unhighlights la línea ya se ha destacado

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

Answer 4

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

Esta función debe resaltar la sintaxis SQL (tema as-mañana) en el texto dado sin cargar todo el editor y sin la cuneta.