度估記事本: 在文章裡顯示優質的程式碼區

2012年10月15日星期一

在文章裡顯示優質的程式碼區

在CSS內加入


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

之後在文章前後加入< code> </ code> 就能有code區塊，
引用自
http://klcintw4.blogspot.tw/2006/11/blog-post_03.html
另一種

.post pre {
  background: #F0F0F0 url(http://你的圖片網址/blogger-code.gif) repeat-y scroll left top;
  border: 1px solid #CCCCCC;
  color: #333333;
  display: block;
  font-family: Courier New;
  font-size: 10pt;
  line-height: 120%;
  margin: 5px 0 0 20px;
  max-height: 200px;
  overflow: auto;
  padding: 10px 10px 10px 21px;
  width: 90%;
}

這樣子你以後要插入程式碼只要用 <pre> </pre>
包住也能顯示引用自：http://gordon168.tw/?p=200

沒有留言:

張貼留言