web-dev-qa-db-ja.com

CodeMirror 2-ハイライトのみ（エディターなし）

CodeMirror 2 を使用して、DIVまたはPREタグからのコードを強調表示できますか（エディターなし）？

CodeMirror 1が以前はhightlightText（）関数で実行できたように？例： http://codemirror.net/1/highlight.html 、実行強調表示を押した後（下の強調表示されたテキスト）

また、<code>などのインライン要素のコードを強調表示して、GoogleのPrettifyのように結果をインラインに保つこともできますか？

javascriptsyntax-highlightingcodemirror
54
Alex

次のように、CodeMirrorインスタンスのreadOnlyプロパティを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の例

53
Sindre Sorhus

やや遅いアップデートとして、CodeMirror 2は最近この機能を獲得しました。 http://codemirror.net/demo/runmode.html を参照してください

37
Marijn

スタンドアロンのコード構文ハイライターを使用する必要があります： SyntaxHighlighter は非常にうまく機能します。

CodeMirrorが本当に必要な場合は、 readOnly オプションがあります。

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

編集
より単純な方法が存在することを理解しました。以下の方法2をお読みください。私は古いメソッドとその説明をそのまま維持し、改良されたjQueryコードを含めています。

パッケージのネイティブメソッドについて質問する場合、答えはnoで、textareaでのみ機能します。ただし、回避策を使用できる場合は、動作する（テスト済みの）ものを次に示します。

ここではjQueryを使用しましたが、その使用は必須ではなく、純粋なjsコードで同じことを実現できますが、jQueryコードよりも長くてすっきりしません。

それでは、回避策に進みましょう。

<pre>内部にコードがあり、エディターなしの構文で強調表示されたコードミラーコンテナーに変換したい場合：

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

あなたがすることは、

  1. 変更 <pre>〜<textarea>、
  2. codemirrorをtextareaにアタッチし、
  3. 偽のカーソルを非表示にし、非表示のままにします。
  4. 非表示のコードミラーのtextareaがフォーカスを取得することを許可しないでください（そうすると、それを奪う）。

最後のアクションには Travis Webbが提案した方法 を使用しました。以下は、これら4つのことを行う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();
    });

});

方法2

カーソルを使ってレスリングする代わりに、エディターをティックにする要素を削除できます。これがコードです：

$(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

ここでは、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]);
    });
});
2
desheikh

実際にはできません。 Codemirror2は、すべての実装がクロージャーに隠されるように記述されています。使用できるパブリックメソッドについては、ドキュメント http://codemirror.net/manual.html で説明されています。
利用可能な唯一のオプションは、別の構文ハイライターを使用するか、CodeMirror2のコードを調べて、必要な部分を取り除くことです。
最後のオプションを選択する場合は、注意してください

function refreshDisplay(from, to) method

行をループして強調表示します。

2
Eldar Djafarov

CodeMirror V2にはrunmode.jsが含まれています。

Gutterでrunmodeを使用した例を書きました。

チェック： http://jsfiddle.net/lyhcode/37vHL/2/

2
lyhcode

CM2は、探している機能を直接サポートしていません。ただし、私は、ユーザーがCodemirror要素に集中できないようにするためにサポートするonFocusハンドラーを含むトリックを使用し、編集を禁止しました。以下の私の説明は、あなたがここで調べたことを前提としています： http://codemirror.net/manual.html 。この手法ではおそらくjQueryを使用したいと思うでしょうが、それは必須ではありません。 divにコードを含めることについて話しているので、div要素にCodemirrorをアタッチする方法を知っていると想定しています。

  1. 非表示になっている何らかの_<input id="tricky">_テキストフィールドを作成します。希望する方法で「非表示」にすることができますが、CSSを_"display:none"_に設定しても機能しないことがわかります。 _visibility:hidden_は機能するかもしれませんが、ページのどこかにdivを配置するだけの方が良いでしょう。
  2. 上記のリンクのCodemirror2ドキュメントに従ってonFocusハンドラーをセットアップします。
  3. onFocusイベントハンドラー内で、次のようにします。

    $("tricky").focus();
    またはjQueryなし：
    document.getElementById("tricky").focus();

フォーカスをすぐに非表示のフィールドにリダイレクトし、表示したコードを誰も編集できなくなります。この方法を無効にするための巧妙な方法がおそらくあるでしょうが、99％のケースで機能します。これは少し厄介ですが、少なくともCodemirrorの内部を操作する必要はありません。

1
Travis Webb