Como posso destacar o código com o editor ACE?

Question

Eu gostaria de destacar a sintaxe de mais de uma dúzia de pequenos trechos de código e torná-los editáveis com o ACE Editor clicando neles, pois acho que seria muito mais rápido do que configurar o editor completo para cada um.Vejo que há um comando simples para configurar um 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 uma maneira simples de chamar a API para apenas destacar o texto sem configurar o editor?A API ideal pegaria algum texto e retornaria HTML com tags que poderiam ser usadas para destaque.Estou ciente de que existem bibliotecas de realce especializadas para JavaScript, mas gostaria de tentar usar o mesmo realce para o texto que está sendo exibido e para o texto que está sendo editado.

Answer 1

Há uma versão do lado do servidor do marcador (que é executado em node.js) disponível , que provavelmente será portátil para javascript baseado na web com bastante facilidade.

Answer 2

Destaque a palavra:

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

Remova a palavra destacada:

editor.getSession().removeMarker(marker);

Destaque a linha:

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

Answer 3

Primeiro, você deseja declarar o número da linha como uma variável global.

var erroneousLine;

Esta é a função highlightError, que leva um número de linha (lineNumber) como parâmetro.que pode ser acionado a partir de uma mensagem de erro ou usando editor.selection.getCursor().row para obter a linha atual ou outra coisa.

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

Observe que declarei um errorHighlight, que é como ele será destacado.Em seu css, coloque o seguinte:

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

Esta função destaca a linha já destacada

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

Answer 4

Uma ideia:

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 função deve destacar a sintaxe SQL (tema ace-tomorrow) no texto fornecido sem carregar o editor inteiro e sem a sarjeta.