今天想在文章裡加上程式碼
然後再加以說明
記得以前有看過別人的部落格的文章裡面有很漂亮的程式碼框框
有人甚至做到可以按一下鈕就將程式碼複製起來放在剪貼簿
所以我就 Google 了一下「Blogger 文章 程式碼」
發現到這個網站的文章 Blogger 邊學邊做 - 在blogger文章中顯示程式碼區
有這一段
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
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:200px;
line-height: 1.2em;
}
但是我貼到<head>裡面之後發了一篇文章試試，發現字距變太大了
一直調整 line-height 都不能改，於是就跑到 Blogger 的設定裡調整「字型和顏色」
這才發現 Blogger 只有六種字型 >_< 
其中並沒有 Courier New，只有 Courier
因此，我只好把這段CSS 碼的font-family改成 Courier
看的就比較順眼了
再把背景色跟框的顏色調整一下，就很符合我原本部落格的色調了。
但是還有一個問題，那就是總不能一直利用別人的圖檔呀！
本來想要用上傳圖片的方式，再從Picasa 抓出來用
沒想到只把background 的 url 改成從Picasa 抓，會變糊，一點美感都沒有
因此上網 Google 了一下「免費 圖片空間」
在 免費資源網路社群 找到了一個看起來還不錯用的空間叫 mojoImage
整個操作超級方便又快速
打開 mojoImage 首頁 ![Free Image Hosting - Myspace Image Hosting - mojoimage.com [mi]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitttz9pNts_KntZGTy57XmqlXiJGfYGpkkadq5MtHE0E3oA68R_450G4d22aCAHdBVGVA0XvZzZyUVclTnhnYEgRcFJ0qWEy1flcWZrLbRYc77_KULyWdRly8n1szSOXBqaiApbof6_3c/s1600-h/Free%20Image%20Hosting%20-%20Myspace%20Image%20Hosting%20-%20mojoimage.com%20%5Bmi%5D%5B5%5D.jpg "Free Image Hosting - Myspace Image Hosting - mojoimage.com [mi]")
按下「瀏覽…」，選擇電腦裡要上傳的圖片
再按一下「Upload」就出現 
把其中的「Share」的 Code 複製起來，貼到我的 CSS Code 裡
結果就完成啦，範例如下 CODE { 我覺得還不錯看啦 ^^.
display: block; /* fixes a strange ie margin bug */
font-family: Courier;
font-size: 8pt;
overflow:auto;
background: #000000 url(http://www.mojoimage.com/free-image-hosting-00/6087Code_BG.png) left top repeat-y;
border: 1px solid #333333;
padding: 10px 10px 10px 21px;
max-height:200px;
max-width:650px;
line-height: 1.2em;
}
){kind=link}
沒有留言:
張貼留言