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>
发表回复