2008年9月8日

替blog加入美美的code框

Blogger上常常可以看到許多人寫教學時用到一些漂亮的code框將程式語言的區段給標出。剛到Blogger時我還以為是Blogger的特殊功能,後來google了知道那是hack的一種。下面列的是在blogger中添加灰色code框的方法(效果見下範例)

1、把底下這段程式碼複製貼上到 </b:skin>的上面
註:藍色部份,你可以去開通自己的Google Pages,再把那張code_BG.gif圖檔上傳到自己的Google Pages空間裡,比較無後顧之憂。
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;
background: #ccc url(http://sandnfish.googlepages.com/Code_BG.gif) left top repeat-y;
}

2、接下來,只要在HTML編輯模式下,在範例程式碼的前後,用<code>及</code>包起來即可,就像底下這樣。<code>body#layout #main-wrapper {<br>margin-left: 0px;<br>margin-right: 0px;<br>width: 400px;<br>}</code>

3、你再切換到「所見即所得」的編輯模式下(英文:What You See Is What You Get,縮寫:WYSIWYG),就會看到底下的結果:
body#layout #main-wrapper {
margin-left: 0px;
margin-right: 0px;
width: 400px;
}


備註:這裡需要注意的一點是,在html編輯下,某些特殊符號需要做變數替換的工作

* < 用 < 更換
* > 用 >更換
* & 用 &更換

本篇文章引用自:iPlay99-我的線上玩樂誌

張貼留言

您或許對這些文章有興趣:

Related Posts Plugin for WordPress, Blogger...