2020年2月17日 星期一

在 Blogger 裡插入程式碼區塊 code block

在想要寫自己在 Blogger 上的第一篇文章時就碰到了這個問題 ...
於是我馬上 Google 搜尋 "code block for blogger" 很快的就找到了很多的解決方法
因為我的需求很簡單,只要能顯示出程式碼的區塊就好了

所以用了以下 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;
}

只要將這段貼到
主題 => 自訂 => 進階 => 新增CSS => 套用至網誌
這樣就OK了 !
當然你想要改改字型、顏色、大小...之類都可以,看個人喜好

提醒!! : 有可能在多次改版之後找不到 "主題" 這個選項

題外話,我還滿想知道這 code 最早是源自於哪裡的 ? 應該說是由誰寫下的 ?
google 了一下發現,這段 code 似乎只在中文語系圈裡有蹤跡
假如有人知道的話可以留言給我喔 !

沒有留言:

張貼留言