4

さまざまな言語 (HTML、CSS、Javascript、jQuery) のさまざまなソース コードを強調表示する必要があるチュートリアル ページを作成しています。

現在、私が言及した場合、それは1つの言語を強調していますmode:"jQuery"

コードの一部を HTML として強調表示し、一部を CSS として強調表示し、一部を jQuery などとして強調表示したい.どうすればよいですか?

私の現在のコード:

<link rel="stylesheet" href="codemirror-5.4/lib/codemirror.css">
<script src="codemirror-5.4/lib/codemirror.js"></script>
<script src="codemirror-5.4/mode/xml/xml.js"></script>
<script src="codemirror-5.4/mode/jquery/jquery.js"></script>
<script src="codemirror-5.4/keymap/sublime.js"></script>
<link rel="stylesheet" href="codemirror-5.4/theme/monokai.css">
<script src="codemirror-5.4/mode/htmlmixed.js"></script>

// コードミラー関数**

<script type="text/javascript">
    var areas = document.getElementsByClassName("myTextareaClass");
    for(var i = 0; i < areas.length; i++) {
        CodeMirror.fromTextArea(areas.item(i), {
            mode: "css",
            theme: "monokai",
            readOnly:true,
        });
    }
</script>

これは、同じページで強調したいことです

// CSS モードでコードを強調表示します

<textarea class="myTextareaClass">
    .fa-check {
        color:green;
    }
</textarea>

// HTML モードでコードを強調表示

<textarea class="myTextareaClass">
    <div>Sample Div Element</div>      
</textarea>

// jQueryモードでコードをハイライト

<textarea class="myTextareaClass">
    $( "div" ).css( "border", "2px solid red" ).add( "p" ).css( "background", "green" );
</textarea>

ユーザーが検出するように選択していないため、自動モードまたは自動選択を使用できません。モードが手動である可能性があることに言及する必要があります。同じ関数を使用してこれを達成するにはどうすればよいですか?

4

1 に答える 1

1

私はついに仕事をする解決策を見つけました。ただし、これは今のところ最善の解決策ではありません。これは後で改善できます。

異なる言語のソース コードをハイライトするには、以下のように 3 つの異なるクラスで異なる codemirror インスタンスを作成し、その中に 3 つの異なるテーマ (html、css、javascript) を保持します。

<script type="text/javascript">
    var areas = document.getElementsByClassName("myTextareaHtml");
    for(var i = 0; i < areas.length; i++) {   
      CodeMirror.fromTextArea(areas.item(i), {
        mode: "xml",
        theme: "monokai",
        readOnly:true,

    });

     }
    </script>
    <script type="text/javascript">
    var areas = document.getElementsByClassName("myTextareaCss");
    for(var i = 0; i < areas.length; i++) {   
      CodeMirror.fromTextArea(areas.item(i), {
        mode: "css",
        theme: "monokai",
        readOnly:true,

    });

     }
    </script>
    <script type="text/javascript">
    var areas = document.getElementsByClassName("myTextareaJavaScript");
    for(var i = 0; i < areas.length; i++) {   
      CodeMirror.fromTextArea(areas.item(i), {
        mode: "javascript",
        theme: "monokai",
        readOnly:true,

    });

     }
    </script>

次に、クラスを個別に使用して、以下のようなさまざまな構文を強調表示します。

    // hight light the code in css mode

<textarea class="myTextareaCss">
     .fa-check{
            color:green;
         }
    </textarea>

// hight light the code in HTML mode

<textarea class="myTextareaHtml">
  <div>Sample Div Element</div>

</textarea>

// hight light the code in jQuery mode

<textarea class="myTextareaJavaScript">
  $( "div" ).css( "border", "2px solid red" ).add( "p" ).css( "background", "green" );
</textarea>
于 2015-07-25T09:22:05.023 に答える