59

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

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

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

4

7 に答える 7

57

より優れた簡単な解決策は、次のように、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の例

于 2011-04-09T13:40:02.133 に答える
40

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

于 2011-06-15T20:49:04.447 に答える
3

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

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

var myCodeMirror = CodeMirror(function(elt) {
    myElement.parentNode.replaceChild(myElement, elt); // myElement is your <pre> or <div>
  }, {
    value: myElement.value,
    readOnly: true
  });
于 2011-04-02T20:02:22.220 に答える
2

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

function refreshDisplay(from, to) method

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

于 2011-04-05T12:22:34.333 に答える
2

codemirrorrunmodeと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]);
    });
});
于 2012-11-11T08:49:30.733 に答える
2

編集
もっと簡単な方法が存在することに気づきました。以下の方法2をお読みください。古いメソッドとその説明はそのままにして、改善されたjQueryコードを含めるだけです。

パッケージのネイティブメソッドについて質問している場合、答えはノーです。これは。でのみ機能しtextareaます。ただし、回避策を使用することに抵抗がない場合は、これが機能する（テスト済み）ものです。

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

それでは、回避策に取り掛かりましょう。

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

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

あなたがしていることは、

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

最後のアクションでは、TravisWebbによって提案された方法を使用しました。これらの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();
});
于 2011-04-08T07:31:26.317 に答える
2

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

ガター付きのrunmodeを使用した例を作成しました。

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

于 2011-12-16T03:10:03.343 に答える