如何在 Blogger 加入程式段落 Part 3: SyntaxHighLighter (連結至自己的網頁空間)

緣起

由於 前一篇 是採用 SyntaxHighlighter 原作者提供的網頁空間; 如果公司內部不允許連到外部網路, 只能連內部網路, 或特定網站時, 會有自行建置一個網頁空間, 以存放 .css 及 .js 檔案的需求.
以下會先介紹如何在 Google 雲端硬碟建立網頁空間, 以放置 SyntaxHighlighter. 接著再說明如何調整 Blogger 的 Html 範本及自身的頁面.

如何在 Google 雲端硬碟建立網頁空間, 以放置 SyntaxHighLighter

以下在 Google 雲端硬碟建立網頁空間, 係參考自  Google Drive 當成網頁空間; 假設已有 Google 雲端硬碟的狀況下 ...
(1) 由 SyntaxHighLighter Download 下載 3.0.83 的版本. 並解壓縮.

(2) 在雲端硬碟建立資料夾, 並設定其共用屬性.

(3) 將 (1) 的內容, 全部上傳到剛剛建立的資料夾下.

(4) 取得 (2) 資料夾的 Guid, 本例為: 0BzMDxGTCiQSmWGZsWS1wUEpTdDQ
(5) 網頁空間的資源, 可以用以下連結方式表示:
https://googledrive.com/host/<your folder guid>/<resource location>
https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/styles/shCore.css
https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushCSharp.js
(6) 如果上述連結都驗證成功, 那就可以進行下一個步驟

如何調整 Google Blogger 的 Html 範本, 以連結至 Google 雲端硬碟的網頁空間 

如下程式段落

 <!-- added by jasper (SyntaxHighLighter) -->
 <!-- 設定載入 shCore.css 與  shThemeDefault.css -->
    <link href='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/styles/shCore.css' rel='stylesheet' type='text/css'/> 
    <link href='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/> 
    <link href='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
 <!-- 設定需要載入的核心檔案 shCore.js -->
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shCore.js' type='text/javascript'/> 
 <!-- 設定需要載入的程式語言檔案  -->
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushCpp.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushCSharp.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushCss.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushJava.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushJScript.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushPhp.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushPython.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushRuby.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushSql.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushVb.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushXml.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/shBrushPerl.js' type='text/javascript'/> 
 <!-- 設定啟用 highlighter. 註: 3.0.83 的版本沒有 clipboard.swf -->
    <script language='javascript'> 
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = &#39;https://googledrive.com/host/0BzMDxGTCiQSmWGZsWS1wUEpTdDQ/scripts/clipboard.swf&#39;;
    SyntaxHighlighter.all();
    </script> 

如何調整自身網頁

同 前一篇, 以下為一個範例, 及其結果

<pre class="brush: csharp;">
    public void Main()
    {
        Console.WriteLine("Hello World");
    }
</pre>

    public void Main()
    {
        Console.WriteLine("Hello World");
    }

總結

SyntaxHighlighter 的確是個不錯的程式段落呈現工具, 但如果因為某些安全性考量, 不允許連結外部網頁空間時, 可以自行建置一個.

參考文件

• Google Drive 當成網頁空間 
• SyntaxHighLighter 下載 

.