什么是SyntaxHighlighter

事實上在三天前我也不知道SyntaxHighlighter是什么東西，經過這兩天的接觸才發現這是個相當不錯的基于JS的html頁面代碼高亮渲染工具（呃，姑且這么稱呼吧）。為什么用代碼高亮渲染工具？當我們有時候遇到技術問題求助無門的時候往往會想到上Google百度一下，看看網上有沒有現成的代碼供參考，于是搜索框關鍵字一打回車鍵一敲，刷地一下出現天文數字個搜索結果，這時候我們表示淡定，因為知道網上N多東西抄來抄去一大堆重復內容。然后按搜索排名挨個點擊進去，卻看到一個個網頁上幾百行亂糟糟的純文本代碼，過差的可讀性抹煞了閱讀的興趣也降低了閱讀的效率。這時候代碼高亮工具就站出來了，誓為捍衛代碼的整齊和美麗展開局域性保衛工作，于是我們可以發現一些靠譜的blog文往往會事先將里面的明文代碼格式化好打扮得跟IDE里面一個樣子供用戶閱讀，程序員表示這樣很愉快。

本blog使用的版本

網上流傳的代碼高亮渲染工具有很多種，經過比較，最后敲定了用SyntaxHighlighter。搜索了一下發現SyntaxHighlighter 1.5版本目前是使用者較多的版本，于是小心翼翼地下載了文件包跟著教程配置了一下，效果不錯，為了獲得跟高級的特性訪問了一下 官網 ，發現3.083版本都已經出來了，就歡快地用了一下，發現配置比1.5稍簡單，表現層和渲染層模塊的拆分更加合理了。

如何安裝

1.將文件壓縮包拷貝下來，解壓到本機或者你的站點，盡量保證存放的路徑明確；
2.在你的頁面中外鏈js文件shCore.js和shBrushJScript.js,以及相關css文件,也許你會發現style文件夾里包含了十幾個css文件,不用緊張,隨便挑選一個作為外鏈文件(至于為什么這樣做,稍后會說明)；

1
2
3
4
5
6
7
8
< SCRIPT type = text /javascript src = "/scripts/shCore.js" ></ SCRIPT >
< SCRIPT type = text /javascript src = "/scripts/shBrushJScript.js" ></ SCRIPT >
< LINK rel = stylesheet type = text /css href = "/STYLE/shCoreRDark.css" >
?
< SCRIPT type = text /javascript>
??? SyntaxHighlighter.all();
</ SCRIPT >
3.根據你的需要加入代碼區域，SyntaxHighlighter 現可以對23種編程語言的代碼進行格式化，接下來我們以Javascript語言為例，為什么要選擇js作為演示呢，因為步驟2中我們外鏈了shBrushJScript.js，它是一個專門為js代碼做格式化的文件；
4.在<pre class=”brush:js;”></pre>或者<script type="syntaxhighlighter" class="brush: js"></script>（建議不要使用script標簽，因為這樣常用的標簽很容易造成沖突）標簽中創建代碼；
1
2
3
4
5
< PRE class = brush :js;>function helloSyntaxHighlighter()
{
?? return "SyntaxHighlighter 3.0.83 ";
}
</ PRE >
注意：brush:js;表示這個代碼區域內部是js代碼，這是必須指明的，否則渲染器無法工作。
5.在頁面加載完成時執行一句js代碼SyntaxHighlighter.all()，大功告成，你將看到跟本文代碼區域相似的效果。

?

安裝的本質其實為頁面增加了下面這幾行代碼(可以放在head內，但建議放在body的最后面減輕對頁面加載造成的影響)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< SCRIPT type = text /javascript src = "/scripts/shCore.js" ></ SCRIPT >
< SCRIPT type = text /javascript src = "/scripts/shBrushJScript.js" ></ SCRIPT >
< SCRIPT type = text /javascript src = "/scripts/shBrushXml.js" ></ SCRIPT >
< LINK rel = stylesheet type = text /css href = "/STYLE/shCoreRDark.css" >
?
< SCRIPT type = text /javascript>
???? SyntaxHighlighter.config.bloggerMode = true;
??? SyntaxHighlighter.defaults['toolbar'] = false;
? SyntaxHighlighter.all();
</ SCRIPT >
< PRE class = brush :js;>function helloSyntaxHighlighter()
{
?? return "SyntaxHighlighter 3.0.83 ";
}
</ PRE >

若希望SyntaxHighlighter能正常工作，shCore.js是必須的；shCoreRDark.css是格式化主題，可以在style文件夾中選擇你喜歡的一個主題文件并將它外鏈到頁面上；shBrushJScript.js文件的作用是為了讓渲染器能夠對javascript代碼進行格式化，shBrushXml.js的作用是為了讓渲染器能夠對XML代碼進行格式化，剛才說過SyntaxHighlighter支持23種語言，如果你需要渲染器支持其他語言，就必須外鏈其他相應的文件，想了解各語言對應的文件 請點擊這里 。
注意：確保外鏈路徑正確，所有對SyntaxHighlighter的自定義配置都應寫在SyntaxHighlighter.all();之前。

如何更改css主題

SyntaxHighlighter 3.0.83支持更換主題樣式，方法很簡單，直接更換內的鏈接文件路徑就可以了：

1
< LINK rel = Stylesheet type = text /css href = "PATH/Styles/FileName.css" >
務必確保其中href指示的相對路徑中CSS文件存在，查看更多主題 點擊這里

3.083版本的toolbar貌似被開發者弱化了，這里沒有CopyToClip按鈕，如果我們要復制一段代碼，雙擊這塊代碼區域即可。至此，如果只是想圖方便用一下SyntaxHighlighter讓你的技術博文看起來更賞心悅目一些，對SyntaxHighlighter的功能特性和實現沒有太大的興趣，那么進行這里到這里就可以了，更多的分析和高級特性研究將會放到《SyntaxHighlighter的自定義配置》一文中。