什么是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的自定義配置》一文中。