highlight.js是一个用来高亮代码的插件
下载地址：https://highlightjs.org/downl...
配色参考：https://highlightjs.org/stati...
使用方法：
<link rel="stylesheet" type="text/css" href="a11y-light.css">
<pre><code class="html"><div>你好</div>
</code></pre>
<script src="highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>结果：
可以看到使用highlight.js只需要三步：引入css、引入js、调用initHighlightingOnLoad函数。
有时候我们不想一出来就编译代码块，例如需要鼠标点击按钮然后在编译等。这时候调用initHighlightingOnLoad函数是发现不能够编译。可以自己试一下、onload中也不能编译。
这时候就可以调用initHighlighting函数。
<script src="highlight.pack.js"></script>
<script>
window.onload = function () {
hljs.initHighlighting();
}
</script>但是，发现highlight只编译一次，如，想第一一次按钮编译一次，结果只有第一次编译了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<link rel="stylesheet" type="text/css" href="a11y-light.css">
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 50px auto;
width: 400px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class='box'>
<button id="changeBtn">改变</button>
<div id="preBox"></div>
</div>
<script src="highlight.pack.js"></script>
<script>
// hljs.initHighlightingOnLoad();
window.onload = function () {
var oPreBox = document.getElementById('preBox');
var oChangeBtn = document.getElementById('changeBtn');
var idx = 0;
var aPre = [
`<pre><code class="html"><div>你好</div></code></pre>`,
`<pre><code class="html"><div>大家好</div></code></pre>`
]
changePre();
oChangeBtn.onclick = function () {
changePre();
}
function changePre () {
if ( idx >= aPre.length ) {
idx = 0;
}
oPreBox.innerHTML = aPre[idx];
hljs.initHighlighting();
idx++;
}
}
</script>
</body>
</html>解决方法：源码中initHighlighting调用的是v函数，该函数使用v.called记录是否第一次编译，之后将v.called设置为了true，只要将'v.called = !0;'注释掉，就可以了。
在点击按钮，之后就可以每一次都执行编译了。