javascript - 如何在 html 页面上使用 codemirror 突出显示源代码

Question

我目前正在使用 Google 的 beautifulprint 在我的网站上突出显示源代码，如下所示。

<pre class="prettyprint css">
  div {
    background-color: lightgreen;
    width: 300px;
    padding: 25px;
    border: 25px solid red;
    margin: 25px;
}
</pre>

我已经存档了一些代码，但我只想突出显示该代码。如何使用 codemirror 突出显示相同内容？

Answer 1

如 codemirror.net 所示

创建一个 <textarea>元素，它将替换您当前的 <pre>标签。将文本区域设置为 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>

通过公共(public)类名选择多个实例:

var areas = document.getElementsByClassName("myTextareaClass");
for(var i = 0; i < areas.length; i++) {   
  CodeMirror.fromTextArea(areas.item(i), {lineNumbers: true});
}