web-dev-qa-db-fra.com

CodeMirror 2 - Surbrillance uniquement (pas d'éditeur)

CodeMirror 2 peut-il être utilisé pour mettre en évidence le code d'une balise DIV ou PRE (sans l'éditeur)?

Comme CodeMirror 1 était capable de faire avec la fonction hightlightText ()? Par exemple ici: http://codemirror.net/1/highlight.html , après avoir appuyé sur run highlight (le texte en surbrillance ci-dessous)

Peut-il également mettre en évidence le code d'un élément en ligne, comme <code>, et conserver les résultats en ligne, comme le fait Prettify de Google?

javascriptsyntax-highlightingcodemirror
54
Alex

Une solution beaucoup plus agréable et plus simple consiste à simplement définir la propriété readOnly de l'instance CodeMirror sur true, 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
    });

});

Ajoutez simplement la classe .code à la balise contenant le code et ce sera la syntaxe mise en évidence. J'ai également ajouté la prise en charge du code en ligne, en utilisant la classe .inline.

Exemple sur jsfiddle

53
Sindre Sorhus

En tant que mise à jour quelque peu tardive, CodeMirror 2 a récemment acquis cette capacité. Voir http://codemirror.net/demo/runmode.html

37
Marijn

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

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

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

Modifier
Je viens de réaliser qu'une méthode plus simple existe. Lisez la méthode 2 ci-dessous. Je garde intacte l'ancienne méthode et ses explications et j'inclus simplement le code jQuery amélioré.

Si vous demandez une méthode native du package, la réponse est non, cela ne fonctionne qu'avec textarea. Mais si vous êtes prêt à utiliser des solutions de contournement, en voici une qui fonctionne (testée).

J'ai utilisé jQuery ici, mais son utilisation n'est pas indispensable et vous pouvez obtenir la même chose avec du code js pur, bien qu'il soit plus long et pas aussi soigné que le code jQuery.

Maintenant, passons à la solution de contournement.

Supposons que vous ayez un <pre> avec du code à l'intérieur, que vous souhaitez transformer en conteneur de codemirror sans éditeur mis en évidence par la syntaxe:

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

Ce que vous faites,

  1. changer la <pre> à <textarea>,
  2. attachez codemirror à la zone de texte,
  3. cacher le faux curseur et le garder caché, et
  4. n'autorisez pas la zone de texte cachée du miroir de code à saisir le focus (et à le récupérer quand il 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 ça, nous pouvons supprimer les éléments qui font vibrer 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();
});
2
Majid Fouladpour

Voici une solution plus simple en utilisant le mode d'exécution de codemirror 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]);
    });
});
2
desheikh

En fait, vous ne pouvez pas. Codemirror2 est écrit de la manière que toute implémentation est cachée dans les fermetures. Les méthodes publiques pouvant ê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 supprimer les parties nécessaires.
Si vous choisissez la dernière option, veuillez prêter attention à

function refreshDisplay(from, to) method

il parcourt les lignes et les met en surbrillance.

2
Eldar Djafarov

CodeMirror V2 contient un runmode.js.

J'ai écrit un exemple en utilisant runmode avec Gutter.

vérifier: http://jsfiddle.net/lyhcode/37vHL/2/

2
lyhcode

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

  1. Créez un champ de texte <input id="tricky"> D'une sorte qui est masqué. Vous pouvez utiliser n'importe quelle technique pour le "cacher" que vous souhaitez, mais je peux vous dire que définir le CSS sur "display:none" Ne fonctionnera pas. visibility:hidden Pourrait fonctionner, mais il vaut probablement mieux positionner le div de la page quelque part.
  2. Configurez un gestionnaire onFocus selon la documentation de Codemirror2 dans le lien ci-dessus,
  3. Dans votre gestionnaire d'événements onFocus, faites quelque chose comme:

    $("tricky").focus();
    ou sans jQuery:
    document.getElementById("tricky").focus();

et vous redirigez instantanément le focus vers un champ invisible et personne ne peut modifier le code que vous affichez. Il existe probablement un moyen intelligent de vaincre cette méthode, mais cela fonctionnera dans 99% des cas. C'est un peu compliqué, mais au moins, vous n'avez pas à vous mêler des entrailles de Codemirror.

1
Travis Webb