共计 1137 个字符，预计需要花费 3 分钟才能阅读完成。
highlight.js 是一个用来高亮代码的插件下载地址：https://highlightjs.org/downl… 配色参考：https://highlightjs.org/stati… 使用方法：
<!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’>
<pre><code class=”html”><div> 你好 </div>
</code></pre>
</div>
<script src=”highlight.pack.js”></script>
<script>
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
结果：图片描述
可以看到使用 highlight.js 只需要三步：引入 css、引入 js、调用 initHighlightingOnLoad 函数。
但是，有时候我们不想一出来就编译代码块，例如需要鼠标点击按钮然后在编译等。这时候调用 initHighlightingOnLoad 函数是发现不能够编译。可以自己试一下、onload 中也不能编译。这时候就可以调用 initHighlighting 函数。
<!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’>
<pre><code class=”html”><div> 你好 </div>
</code></pre>
</div>
<script src=”highlight.pack.js”></script>
<script>
window.onload = function () {
hljs.initHighlighting();
}
</script>
</body>
</html>