Comment puis-je mettre en évidence le code avec l'éditeur ACE?

Question

Je tiens à souligner la syntaxe plus d'une douzaine de petits extraits de code, puis les rendre modifiables avec ACE Editor en cliquant sur eux, car je pense que ce serait beaucoup plus rapide que la mise en place de l'éditeur complet pour chacun. Je vois qu'il ya une commande simple pour la mise en place d'un éditeur de 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>

Y at-il un moyen simple de faire appel à l'API juste fort le texte sans la mise en place de l'éditeur? L'API idéal serait de prendre dans certains HTML de texte et retour avec des balises qui pourraient être utilisés pour mettre en évidence. Je suis conscient qu'il ya des bibliothèques spécialisées mettant en évidence pour JavaScript, mais je voudrais essayer d'utiliser la même surligneur à la fois pour le texte qui est affiché et le texte qui est en cours d'édition.

Answer 1

Il existe une version côté serveur du surligneur (qui fonctionne en Node.js)

Answer 2

Mettez en surbrillance le mot:

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

Supprimer le mot en surbrillance:

editor.getSession().removeMarker(marker);

Mettez en surbrillance la ligne:

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

D'abord, vous voulez déclarer votre numéro de ligne en tant que variable globale.

var erroneousLine;

Ceci est la fonction de highlightError, ce qui prend un certain nombre de lignes (lineNumber) en tant que paramètre. qui pourrait être déclenché à partir d'un message d'erreur ou d'utiliser editor.selection.getCursor().row pour obtenir la ligne actuelle, ou autre chose.

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

Notez que j'ai déclaré errorHighlight, ce qui est de savoir comment cela sera mis en évidence. A votre place css ce qui suit:

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

Cette fonction unhighlights la ligne déjà mis en évidence

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

Une idée:

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

Cette fonction doit mettre en évidence la syntaxe SQL (thème demain ace) dans le texte donné sans charger l'éditeur entier et sans la gouttière.

Answer 3

Mettez en surbrillance le mot:

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

Supprimer le mot en surbrillance:

editor.getSession().removeMarker(marker);

Mettez en surbrillance la ligne:

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

Answer 4

D'abord, vous voulez déclarer votre numéro de ligne en tant que variable globale.

var erroneousLine;

Ceci est la fonction de highlightError, ce qui prend un certain nombre de lignes (lineNumber) en tant que paramètre. qui pourrait être déclenché à partir d'un message d'erreur ou d'utiliser editor.selection.getCursor().row pour obtenir la ligne actuelle, ou autre chose.

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

Notez que j'ai déclaré errorHighlight, ce qui est de savoir comment cela sera mis en évidence. A votre place css ce qui suit:

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

Cette fonction unhighlights la ligne déjà mis en évidence

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

Answer 5

Une idée:

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

Cette fonction doit mettre en évidence la syntaxe SQL (thème demain ace) dans le texte donné sans charger l'éditeur entier et sans la gouttière.