什么是SyntaxHighlighter

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

本blog使用的版本

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

如何安裝

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

3.根據(jù)你的需要加入代碼區(qū)域，SyntaxHighlighter 現(xiàn)可以對(duì)23種編程語(yǔ)言的代碼進(jìn)行格式化，接下來(lái)我們以Javascript語(yǔ)言為例，為什么要選擇js作為演示呢，因?yàn)椴襟E2中我們外鏈了shBrushJScript.js，它是一個(gè)專門為js代碼做格式化的文件；
4.在<pre class=”brush:js;”></pre>或者<script type="syntaxhighlighter" class="brush: js"></script>（建議不要使用script標(biāo)簽，因?yàn)檫@樣常用的標(biāo)簽很容易造成沖突）標(biāo)簽中創(chuàng)建代碼；
注意：brush:js;表示這個(gè)代碼區(qū)域內(nèi)部是js代碼，這是必須指明的，否則渲染器無(wú)法工作。
5.在頁(yè)面加載完成時(shí)執(zhí)行一句js代碼SyntaxHighlighter.all()，大功告成，你將看到跟本文代碼區(qū)域相似的效果。

?

安裝的本質(zhì)其實(shí)為頁(yè)面增加了下面這幾行代碼(可以放在head內(nèi)，但建議放在body的最后面減輕對(duì)頁(yè)面加載造成的影響)：

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

如何更改css主題

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

務(wù)必確保其中href指示的相對(duì)路徑中CSS文件存在，查看更多主題 點(diǎn)擊這里

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