Javascript 如何在同一页面上使用codemirror突出显示多个语言源代码？

我正在写一个教程页面，在这里我需要突出显示不同语言的不同源代码（HTML、CSS、Javascript、jQuery）

目前，如果我提到

模式：“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>

var areas=document.getElementsByClassName（“myTextareaClass”）；
对于（变量i=0；i

这就是我想在同一页上强调的内容

//在CSS模式下突出显示代码

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

.fa支票{
颜色：绿色；
}

//在HTML模式下高亮显示代码

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

示例Div元素

//在jQuery模式下高亮显示代码

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

$（“div”）.css（“边框”，“2倍纯红”）。添加（“p”）.css（“背景”，“绿色”）；

我不能使用自动模式或自动选择，因为它不是由用户选择检测。我需要提到的模式可能是手动的。

---

如何使用相同的功能实现这一点？

我终于找到了一个解决方案。然而，这并不是目前最好的解决方案。这可以在以后改进

要突出显示不同的语言源代码，请使用三个不同的类创建不同的codemirror实例，并在其中保留三个不同的主题（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>

var areas=document.getElementsByClassName（“myTextareaHtml”）；
对于（var i=0；i

然后分别使用这些类来突出显示不同的语法，如下所示

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

//在css模式下高亮显示代码
.fa支票{
颜色：绿色；
}
//在HTML模式下高亮显示代码
示例Div元素
//在jQuery模式下高亮显示代码
$（“div”）.css（“边框”，“2倍纯红”）。添加（“p”）.css（“背景”，“绿色”）；