IT類文章博客，代碼高亮美化插件-----SyntaxHighlighter
最近在做一個類似個人博客的網站，因為文章中會用到各種代碼，主要是Javascript，CSS，PHP，XML等。這些代碼如果單純的用html&css來處理，稍顯繁瑣。
於是，在網上搜索了一些關於文章中代碼如何美化高亮的信息，找到有關於SyntaxHighlighter和Google-Code-Prettify的資料。
鑒於SyntaxHighlighter已經是一個相對比較成熟穩定的老牌語法高亮插件了，而且還支持復制、在新窗口查看源代碼等較多的可選功能。所以就重點下載了SyntaxHighlighter來作為網站的代碼高亮插件，版本是最新的3.0.83。至於Google-Code-Prettify，就不再贅述。
一、去官網下載SyntaxHighlighter：
SyntaxHighlighter的官網：http://alexgorbatchev.com/SyntaxHighlighter/
SyntaxHighlighter的下載地址：http://alexgorbatchev.com/SyntaxHighlighter/download/
二、使用SyntaxHighlighter：
下載完成后，解壓壓縮文件，得到文件目錄如下：
假設網頁文件demo.htm存放在一個目錄,復制上圖其中的Scripts文件夾和styles文件夾，確保和demo.htm在同一個目錄下面。
1、在頁面中引入shCore.js核心文件。
2、頁面中引入需要代碼着色對應語言的筆刷腳本文件(brush.js)。
注：-----插件index.html模型中用的是shBrushJScript.js。
3、頁面中引入代碼着色主題色樣式文件。
注：-----插件index.html模型中用的是shCoreDefault.css。
4、在head部分調用SyntaxHighlighter.all();開始解析<pre />。
5、在body中編寫代碼，代碼包裹在<pre class="brush: js;">……</pre>中。
注：-----這里的brush: **;是固定寫法，后面的js是和上面的筆刷腳本文件相對應的。也就是說，如果上面引用的筆刷腳本文件是shBrushCss.js，那么這里可以用brush: css;來高亮css代碼。
沿用下載文件中的index.html例子：
function helloSyntaxHighlighter()
{
return "hi!";
}
三、個人使用方法：
因為本人網站主要涉及的代碼無外乎Javascript，php，css，xml等幾種，所以筆者就直接將shCore.js文件和對應的那幾種筆刷腳本文件合並到一個文件中，命名為shBrushPlug.js，並壓縮處理為shBrushPlug.min.js。
統一引入到head中。這樣就免去了逐一引入筆刷腳本文件的繁瑣，也減少了http請求次數。后期如果需要增減筆刷文件，修改shBrushPlug.js即可。
四、注意事項：
1、不管是使用SyntaxHighlighter，還是使用Google-Code-Prettify，源代碼中的"<"和">"都應該替換成"<"和">"，否則可能無法正確進行語法高亮修飾。
2、Syntaxhighlighter在Chrome瀏覽器中會顯示豎向滾動條，讓代碼框看起來很不美觀，修復的方法是定義overflow-y屬性，可以直接修改源文件，也可以在主題樣式表中寫，Sola選擇寫在主題的style.css中：
.*** .syntaxhighlighter {
overflow-y: hidden !important;
}
上面代碼中的***可以用文章中.syntaxhighlighter的任意父元素class來代替。
因為源文件中使用.syntaxhighlighter和!important定義，要覆蓋掉這個CSS，需要主題中的樣式有更高權重。
所以如果你的文章中有一個公用class（eg: .article-content-wrap）並包裹.syntaxhighlighter，用.article-content-wrap提升權重。那么就可以寫成這樣：
.article-content-wrap .syntaxhighlighter {
overflow-y: hidden !important;
}