CodeMirror 2 - mettre en avant uniquement (pas d'éditeur)

Question

Peut CodeMirror 2 être utilisé pour mettre en évidence le code à partir d'un DIV ou PRE de la balise (sans éditeur)?

Comme CodeMirror 1 utilisé pour être en mesure de le faire avec le hightlightText() la fonction? Par exemple ici: http://codemirror.net/1/highlight.htmlaprès que vous appuyez sur exécuter en évidence (le texte en surbrillance ci-dessous)

Aussi peut-il mettre en évidence le code à partir d'un élément inline, comme <code>, et de garder les résultats en ligne, comme Google Embellir?

Answer 1

Un beaucoup plus agréable et plus facile la solution est simplement de définir la propriété readOnly de la CodeMirror instance de vrai, comme ceci:

$('.code').each(function() {

    var $this = $(this),
        $code = $this.html();

    $this.empty();

    var myCodeMirror = CodeMirror(this, {
        value: $code,
        mode: 'javascript',
        lineNumbers: !$this.is('.inline'),
        readOnly: true
    });

});

Il suffit d'ajouter la classe .code à la balise contenant le code et il sera syntaxe en surbrillance. J'ai également ajouté le support pour le code en ligne, à l'aide de la classe .inline.

Exemple sur jsfiddle

Answer 2

Un peu de retard de mise à jour, CodeMirror 2 récemment acquis cette capacité. Voir http://codemirror.net/demo/runmode.html

Answer 3

Vous devez utiliser un autonome code de la coloration syntaxique: SyntaxHighlighter 3 fonctionne vraiment bien.

Si vous voulez vraiment CodeMirror, il y a un readOnly option:

var myCodeMirror = CodeMirror(function(elt) {
    myElement.parentNode.replaceChild(myElement, elt); // myElement is your <pre> or <div>
  }, {
    value: myElement.value,
    readOnly: true
  });

Answer 4

En fait, vous ne pouvez pas. Codemirror2 est écrit dans la façon dont la mise en œuvre est caché dans les fermetures. Public les méthodes qui peuvent être utilisées sont décrites dans la documentation http://codemirror.net/manual.html
Les seules options disponibles sont à utiliser anothe surligneurs syntaxe ou de plonger dans le code de CodeMirror2 à dépouiller les pièces nécessaires.
Si vous aurez choisi la dernière option, veuillez donner de l'attention à

function refreshDisplay(from, to) method

il parcourt les lignes et les met en valeur.

Answer 5

Modifier
Viens de réaliser une méthode plus simple existe. Lire la méthode 2 ci-dessous. Je vais garder l'ancienne méthode et ses explications intacte et il suffit d'inclure l'amélioration de jQuery.

---

Si vous vous posez des questions à propos d'une méthode native de l'emballage, la réponse est non, il ne fonctionne qu'avec textarea. Mais si vous êtes ouvert à l'aide de solutions de contournement, en voici un qui fonctionne (testé).

J'ai utilisé jQuery ici, mais son utilisation n'est pas obligatoire et vous pouvez obtenir le même avec de la pure code js, mais ce serait plus long et pas aussi soigné que jQuery.

Maintenant, passons à la solution de contournement.

Supposons que vous avez un <pre> avec le code à l'intérieur, que vous souhaitez transformer en éditeur-moins de syntaxe en surbrillance codemirror conteneur:

<pre id="mycode">
<?php
  echo 'hi';
  $a = 10;
  if($a == 5) echo 'too small';
?>
</pre>

Ce que vous faites est,

1. modifier l' <pre> de <textarea>,
2. joindre codemirror pour le textarea,
3. masquer les faux curseur et de le garder caché, et
4. ne laissez pas le caché codemirror du textarea saisir le focus (et de voler en arrière quand il le fait).

Pour la dernière action que j'ai utilisé la méthode proposée par Travis Webb. Voici le code jQuery qui n'ces quatre choses:

$(document).ready(function() {

    // (1) replace pre with textarea
    $('#mycode').replaceWith('<textarea id="code">' + $('#mycode').html() + '</textarea>');

    // (2) attach codemirror 
    var editor = CodeMirror.fromTextArea($("#code"), {
        lineNumbers: true,
        mode: "application/x-httpd-php"
    });

    // (3) hide the fake cursor    
    $('pre.CodeMirror-cursor').hide();

    // [4] textarea to grab and keep the focus
    $('body').append('<textarea id="tricky" style="height: 1px; position: fixed; width: 1px; top: 0; margin-top: -100px;" wrap="off"></textarea>');

    // (4) grab focus
    $('#tricky').focus();

    // [4] if focus is lost (probably to codemirror)
    $('#tricky').blur(function() {

            // (4) re-claim focus
            $('#tricky').focus();

            // (3) keep the fake cursor hidden
            $('pre.CodeMirror-cursor').hide();
    });

});

---

Méthode Deux

Au lieu de lutter avec curseur et tout ça, on peut supprimer les éléments qui permettent à l'éditeur de tique. Voici le code:

$(document).ready(function() {
    $('#mycode').replaceWith('<textarea id="code">' + $('#mycode').html() + '</textarea>'); 
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        mode: "application/x-httpd-php"
    });

    $('pre.CodeMirror-cursor').remove();
    $('div.CodeMirror').find('textarea').blur().parent().remove();
    $('div.CodeMirror').find('pre:first').remove();
    $('textarea#code').remove();
});