【highlight.js】頁面代碼高亮插件
【highlight.js】
很多博客都支持頁面插入各種語言的代碼，而這些代碼肯定是有高亮設置的。那麽在我們自己的頁面上如何進行代碼高亮設置？有現成的這個highlight.js插件我們可以使用。
highlight.js的官網是【https://highlightjs.org/】可以去上面下載插件。如果習慣用cdn可以百度一下怎麽用cdn的方法來引用相關文件，我這裏就把這個包下載到本地來了。
■ 簡單用法
簡單的用法我們主要用到了highlight/highligh.pack.js這個js文件和highlight/styles/default.css這個CSS文件。另外復習一下基本的HTML知識的話，我們可以知道在一個HTML界面上插入計算機代碼可以用<code>這個標簽。不過這個標簽僅僅是做了一些front和background的顏色上的設置。如果想讓代碼看著像代碼而不是文本的話那麽可以在code外面再套上一層<pre>標簽。
基於這樣一種構想，我們構造出一個簡單的java代碼的高亮顯示：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="highlight/highlight.pack.js"></script> </head> <body> <pre> <code class="java"> public class Test{ public static void main(String args[]){ System.out.println("Hello,World"); } } </code> </pre> <script> hljs.initHighlightingOnLoad(); </script> </body> </html>
得到的效果是：
可以看到，在頁面html中構建完相關的pre和code標簽之後，還要在後面用js進行hljs.initHighlightOnLoad()這個操作才能使樣式生效。另外別忘了pre的定義，pre裏面的code一定要頂著行頭寫才能在顯示的時候不會在前面空出一大截來。
具體代碼塊按照哪種語言的格式進行高亮在code的class中決定。這裏用class="java"來提示這個代碼塊是java代碼，另外還支持html,xml,python,c++等等一眾常見的格式。更多格式也可以到官網上看文檔。
● 動態生成的代碼塊怎麽辦
顧名思義，上面這個initHighlightOnLoad是在頁面進行加載的時候運行才有效，如果是動態地在頁面上加入一些新的代碼塊的話，那就很僵硬了，即便是在每次添加新內容之後馬上執行一下這個函數也未必管用。（經試驗，如果這個函數的作用有點像檢測頁面上所有需要highlight的code，記住他們的class，然後往頁面的CSS中增加相應語言的高亮的CSS固化下來，所以如果頁面之前有java為class的代碼塊然後再添加java代碼塊是可以做到仍然具有高亮，但是添加python為class的代碼塊就會不行了）。
解決的辦法是用其他方法來使得高亮生效。一個常見的辦法是把下面這段代碼加在插入“新代碼塊”的代碼後面：
$(‘pre code‘).each(function(i,block){ hljs.highlightBlock(block); });
each的參數函數中其實可以接受兩個參數，第一個i是遍歷的下標，第二個block則是遍歷到的那個JQuery對象的html代碼（也就是jQuery對象的[0]的值）。
● 其他CSS
默認的代碼高亮CSS有點醜，本來想自己去修改CSS，但是進到styles裏面一看發現裏面全是CSS，隨便選一個都比default.css要好看些。自由選擇即可！
【highlight.js】頁面代碼高亮插件