2012年3月3日 星期六

blogger嵌入程式碼以SyntaxHighlighter

當撰寫程式碼要分享的時候,如果單純只是貼在blog上,有可能會造成格式亂碼

或是斷行不乾淨的問題,加上增加容易閱讀性,所以在blog中好的程式碼編排是相當重要的。

因此,耗費一個早上來摸一下,加上對css並不是很熟悉,爬了一下文,做了n次實驗後

把相關的經驗分享給大家。

step1
至「SyntaxHighlighter」網頁,它提供一個

可以將程式碼嵌在blog的技術,樣式也相當美觀

step2
至「SyntaxHighlighter hosting」網頁,提供主要是從官方位址上引用程式碼格式,相關css語法都用好了,省去自已上傳至網路空間的步驟。

step3
複製程式碼如下:

















資料來源:http://king971119.blogspot.com/2010/05/syntaxhighlighter-bloggerjavascript.html

step4
開啟google blogger,「設計」>「修改html」


至(/b:template-skin)和(/head)間貼入step3複製的檔案 or(head)和(/head)之間,我本身是用前者,因為放在前比較容易查,若中間隨便放,反而不容易後續維護

step5
若要寫不同格式的程式碼,則要以不同的「檔案格式」下去寫
參考點我

程式碼寫在這


step6

完成

step7
相關資料如下
http://alexgorbatchev.com/SyntaxHighlighter/
http://sharedderrick.blogspot.com/2007/12/blogger-syntaxhighlighter.html
http://king971119.blogspot.com/2010/05/syntaxhighlighter-bloggerjavascript.html