Blog及Google Blogger使用SyntaxHighlighter(高亮度語法)的方法

  如果你要在網路上寫些技術性的文章,那文章內容上會有Code這種東西的話,是否會希望Code的地方會有個突出的顯示,或是可以如程式開發工具一樣,會自動帶語法特性,例如行號、關鍵字是什麼顏色,在工具中這些功能稱「高亮度語法」也就是讓我們的Code不只有記事本裡的黑與白,而是能依字、句來分類給予不同的顏色,讓我們「人」可以清楚分出Code裡的東西。 網路上就有這種好東西,我今天也為Blog加上了這個特效,做個學習文件。

  SyntaxHighlighter是個LGPL 3發行的原始碼專案,網站:http://alexgorbatchev.com/wiki/SyntaxHighlighter ,基本上你要為網站加上這些功能很簡單,你只要下載檔案回來,然後include進你所要使用的網頁中即可,然後在Code的前後加上一個HTML tag:


<pre class="brush: js">
  //這裡放你要顯示高亮度的Code
</pre>

,但因為我們是要在Blog上使用,所以還要一點小小技巧。

在Blog及Google Blogger使用SyntaxHighlighter的方法,以Google Blogger為例:

一、先到http://alexgorbatchev.com/pub/sh/底下然找你所要使用的版本,其中有styles與scripts兩個目錄,等一下會用到。

二、開啟Blogger管理後台-->版本配置-->修改HTML-->修改範本-->找到</head>-->貼上程式碼:


//步驟請參考:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage
//在href的地方使用它們網站提供的服務,在你所要使用版本styles中先引用shCore.css及shThemeDefault.css兩個CSS
//CSS參考:http://alexgorbatchev.com/pub/sh/2.0.296/styles/
<link rel="'stylesheet'" type="'text/css'/" href="'http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css'">
<link rel="'stylesheet'" type="'text/css'/" href="'http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css'">
//然後引用主要的 javascript:shCore.js
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js">
//在src一樣,使用網站所提供的服務,選擇你所要使用的程式語言相關樣式設定的 javascript
//javascript參考:http://alexgorbatchev.com/pub/sh/2.0.296/scripts/
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCss.js" type="text/javascript">
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js" type="text/javascript">
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js" type="text/javascript">
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushVb.js" type="text/javascript">
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js" type="text/javascript">
<script type="'text/javascript'">
SyntaxHighlighter.all();
//SyntaxHighlighter.config.bloggerMode = true;

//這行是特別針對Blogger設定,如果不設定在顯示時會有問題。
SyntaxHighlighter.config.bloggerMode = true;</script>

檔存。

三、然在使你要使用的地方加上一個HTML Tag包起來:
<pre class="brush: js">
  //這裡放你要顯示高亮度的Code
  //重點在class裡的brush後的參數,你可以自由選擇你所想使用的樣式
  //請參考:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
  //我常用的有:js、css、vb、sql、xml
  //如果有使用xml,請注意,一定把"<"換成&lt;,不然會有問題! </pre>


  這就完成一個有專業Code樣式的網頁了。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。