發表文章

目前顯示的是有「筆記」標籤的文章

在文章中顯示程式碼

為了在文章中顯示好看的程式碼,我曾經尋尋覓覓了好幾種 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...