2013年4月6日

Hightlight Code In Blogger

為了要讓文章內的程式碼看起來更漂亮
尋找了網路上在 google blogspot 可行的辦法主要分為三種。

1. Syntax Highlight
http://alexgorbatchev.com/SyntaxHighlighter/
2. Prettify
https://code.google.com/p/google-code-prettify/
3. 針對元素code新增css
code{
 display: block; /* fixes a strange ie margin bug */
 font-family: Courier New;
 font-size: 8pt;
 overflow:auto;
 background: #f0f0f0 url(http://dl.dropbox.com/u/18989482/Code_BG.gif) left top repeat-y;
 border: 1px solid #ccc;
 padding: 10px 10px 10px 21px;
 /*  max-height:200px; */
 line-height: 1.2em;
}
第 1 種
blogger提供了動態檢視及圖片視窗等多種的範本使用。
在動態檢視範本無法正常運作。
在圖片視窗範本會有多行導致有scrollbar出現,我不喜歡。

第 2 種
看起來跟第1種方法差不多就不打算試用了。

第 3 種
在動態檢視範本中無法使用。
目前我是選擇圖片視窗範本,然後使用第三種方法來顯示我的程式碼。
會透過手動文字顏色編輯讓程式碼更清楚分辨。
並且使用線上hightlight,http://highlight.hohli.com/
以及轉換html標籤實體,http://www.functions-online.com/htmlentities.html



沒有留言:

張貼留言