搜尋本站文章

2010-10-07

SyntaxHighlighter 3.0.83 與 Google Blogger


在撰寫網誌時,若是有使用到程式碼,可能多半會遇到將程式碼貼到網誌時,版面是一團混亂,目前筆者是使用 SyntaxHighlighter 這個免費的 Java Script 工具。

這個是在客戶端的瀏覽器上執行,所以只要瀏覽器有支援,應該都可以正確顯示。




關於 SyntaxHighlighter

日期:2010/07/02
截至目前為止 SyntaxHighlighter 最新的版本:3.0.83。

新增加的功能:

Dynamic Brush Loading、No Flash Copy To Clipboard、Code Selection、Block Title、CommonJS、Improved CSS support等。

軟體授權方式:
在 SyntaxHighlighter 2.0 以上的版本,其授權模式採取 Donationware。

建議各位若要使用 SyntaxHighlighter 2.0 以上的版本時,記得要給作者實質上的鼓勵。

請參考以下的說明:
Please donate to keep development active!
GNU Lesser General Public License
GNU較寬鬆公共許可證


關於複製區塊內的程式碼方式,也變得十分簡潔,方法如下:

1. 在程式碼區塊內,滑鼠左鍵連點兩下。

2. 就可以自動全部選取此區塊內的程式碼。

3. 若要複製,請搭配快捷鍵:Ctrl+C。

在 SyntaxHighlighter 3.0.83 版本上,一改 SyntaxHighlighter 2.x 版本上被垢病的flash執行效能、額外的圖示等問題。

請注意:
SyntaxHighlighter 3.0.83 版本與 SyntaxHighlighter 1.5.1 在張貼程式碼所使用的區塊寫法是不同。

這在升級前,請您務必留意。



以下以 Google 的 Blogger 搭配使用 SyntaxHighlighter 為範例:

工作1:修改範本來使用 SyntaxHighlighter

步驟01. 進入「Blogger」,點選「設計」\「修改 HTML」。
步驟02. 在「修改範本」區域,搜尋到標籤 <head> 。


步驟03. 貼上以下的範例程式碼:
<!-- 設定載入 shCore.css 與  shThemeDefault.css -->
<link href="http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shCore.css" rel="stylesheet" type="text/css"/>
<link href="http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shThemeDefault.css" rel="stylesheet" type="text/css"/>

<!-- 設定需要載入的核心檔案 shCore.js -->
<script src="http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shCore.js" type="text/javascript"/>

<!-- 設定需要載入的程式語言檔案  -->
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushCSharp.js' type='text/javascript'/>
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushJScript.js' type='text/javascript'/>
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushSql.js' type='text/javascript'/>
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushVb.js' type='text/javascript'/>
<script src='http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/shBrushXml.js' type='text/javascript'/>

<!-- 設定啟用 highlighter   -->
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true; 
SyntaxHighlighter.all()
</script>

步驟04. 點選「儲存範本」。


提醒您:

1. 請將 http://sites.google.com/site/sharedderrick/syntaxhighlighter3x/ 置換為您所使用的網頁位址。

若不介意的話,或許可以直接引用本站的範例碼來使用,也是可行的方法。


關於可以使用程式語言,請參考以下的資料,增加或是置換所需的檔案名稱(File name):
Bundled Brushes


2. 因為筆者使用的是 Blogger,所以需要設定以下的參數:
SyntaxHighlighter.config.bloggerMode = true;


工作2:張貼程式碼的方式

步驟1. 爾後在編寫網誌,在張貼程式碼時,注意事項如下:

1. 請使用標籤 <pre> ...</pre> 區塊來存放程式碼。
2. 在屬性 class 部分,請填入「brush: 程式語言代碼」,其中「程式語言代碼」是指「Brush aliases」的名稱。



支援的「程式語言代碼」 Bundled Brushes

請範例如下:
 
 您的程式碼請貼此處。 

若您的程式碼,有使用到html ,或許可以使用以下的方式來轉換:
Postable | Making your code friendly




筆者僅使用了部分功能,有興趣,請參考官方網頁的說明。
SyntaxHighlighter What's new



相關準備工作:
1. 利用Google的「協作平台」,建立「檔案櫃」,可以來存放存放網頁、相關檔案等。
Google 協作平台
請參考以下的圖示:




2. 下載 SyntaxHighlighter



參考資料:
SyntaxHighlighter

SyntaxHighlighter 參數 Configuration

在 Google Blogger 中使用 SyntaxHighlighter 1.5.1