Comment puis-je mettre le code avec l'AS de l'éditeur?

J'aimerais la surbrillance de la syntaxe plus d'une douzaine de petits bouts de code, puis de les rendre éditable avec l'ACE de l'Éditeur en cliquant sur eux, car je pense qu'il serait beaucoup plus rapide que la configuration de la totalité de l'éditeur pour chaque. Je vois une commande simple pour la mise en place d'un AS de l'éditeur:

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

Est-il un moyen simple pour appeler l'API juste mettre en évidence le texte sans la configuration de l'éditeur? L'idéal de l'API permettrait de prendre un peu de texte et de retour HTML avec des balises qui pourraient être utilisées pour mettre en évidence. Je suis au courant qu'il ya spécialisé en soulignant les bibliothèques JavaScript, mais je voudrais essayer d'utiliser la même surligneur à la fois pour le texte qui est affiché et un texte en cours d'édition.

Qu'avez-vous utiliser?
Ace Éditeur a un mode en lecture seule qui fait, fondamentalement, l'affichage de l'éditeur, mais vous obtenez toujours les frais généraux de la totalité de l'éditeur. La vitesse n'est pas un énorme problème, mais - plus la taille de l'éditeur. Je l'utilise pour à la fois l'édition et l'affichage sur quelques sites et il fonctionne bien.

OriginalL'auteur Benjamin Atkin | 2012-01-12

  1. 7

    Il y a un côté serveur version du surligneur (qui s'exécute en node.js) disponible, qui va probablement être portable sur le web javascript assez facile.

    OriginalL'auteur Jan Jongboom

  2. 12

    Mettre 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 souligné:

    editor.getSession().removeMarker(marker);

    Mettre en surbrillance la ligne:

    editor.getSession().addMarker(range,"ace_active_line","background");
    Cela ne semble pas fonctionner plus longtemps? jsbin.com/acotuv/1/edit

    OriginalL'auteur megas

  3. 7

    D'abord, vous voulez déclarer votre numéro de ligne comme une variable globale.

    var erroneousLine;

    C'est le highlightError fonction, qui prend dans un numéro de ligne (lineNumber) en tant que paramètre. ce qui pourrait être déclenchée à partir d'un message d'erreur ou de l'utilisation de editor.selection.getCursor().row pour obtenir la ligne actuelle, ou quelque chose d'autre. 

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

    Avis que j'ai déclaré un errorHighlight, qui est la façon dont cela sera mis en évidence. Dans votre css de placer les éléments suivants: 

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

    Cette fonction unhighlights l'a déjà souligné ligne 

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

    OriginalL'auteur maudulus

  4. 0

    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 (ace-demain thème) dans le texte sans avoir à charger l'éditeur entier et sans la gouttière.

    OriginalL'auteur trimstring