2008年6月8日 星期日

Blog中引用程式碼的方法

有時候在Blog中會寫一些程式的心得或是設定檔的配置
如果文章中可以配合一些文字方塊的運用
會讓讀者更清楚理解文章的內容
所以適當的運用引用程式碼是必需的

其實可以參考的文章相當的多,已經有太多人寫過類似的教學,如以下網址所示:
http://synnwang.blogspot.com/2006/11/blog.html
http://klcintw4.blogspot.com/2006/11/blog-post_03.html
http://grandsights.blogspot.com/2007/04/blogger.html

參考了大家之後,我在自己的範本中加入了

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://polin2005.googlepages.com/BG_CODE.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}

CMD {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
color: #ccc;
background: #000 url(http://polin2005.googlepages.com/BG_CMD.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}


之後只要在程式碼的前後加上

<code>程式碼</code>

就可以看到程式引用的方塊了

沒有留言:

Related Posts Plugin for WordPress, Blogger...