CodeMirror 2-tylko podświetlenie (bez edytora)

Jako nieco późna aktualizacja, CodeMirror 2 niedawno zyskał tę zdolność. Zobacz http://codemirror.net/demo/runmode.html

Właściwie nie można. Codemirror2 jest napisany w taki sposób, że cała implementacja jest ukryta w zamknięciach. Metody publiczne, które mogą być używane są opisane w dokumentacji http://codemirror.net/manual.html
Jedynymi dostępnymi opcjami są użycie zakreślaczy składni lub zanurzenie się w kodzie CodeMirror2, aby usunąć niezbędne części.
Jeśli wybierzesz ostatnią opcję, zwróć uwagę na

function refreshDisplay(from, to) method

Pętli przez linie i podświetla je.

Edit
Właśnie zdałem sobie sprawę, że istnieje prostsza metoda. Przeczytaj metodę 2 poniżej. Zachowuję starą metodę i jej wyjaśnienia w Nienaruszonym Stanie i dołączam tylko ulepszony kod jQuery.

Jeśli pytasz o natywną metodę pakietu, odpowiedź brzmi nie, działa tylko z textarea. Ale jeśli jesteś otwarty na używanie obejść, oto jeden, który działa (przetestowany).

Użyłem jQuery tutaj, ale jego użycie nie jest koniecznością i możesz osiągnąć to samo z czystym js kod, choć byłby dłuższy i nie tak schludny jak kod jQuery.

Załóżmy, że masz <pre> z kodem w środku, który chcesz zmienić w podświetlany bez edytora kontener codemirror:

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

To co robisz to,

1. Zmień <pre> na <textarea>,
2. Dołącz codemirror do textarea,
3. Ukryj fałszywy kursor i trzymaj go w ukryciu, i
4. Nie zezwalaj na przechwytywanie ukrytego pola tekstowego codemirror ostrości (a gdy już to zrobi).

Do ostatniej akcji użyłem metody zasugerowanej przez Travisa Webba . Oto kod jQuery, który robi te cztery rzeczy:

$(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();
    });

});

Metoda Druga

Zamiast zmagać się z kursorem i tym wszystkim, możemy usunąć elementy, które sprawiają, że edytor zaznacza. Oto kod:

$(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();
});

Powinieneś używać samodzielnego zakreślacza składni kodu: SyntaxHighlighter 3 działa naprawdę dobrze.

Jeśli naprawdę chcesz CodeMirror, jest readOnly wariant:

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

CodeMirror V2 zawiera runmode.js.

Napisałem przykład używając runmode z gutterem.

Sprawdź: http://jsfiddle.net/lyhcode/37vHL/2/

Oto prostsze rozwiązanie przy użyciu codemirror runmode i 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 nie obsługuje bezpośrednio funkcji, której szukasz. Jednak użyłem sztuczki dotyczącej obsługi onFocus, którą obsługują, aby uniemożliwić użytkownikowi skupienie się na elemencie Codemirror, a tym samym uniemożliwić edycję. Moje wyjaśnienie, które następuje zakłada, że przejrzałeś tutaj: http://codemirror.net/manual.html. prawdopodobnie będziesz chciał użyć jQuery do tej techniki, ale nie jest to wymagane. Mówisz o kodzie w div więc zakładam wiesz jak dołączyć Codemirror do elementu div.

1. Utwórz <input id="tricky"> pole tekstowe jakiegoś rodzaju, które jest ukryte. Możesz użyć dowolnej techniki do "ukrycia" go, ale mogę ci powiedzieć, że ustawienie CSS na "display:none" nie zadziała. visibility:hidden może działać, ale prawdopodobnie lepiej po prostu umieścić div na stronie gdzieś.
2. Konfiguracja obsługi onFocus zgodnie z dokumentacją Codemirror2 w powyższym linku,
3. wewnątrz twojego onFocus obsługi zdarzeń, zrób coś jak:
   
   $("tricky").focus();
   lub bez jQuery:
   document.getElementById("tricky").focus();

I natychmiast przekierowujesz fokus do niewidzialnego pola i nikt nie może edytować wyświetlanego kodu. Prawdopodobnie istnieje jakiś sprytny sposób na pokonanie tej metody, ale zadziała ona w 99% przypadków. To trochę oszustwa, ale przynajmniej nie musisz się zadręczać wnętrznościami Codemirror.