想要在你的BLOG 秀出優質的程式碼嗎?
其實只要在CSS 動點手腳,
你也可以在你的BLOG裡面展示工整的程式原始碼 !!
下面的CSS中有使用到一張背景圖是存在Meson的flickr 相本
你可以將圖另存新檔之後存到自己的相本
然後再修改Step1 中藍色字樣部份的URL 網址
將它指向你所存的圖片網址
若是你不介意的話也可以延用我Flickr 上的這張圖
只是哪天我不小心砍掉這張圖
就會影響到你的原始碼展示的美觀了..




Step 1. 在你的BLOG CSS 新增下列程式碼
 CODE { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #FFFFBF url(http://farm4.static.flickr.com/3019/3110651182_23122c57b7_o.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; line-height: 1.2em; }




Step 2. 將你的想要顯示的原始碼內容使用code 標籤包起來
<code> 12345我想要秀出來的內容abcdefg</code>








Step 3. 展示效果
 12345我想要秀出來的內容abcdefg




  轉載請註明本站連結 !
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 MESON 的頭像
    MESON

    【天空下載】

    MESON 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄