2016年6月4日 星期六

在Blogger上顯示Code碼區塊

為了讓自己的Blogger可以顯示程式碼以方便閱讀及複製,可以在範本中增加CSS的樣式
操左步驟如下
「範本」→「自訂」→「進階」→「新增CSS」→貼上CODE碼→套用至網誌



以下就是要貼上的內容
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; }


再來剩下最後一哩路,那就是怎麼使用了,其實也很簡單,凡是遇到要輸入程式碼的時候
,請切換到HTML模式下,在頭尾的地方分別加上<CODE>及</CODE>,把程式碼包起來即可。


顯示結果如下
參考網頁:

沒有留言:

張貼留言