CodeMirror 2-en surbrillance seulement (pas d'éditeur)

comme une mise à jour un peu tardive, CodeMirror 2 a récemment acquis cette capacité. Voir http://codemirror.net/demo/runmode.html

en fait, vous ne pouvez pas. Codemirror2 est écrit de la manière que toute la mise en œuvre est cachée dans les fermetures. Les méthodes publiques qui peuvent être utilisées sont décrites dans la documentation http://codemirror.net/manual.html

Les seules options disponibles sont d'utiliser un autre surligneur de syntaxe ou de plonger dans le code de CodeMirror2 pour enlever les parties nécessaires.

Si vous choisissez la dernière option, s'il vous plaît donner l'attention à

function refreshDisplay(from, to) method

il boucle à travers les lignes et les souligne.

Modifier

Viens de réaliser une méthode plus simple existe. Lisez la méthode 2 ci-dessous. Je garde l'ancienne méthode et ses explications intactes et je n'inclus que le code jQuery amélioré.

si vous posez des questions sur une méthode native du paquet, la réponse est non, cela ne fonctionne qu'avec textarea . Mais si vous êtes ouvert à l'utilisation de solutions de rechange, voici une qui fonctionne (testé).

j'ai utilisé jQuery ici, mais son utilisation n'est pas un must et vous pouvez obtenir le même avec le code JS pur, bien qu'il serait plus long et pas aussi net que le code jQuery.

maintenant, passons à la solution.

supposons que vous ayez un <pre> avec du code à l'intérieur, que vous voulez transformer en conteneur codemirror en surbrillance de la syntaxe sans éditeur:

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

Ce que vous faites est,

1. changer le <pre> en <textarea> ,
2. joindre codemirror pour le textarea,
3. cacher le faux curseur et le garder caché, et
4. ne permettez pas à la textarea cachée du codemirror de saisir la mise au point (et de la reprendre quand elle le fait).

pour la dernière action j'ai utilisé la méthode suggérée par Travis Webb . Voici le code jQuery qui fait 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();
    });

});

Deuxième Méthode

au lieu de lutter avec le curseur et tout cela, nous pouvons supprimer les éléments qui font fonctionner l'éditeur. 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();
});

vous devez utiliser un surligneur de syntaxe de code autonome: SyntaxHighlighter 3 fonctionne très bien.

si vous voulez vraiment CodeMirror, il y a une readOnly option:

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

CodeMirror V2 contient un runmode.js.

j'ai écrit un exemple en utilisant runmode avec gouttière.

contrôle: http://jsfiddle.net/lyhcode/37vHL/2 /

présente une solution plus simple en utilisant codemirror runmode et jquery:

<pre class='code'>{:message => 'sample code'}</pre>

$(document).ready(function() {
    $('.code').each(function(index, e) {
        $(e).addClass('cm-s-default'); // apply a theme class
        CodeMirror.runMode($(e).text(), "javascript", $(e)[0]);
    });
});

CM2 ne supporte pas directement la fonctionnalité que vous recherchez. Cependant, j'ai utilisé un truc impliquant le handler onFocus qu'ils supportent pour interdire à l'utilisateur de se concentrer sur L'élément Codemirror, et donc interdire l'édition. Mon explication qui suit présuppose que vous avez regardé par ici: http://codemirror.net/manual.html . Vous voudrez probablement utiliser jQuery pour cette technique, mais il n'est pas nécessaire. Vous parlez d'avoir code dans un div donc je suppose que vous savez comment attacher Codemirror à un élément div .

1. créer un <input id="tricky"> textfield d'une sorte qui est caché. Vous pouvez utiliser n'importe quelle technique pour "cacher" ce que vous voulez, mais je peux vous dire que mettre le CSS à "display:none" ne fonctionnera pas. visibility:hidden pourrait fonctionner, mais probablement mieux de simplement positionner la div sur la page quelque part.
2. Setup onFocus gestionnaire par le Codemirror2 de la documentation dans le lien ci-dessus,
3. dans votre onFocus event handler, faites quelque chose comme:
   
   
   
   $("tricky").focus();
   
   ou sans jQuery:
   
   document.getElementById("tricky").focus();

et vous redirigez instantanément focus vers un champ invisible et personne ne peut modifier le code que vous affichez. Il y a probablement un moyen intelligent de vaincre cette méthode, mais ça marchera pour 99% des cas. C'est un peu rusé, mais au moins tu n'as pas à faire avec les entrailles de Codemirror.