在文章中顯示程式碼
為了在文章中顯示好看的程式碼,我曾經尋尋覓覓了好幾種 blog,最後還是回頭來用 Blogspot;雖然它在一般編譯器中並沒有特別的功能可以呈現程式碼的格式,但我們可以用 CSS template 的設定來達成這個功能! 這個方法主要是參考以下幾篇文章: 【Blog】文章中引用程式碼的作法 by 想要旅行的念頭停不住... [筆記]在文章裡顯示優質的程式碼區 by 良人的大秘寶 首先,將以下程式碼複製到你 blog 設定 CSS template 的地方: code { display: block; //表示在code標籤內的內容會被當成一個浮動方塊來顯示 font-family: 'Courier New'; //字型設定 background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y; //設定顯示程式碼的方塊的圖形,並讓圖形是從左上方 (left top) 畫下來,如果遇到程式碼太長,使得方塊也太大時,讓圖形往下重複出現 (repeated-y) overflow: auto; //如果剩下的內容無法顯示,"auto"表示請瀏覽器用捲動軸 (scrollbar) 來顯示其他的內容 border: 1px solid #ccc; //方塊的邊線該畫多寬,以及顏色的設定 padding: 1px 10px 10px 21px; //方塊與顯示內容間的留白大小,四個數字分別設定的是:上方、右邊、下方、左邊 max-height: 1200px; //這個方塊最大的顯示高度,注意有些瀏覽器不支援此屬性 line-height: 1.2em; //設定每一行的行高 letter-spacing: 0px; //字元間距 margin: 5px 5px 0 15px; //方塊以外內容該與方塊之間留的間隙,四個數字分別設定的是:上方、右邊、下方、左邊 } 在你想在文章中顯示為程式碼的段落前後加上<code>、</code>標籤,如: <code> public class Test{ public s...