使用 highlight.js 实现语法高亮
2018-04-25 本文已影响0人
静候那一米阳光
highlight.js
需要的文件
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
【示例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre><code>
int main(){
return 1;
}
</code></pre>
<pre><code>
window.onload = function() {
let blocks = document.querySelectorAll("pre code");
for (let i = 0, len = blocks.length; i < len; i++) {
hljs.highlightBlock(blocks[i]);
}
}
</code></pre>
<link rel="stylesheet" href="highlight.min.css">
<script src="highlight.min.js"></script>
<!-- 使用原生 JS 实现 -->
<script>
window.onload = function() {
let blocks = document.querySelectorAll("pre code");
for (let i = 0, len = blocks.length; i < len; i++) {
hljs.highlightBlock(blocks[i]);
}
}
</script>
<!-- 使用 jQuery 实现 -->
<!-- <script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script> -->
</body>
</html>
