部落格製作Blogger(建議使用FireFox瀏覽器): 文章顯示程式碼區塊(新)

2013年3月16日星期六

文章顯示程式碼區塊(新)

在設計 / 範本 / 修改HTML，如下圖：

尋找/* Posts的位置，找到後，在後面加入下面CSS程式碼：



.post code { 
display: block; /* fixes a strange ie margin bug */
font-family: Courier New; 
font-size: 10pt; 
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:250px; 
line-height: 1.2em;
}

之後，要加入程式碼則須於程式碼前後加入<code></code>即可！

p.s.程式碼中想顯示的程式碼需將＜改成＆lt;和＞改成＆gt;，沒有修改符號會被視為要執行的指令，指令執行後就無法順利顯示(備註:＆lt;用全形輸入，修改時用半型)。

轉換網頁HTML Encoder

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)