如何在Blogger文章中插入有框的程式碼

一直以來,在發表含有程式碼的文章時,總出現怪怪的問題,花了很多時間終找到解決方法了。以後在程式碼前後加上<code></code>,還會得到美美的框框。如果代碼要不被運行,必須把<>替換成&lt; &gt;

發文章時,只要到「HTML Encoder」將你的程式碼貼上,按下〔Encode〕按鈕,就可以在下方看到已經將你的「<」和「>」都轉好了,複製起來就可以用了。

當然在這之前,我們要修改一下Blogger CSS了。接下來在你的Blogger後台選擇〔版面配置〕→〔修改HTML〕,在]]></b:skin>之前插入這一段CSS程式碼:


code {
display: block;
font-family: 'Courier New';
font-size: 9pt;
overflow: auto;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height: 1200px;
line-height: 1.2em;
letter-spacing: 0px;
color: #000;
white-space: pre;
background: #ccc url(http://dino9021.myweb.hinet.net/BlogJS/Code_BG.gif) left top repeat-y;
}


以後發報code時,只要前後加上<code></code>,就可以像WordPress一樣的快樂貼程式碼了。

0 意見:

張貼留言