highlight.js使你的代碼高亮

官網：https://highlightjs.org/

1.使用

其實官網已經有說明，這里簡單說明下，調用方式：

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

默認高亮<pre><code></code></pre>塊包裹的代碼，initHighlightingOnLoad是在頁面加載時執行。

2. 定制

$(document).ready(function() {
  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});

自定義高亮<pre><code></code></pre>塊包裹的代碼。

但是我的博客園中代碼查看了沒有code標簽，所有定制的時候是這樣：

$(document).ready(function() {
  $('pre').each(function(i, e) {hljs.highlightBlock(e)});
});

3. 自動高亮代碼

hljs.highlightAuto(code).value;

code為代碼字符串，不能包含 html 代碼，執行返回值為高亮 html 代碼。

4. 手動高亮

hljs.initHighlighting.called = false;
hljs.initHighlighting();

如果我們不想頁面加載后代碼高亮，而是 ajax 讀取 html 代碼后，對此進行高亮，需要執行上面的代碼。

參考地址：

輕量級代碼語法高亮插件Highlight.js：http://www.mojidong.com/html/css/js/2013/04/03/code-highlight/

如何自定義博客園代碼高亮主題，同時分享自己使用的黑色主題：http://www.cnblogs.com/liuxianan/p/custom-cnblogs-highlight-theme.html