在Blogger分享程式碼區塊(code block)

在上一篇的文章之中有貼上一些程式碼
但是只能貼上圖片....看起來很奇怪也不方便使用
同時也看到別人網誌上的程式碼都可以放得很漂亮
所以就來研究一下怎麼在Blogger 上加入程式碼區塊(code block)

首先登入Blogger
到管理者的頁面

範本 --> 自訂

選擇進階 -->新增 CSS --> 在右邊空白處填入下列的程式碼   --> 套用置網誌

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}

這樣算是設定完成了

在寫文章的過程中，遇到要插入程式碼區段的時候
要切換到 HTML 模式
再加入之前要用 HTML Eecode
將特殊字元轉換成HTML的格式
在程式碼的前後加上<code>程式碼</code>標籤

CODE { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; line-height: 1.2em; }
就會出現文字區塊了
但是好像不能排版換行
找了一些文章之後發現....
有個簡單的方式就可以做到程式碼區塊了......(寫到一半才發現)

其實是可以不用作上面圖片中去修改 CSS
只要連到這個網站  http://formatmysourcecode.blogspot.com/
將你的程式碼貼上去，他就會轉出HTML的語法
以及呈現的效果

 接著將轉出來的內容直接貼到 Blogger 的 HTML模式底下就可以了

切回去選寫模式就會長這樣

第二個方法真的是相當的方便
為了留下學習的紀錄還是將第一個方法(修改 CSS)記錄下來

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}