如何在同一页面使用codemirror高亮多语言源代码?
How to highlight multiple language source codes using codemirror on the same page?
我正在编写一个教程页面,我需要在其中突出显示使用不同语言的不同源代码(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>
我无法使用自动模式或自动选择,因为它不是由用户选择来检测的。我需要提到的模式可能是手动的。
我如何使用相同的功能实现此目的?
我终于想出了一个解决方案。然而,这不是目前最好的解决方案。这个以后可以改进。
为了突出显示不同的语言源代码,用三个不同的类创建不同的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>
我正在编写一个教程页面,我需要在其中突出显示使用不同语言的不同源代码(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>
我无法使用自动模式或自动选择,因为它不是由用户选择来检测的。我需要提到的模式可能是手动的。 我如何使用相同的功能实现此目的?
我终于想出了一个解决方案。然而,这不是目前最好的解决方案。这个以后可以改进。
为了突出显示不同的语言源代码,用三个不同的类创建不同的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>