搜尋此網誌

Blogger程式碼資料區塊外加邊框

本篇文章參考自：Fun New Run High，並增加一些MH自己試出來的結果

常逛一些寫程式的部落格的人應該都會覺得很好奇，為什麼有些人的程式碼可以外加邊框，如下面的範例：



雖然現在Blogger已經有提供引用的指令，但感覺效果很差，類似每一行開頭都按一次Tab，要達成這樣的效果其實很簡單，在"設計"裡"修改 HTML"選項裡，在"修改範本"的<head> </head>間加上以下程式碼：

quote {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow: auto;
background: #fff5ee url(圖片網址) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 0 0 15px;
}

例如MH我就放在<b:skin><![CDATA[之後

而圖片部分你也可以先試用 skyvee大 的範例圖片(點我下載)，將"圖片網址"四個字替換成真正的圖片網址即可，加了這個功能，以後只要在HTML模式底下加上<quote></quote>，就會產生邊框了，有了這個功能，會不會覺得自己的程式碼看起來有一種高手的感覺呢XD

當然並不是每個人都想要有這種的邊框，只要參照下面MH的範例，你也可以做出屬於你自己的邊框

在font-family裡可以改成你要的字型，比如說MH現在將"Courier New"改成"標楷體"，那麼就會真的變成標楷體，如下圖的範例



font-size: XXpt則可以更改字體大小，用過word的人應該都知道是什麼，XX請填入你想要的字體大小，最小是8px，其他我就不多解釋了...

background就填入HTML的顏色，如上面的範例圖MH都是用"black"，所以背景才是黑色的，HTML顏色請參考HTML顏色網站

而之後的"left top"則是圖片的位置，像是上面範例的CODE圖片的初始位置就是從左上角，當然，你也可以改成從右上、右下之類的

border是用來調邊框的，由左至右分別是"邊框大小"、"邊框樣式"、"邊框顏色"，如下圖即為MH用"border: 10px double yellow;"調出來的



"邊框大小"可自行調整，"邊框樣式"請參考CSS 邊框網站"，邊框顏色"就到上面說的HTML顏色網站參考一下就行了

padding顧名思義就是用來調內框的厚度，由左至右分別是調整"上內框"、"右內框"、"下內框"、"左內框"，其中上面範例的20px是為了要顯示 skyvee大 的CODE範例圖片

max-height為最大高度(長度)，超過高度(長度)的程式碼會變成以滾軸視窗顯示，需要寬度限制的話，可自行加入max-width: XXpx，寬度超過的程式碼會自動換行

line-height是行距，最後的margin是邊界的距離，由左至右也是"上"、"右"、"下"、"左"

懂得舉一反三的人應該會知道，其實這只是建立一個類似模組或副程式的概念，也就是說我先把quote的模組寫好，以後輸入<quote></quote>就可以套用了，現在我把quote{改成block{，在根據上面的說明，改成我想要的外框，那麼我就可以拿來當作引用的邊框了

不過要注意的是，若你的部落格有加入SyntaxHighlighter程式碼高亮功能的話，就不能將邊框代碼改成code{...}，否則會干擾SyntaxHighlighter顯示功能

以上就是關於程式碼資料區塊外加框的解說，如有其他方式或指教之處，歡迎在下面討論
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)