How to highlight multiple language source codes using codemirror on the same page?

Question

I am writing a tutorial page where I need to highlight different source codes which are in different languages(HTML,CSS, Javascript, jQuery)

Currently, it is highlighting one language if I mentioned the mode:"jQuery"

I want to highlight some portion of code as HTML and some portion as CSS and some portion as jQuery etc.. How can I do that?

My current code:

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

// codemirror function**

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

This is what I want to highlight on the same page

// highlight the code in CSS mode

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

// hight light the code in HTML mode

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

// hight light the code in jQuery mode

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

I can not use auto mode or auto selection since it is not selected by the user to detect. I need to mention the mode may be manually. How can I achieve this using the same function?

score 1 · Accepted Answer · answered Jul 25 '15 at 09:22

I finally figured out a solution which does the job. However this is not the best solution for now. This can be improved later.

To highlight different language source codes, create different codemirror instance with three different classes and keep three different themes in it(html, css, javascript) like below.

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

Then use the classes individually to highlight different syntaxes like below.

    // 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>

How to highlight multiple language source codes using codemirror on the same page?

1 Answers1