4

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

目前，如果我提到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

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>
于 2015-07-25T09:22:05.023 回答