用SyntaxHighlighter格式化代碼
什么是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
>
|
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
>
|
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"
>
|
3.083版本的toolbar貌似被開發者弱化了,這里沒有CopyToClip按鈕,如果我們要復制一段代碼,雙擊這塊代碼區域即可。至此,如果只是想圖方便用一下SyntaxHighlighter讓你的技術博文看起來更賞心悅目一些,對SyntaxHighlighter的功能特性和實現沒有太大的興趣,那么進行這里到這里就可以了,更多的分析和高級特性研究將會放到《SyntaxHighlighter的自定義配置》一文中。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
