如何在同一页面上使用代码镜像突出显示多种语言源代码
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>
//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>
这是我想在同一页上突出显示的内容
//显示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>
相关文章:
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- Markdown模式代码镜像正在创建
- 更改代码镜像中TextArea的高度和宽度
- IE中的CSS翻转动画:翻转的一面显示镜像内容
- 什么CSS/JS技巧驱动镜像反转http://com.google愚人节页面
- jquery使2组单选按钮相互镜像
- Nodejs使用httpdispatcher提供静态镜像
- HTML5相机缓冲和延迟(延迟镜像)
- jQuery插件在本地主机上运行良好,但在web服务器上却与bg镜像混淆
- 镜像滚动效果打开.在两个容器之间单击
- 代码镜像批量更改
- 如何在代码镜像编辑器中设置隐藏值
- Selenium-使用换行符将文件写入代码镜像
- 如何根据子字符串位置在代码镜像中突出显示子字符串
- 如何在使用代码镜像单击按钮时撤消选定/突出显示的文本
- 从文本区域获取选定/高亮显示的文本,代码镜像不起作用
- 代码镜像显示HTMLLint错误内联(. addlinewidget)
- 在使用代码镜像时显示警报中的文本区域内容
- 如何在同一页面上使用代码镜像突出显示多种语言源代码
- 如何在代码镜像中显示行数