如何在 html 页面上使用 codemirror 突出显示源代码
How to hightlight source code using codemirror on a html page
我目前正在使用 google 的 prettyprint 在我的网站上突出显示来源,如下所示。
<pre class="prettyprint css">
div {
background-color: lightgreen;
width: 300px;
padding: 25px;
border: 25px solid red;
margin: 25px;
}
</pre>
我已经将一些代码存档,但我只想突出显示该代码。
如何使用 codemirror 突出显示相同内容?
如图所示codemirror.net
创建一个 <textarea>
元素,它将替换您当前的 <pre>
标签。如果您不想编辑,请将 textarea 设置为 readonly
。
<textarea id="myTextarea" readonly>
... your code for highlighting goes here ...
</textarea>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("myTextarea"), {
lineNumbers: true
});
</script>
由一个共同的 class 名称选择的多个实例:
var areas = document.getElementsByClassName("myTextareaClass");
for(var i = 0; i < areas.length; i++) {
CodeMirror.fromTextArea(areas.item(i), {lineNumbers: true});
}
我目前正在使用 google 的 prettyprint 在我的网站上突出显示来源,如下所示。
<pre class="prettyprint css">
div {
background-color: lightgreen;
width: 300px;
padding: 25px;
border: 25px solid red;
margin: 25px;
}
</pre>
我已经将一些代码存档,但我只想突出显示该代码。 如何使用 codemirror 突出显示相同内容?
如图所示codemirror.net
创建一个 <textarea>
元素,它将替换您当前的 <pre>
标签。如果您不想编辑,请将 textarea 设置为 readonly
。
<textarea id="myTextarea" readonly>
... your code for highlighting goes here ...
</textarea>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("myTextarea"), {
lineNumbers: true
});
</script>
由一个共同的 class 名称选择的多个实例:
var areas = document.getElementsByClassName("myTextareaClass");
for(var i = 0; i < areas.length; i++) {
CodeMirror.fromTextArea(areas.item(i), {lineNumbers: true});
}