2010年2月26日 星期五

[Blog] 在blogger貼漂亮的程式碼

換身為一個宅宅工程師,在BLOG上貼漂亮的程式碼也是合情合理的(推眼鏡)

上網可以搜尋到一缸子的blogger解法
很囧的是不知道為啥很多人貼的解法我都弄不起來
經過多次嘗試失敗
一怒之下直接去看人家的原始網頁
然後就成功貼出程式碼了XD

我是範例程式碼
int main()
{
   printf("hello world");
   return 0;
}
我是範例程式碼

主要步驟記錄一下:
1. Blogger後台選擇〔版面配置〕→〔修改HTML〕→勾選〔展開小裝置範本〕
2. 把以下這段CSS貼到裡面,貼哪裡不知道可以看網頁原始碼
.post pre {
background: #F0F0F0 url(http://klcintw.images.googlepages.com/Code_BG.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%;
}
.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) l\
eft top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
height:200px; // for IE6
line-height: 1.2em;
}

3. 麻煩的大於小於轉換:
HTML ENCODE網站去轉換

4. 在<pre class="code">和</pre>之間插入你的程式碼

不過blogger貼程式碼還是不太friendly阿~_~||

參考文章:
高登工作室
Forgot 同花打不打得過俘虜浩司
SeekING Bernie

沒有留言: