2012年10月5日星期五

替Blogger上張貼的原碼加上CSS樣式

許多系統開發者或工程師也會在blog上分享自己的經驗和技巧,像小弟一樣。
但在Blogger上文章編寫器並沒有專為顯示原碼(source code)而設的樣式,大家也只能夠使用<code>來把原碼包括其中。

但這樣只能做到把原碼以mono風格字體顯示而已,像這樣:


這樣不夠突出和不利閱讀。

現在Blogger可以讓用戶自己修改CSS風格,也可加上自己額外的CSS碼。小弟利用了這個功能,為<code>這個HTML標籤加上CSS風格,以後所有被<code></code>包圍著的原碼都有特別的風格了。像這樣:

要加上自訂CSS的方法,在編輯Blogger版面,先選「範本」。
再在範本頁內的網誌即時狀態,按下「自訂」按鈕。


再在編輯範本的控制上選「進階」,再在其旁邊選最底的「新增CSS」。旁邊就會有一個文字輸入框可以自行加上CSS了。


小弟的CCS如下:

/* Start – Code Snippet */
code {
background: grey;
border: solid black;
border-width: 1px 1px 1px 10px;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
color: white;
display: block;
}
/* End – Code Snippet */


這就會把所有<code>包圍著的原碼都會變成上面一樣,原碼都帶在灰框內,字體是mono的風格了。

閣下也可因應自己的Blogger風格編輯自己的CSS。

沒有留言:

發佈留言