在Blogger插入加顏色的程式碼

頁面載入加速
已經將CSS樣式加到修改範本中，並將圖片上傳至Blogger空間。不知道怎麼加入含有正規表示法的javascript至修改範本中。退而求其次，如果能找到一個連線速度不錯的網路空間，也許可以加快頁面載入的速度。


步驟
下載syntaxhighlighter.zip，解壓縮後的檔案結構如下：
--scripts
----clipboard.swf
----shBrushAS3.js
----shBrushBash.js   (bash,shell)
----shBrushColdFusion.js
----shBrushCpp.js    (cpp,c)
----shBrushCSharp.js   ('c#', 'c-sharp', 'csharp')
----shBrushCss.js   ('css')
----shBrushDelphi.js    ('delphi', 'pascal', 'pas')
----shBrushDiff.js     ('diff', 'patch')
----shBrushErlang.js
----shBrushGroovy.js  ('groovy')
----shBrushJava.js       (java)
----shBrushJavaFX.js
----shBrushJScript.js   ('js', 'jscript', 'javascript')
----shBrushPerl.js
----shBrushPhp.js       (php)
----shBrushPlain.js      ('text', 'plain')
----shBrushPowerShell.js
----shBrushPython.js  (py,python)
----shBrushRuby.js     ('ruby', 'rails', 'ror', 'rb')
----shBrushScala.js    ('scala')
----shBrushSql.js       ('sql')
----shBrushVb.js       ('vb', 'vbnet')
----shBrushXml.js      ('xml', 'xhtml', 'xslt', 'html')
----shCore.js
----shLegacy.js
--src
----shCore.js
----shLegacy.js
--styles
----help.png
----magnifier.png
----page_white_code.png
----page_white_copy.png
----printer.png
----shCore.css
----shThemeDefault.css
----shThemeDjango.css
----shThemeEclipse.css
----shThemeEmacs.css
----shThemeFadeToGrey.css
----shThemeMidnight.css
----shThemeRDark.css
接下來我們需要做兩件事：

1. 將所有檔案上傳至網路空間。
2. Blogger->版面配置->修改HTML中，在head標籤之間加入下面這幾行

檔案上傳至網路空間 - code.google.com(不建議使用，因為連線速度慢，會拖慢頁面載入速度)
上傳檔案至http://code.google.com/空間，選擇google code空間遇到幾個問題：

• 檔案需要一個一個傳，無法一次上傳所有的檔案。
• 寫了一個測試的html檔案code_google_syntaxhighlighter_local_test.html，在本機測試沒問題，不過在Blogger->版面配置->修改HTML中加入程式碼後，會出現圖 preview_code_google_with_blogger.png的情況。

    圖preview_code_google_with_blogger.png

檔案上傳至網路空間 - docs.google.com

上傳檔案至http://docs.google.com/空間，首先你需要一個google帳號，如果你沒有你可以申請一個，它是免費的。以下說說它的優點：

• 可以建立資料夾。
• 可以一次上傳多個檔案。
• 可以分享檔案連結，這正是我們所需要的。

缺點：

• 一次只能選擇一個檔案，製作分享檔案的連結，也就是說如果你有多個檔案要分享，你得一個檔案一個檔案為它們製作檔案連結。
• 上傳時，如果目的資料夾有相同檔案，不會取代該檔案。上傳後，該資料夾就會有兩個同名的檔案。

檔案上傳完畢後，我們為scripts資料夾下面的檔案clipboard.swf, shBrushPython.js, shCore.js與styles資料夾下面的檔案help.png ,magnifier.png ,page_white_code.png ,page_white_copy.png ,printer.png ,shCore.css ,shThemeDefault.css建立分享檔案連結。注意：分享檔案連結並不是直接連結到分享的檔案，而是先連結到一個頁面，該頁面上會有下載檔案的連結，該連結才是要分享的檔案。

點擊所有的分享檔案連結，取得真正的分享檔案位置。把它們都複製到一個文字檔案。

Blogger->版面配置->修改HTML中，修改head標籤之間的內容

先在本機端做測試，寫一個測試的html檔案docs_google_syntaxhighlighter_local_test.html，測試沒問題。這裡須注意：

• 如果你在儲存Blogger範本的時候出現錯誤，"The reference to entity XX must end with the ';' delimiter"而無法儲存範本(圖error_message.png)，你只需將"&"字元以"&"字串取代。參考。
• 如果工具列的圖無法出來(圖syntaxhighlighter工具列)，你可以修改shCore.css檔案，將url('printer.png') , url('help.png'), url('magnifier.png') ,url('page_with_copy.png')，改為實際的分享檔案連結。參考。

    圖error_message.png

圖syntaxhighlighter工具列

在文章中加入有顏色的程式碼
使用方法如下，這有點麻煩需要在修改HTML的模式下才能做編輯。

import sys

---

參考海芋小站
syntaxhighlighter2.1.zip修改版