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

Question

Me gustaría resaltar la sintaxis de 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 un comando simple para configurar 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>

¿Existe una forma sencilla de llamar a la API para simplemente destacar el texto sin configurar el editor?La API ideal aceptaría algo de texto y devolvería HTML con etiquetas que podrían usarse para resaltar.Soy consciente de que existen 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 edita.

Answer 1

Existe una versión del resaltador del lado del servidor (que se ejecuta en node.js) disponible , que probablemente sea fácil de transferir 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");

Elimine la palabra resaltada:

editor.getSession().removeMarker(marker);

Resalte la línea:

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

Answer 3

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

var erroneousLine;

Esta es la función resaltadoError, que toma un número de línea (lineNumber) como su parámetro.que podría desencadenarse por un mensaje de error o mediante el uso editor.selection.getCursor().row para obtener la fila actual, o algo más.

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

Note que he declarado un errorHighlight, que es como esto se resaltará.En tu css coloca lo siguiente:

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

Esta función resalta la línea ya resaltada.

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