代碼高亮美化插件-----SyntaxHighlighter

IT類文章博客，代碼高亮美化插件-----SyntaxHighlighter

 

最近在作一個相似我的博客的網站，由於文章中會用到各類代碼，主要是Javascript，CSS，PHP，XML等。這些代碼若是單純的用html&css來處理，稍顯繁瑣。
因而，在網上搜索了一些關於文章中代碼如何美化高亮的信息，找到有關於SyntaxHighlighter和Google-Code-Prettify的資料。
鑑於SyntaxHighlighter已是一個相對比較成熟穩定的老牌語法高亮插件了，並且還支持複製、在新窗口查看源代碼等較多的可選功能。因此就重點下載了SyntaxHighlighter來做爲網站的代碼高亮插件，版本是最新的3.0.83。至於Google-Code-Prettify，就再也不贅述。

 

1、去官網下載SyntaxHighlighter：

SyntaxHighlighter的官網：http://alexgorbatchev.com/SyntaxHighlighter/
SyntaxHighlighter的下載地址：http://alexgorbatchev.com/SyntaxHighlighter/download/

 

2、使用SyntaxHighlighter：

下載完成後，解壓壓縮文件，獲得文件目錄以下：

 

　　假設網頁文件demo.htm存放在一個目錄,複製上圖其中的Scripts文件夾和styles文件夾，確保和demo.htm在同一個目錄下面。
一、在頁面中引入shCore.js核心文件。
二、頁面中引入須要代碼着色對應語言的筆刷腳本文件(brush.js)。
注：-----插件index.html模型中用的是shBrushJScript.js。
三、頁面中引入代碼着色主題色樣式文件。
注：-----插件index.html模型中用的是shCoreDefault.css。
四、在head部分調用SyntaxHighlighter.all();開始解析<pre />。
五、在body中編寫代碼，代碼包裹在<pre class="brush: js;">……</pre>中。
注：-----這裏的brush: **;是固定寫法，後面的js是和上面的筆刷腳本文件相對應的。也就是說，若是上面引用的筆刷腳本文件是shBrushCss.js，那麼這裏能夠用brush: css;來高亮css代碼。
沿用下載文件中的index.html例子：

function helloSyntaxHighlighter()
{
    return "hi!";
}

　　

3、我的使用方法：

由於本人網站主要涉及的代碼無外乎Javascript，php，css，xml等幾種，因此筆者就直接將shCore.js文件和對應的那幾種筆刷腳本文件合併到一個文件中，命名爲shBrushPlug.js，並壓縮處理爲shBrushPlug.min.js。
統一引入到head中。這樣就免去了逐一引入筆刷腳本文件的繁瑣，也減小了http請求次數。後期若是須要增減筆刷文件，修改shBrushPlug.js便可。

 

4、注意事項：

一、無論是使用SyntaxHighlighter，仍是使用Google-Code-Prettify，源代碼中的"<"和">"都應該替換成"&lt;"和"&gt;"，不然可能沒法正確進行語法高亮修飾。
二、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;
}