CodeMirror 2 - Только подсветка (без редактора)

Ответ 1

Более приятным и простым решением является просто установить для свойства readOnly экземпляра CodeMirror значение true, например:

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

});

Просто добавьте класс .code в тег, содержащий код, и будет выделен синтаксис. Я также добавил поддержку встроенного кода, используя класс .inline.

Пример в jsfiddle

Ответ 2

В качестве немного позднего обновления CodeMirror 2 недавно приобрел эту способность. См. http://codemirror.net/demo/runmode.html

Ответ 3

Вы должны использовать синтаксис синтаксиса отдельного кода: СинтаксисHighlighter 3 работает очень хорошо.

Если вы действительно хотите CodeMirror, существует опция readOnly:

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

Ответ 4

На самом деле вы не можете. Codemirror2 написан таким образом, что вся реализация скрыта в закрытии. Публичные методы, которые могут быть использованы, описаны в документации http://codemirror.net/manual.html
Единственными доступными опциями являются использование анотальных синтаксических индикаторов или погружение в код CodeMirror2 для удаления необходимых деталей.
Если вы выберете последний вариант, обратите внимание на

function refreshDisplay(from, to) method

он перебирает строки и выделяет их.

Ответ 5

Edit
Просто понял, что существует более простой метод. Прочитайте метод 2 ниже. Я сохраняю старый метод и его объяснения неповрежденными и просто включаю улучшенный код jQuery.

Если вы спрашиваете о нативном методе пакета, ответ - нет, он работает только с textarea. Но если вы открыты для использования обходных решений, вот что работает (проверено).

Я использовал jQuery здесь, но его использование не является обязательным, и вы можете достичь того же самого с чистым js-кодом, хотя это будет длиннее и не так аккуратно, как код jQuery.

Теперь перейдите к обходному пути.

Предположим, что у вас есть код <pre> с внутренним кодом, который вы хотите превратить в скрытый с помощью синтаксиса контейнер codemirror:

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

Что вы делаете,

• измените значение <pre> на <textarea>,
• прикреплять codemirror к текстовой области,
• скрыть поддельный курсор и сохранить его скрытым, а
• Не позволяйте скрытой текстовой области codemirror захватывать фокус (и вырвать его обратно, когда это произойдет).

Для последнего действия я использовал метод предложенный Travis Webb. Вот код jQuery, который выполняет следующие четыре функции:

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

});

Метод второй

Вместо того, чтобы бороться с курсором и всем этим, мы можем удалить элементы, которые заставляют редактор тикать. Вот код:

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

Ответ 6

CodeMirror V2 содержит runmode.js.

Я написал пример с использованием runmode с желобом.

Проверка: http://jsfiddle.net/lyhcode/37vHL/2/

Ответ 7

Это более простое решение с использованием codemirror runmode и 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]);
    });
});

Ответ 8

CM2 напрямую не поддерживает функцию, которую вы ищете. Однако я использовал трюк с помощью обработчика onFocus, который они поддерживают, чтобы запретить пользователю сосредоточиться на элементе Codemirror и, следовательно, запретить редактирование. Следующее мое объяснение предполагает, что вы просмотрели здесь: http://codemirror.net/manual.html. Вероятно, вы захотите использовать jQuery для этой техники, но это не требуется. Вы говорите о наличии кода в div, поэтому я предполагаю, что вы знаете, как присоединить Codemirror к элементу div.

• Создайте текстовое поле <input id="tricky">, которое скрыто. Вы можете использовать любую технику для "скрытия", которую вы хотите, но могу сказать, что настройка CSS на "display:none" не будет работать. visibility:hidden может работать, но, вероятно, лучше просто расположить div с страницы где-то.
• Установите обработчик onFocus в документации Codemirror2 в приведенной выше ссылке,
• Внутри обработчика событий onFocus сделайте что-нибудь вроде:
  
  $("tricky").focus();
  или без jQuery:
  document.getElementById("tricky").focus();

и вы мгновенно перенаправляете фокус на невидимое поле, и никто не может редактировать отображаемый код. Вероятно, есть какой-то умный способ победить этот метод, но он будет работать в 99% случаев. Это немного хитрость, но по крайней мере вам не нужно лезть с внутренностями Codemirror.