若寫部落格時想要把「語法或程式碼原碼」用高亮的方式呈現在部落格讀者頁面上,這樣不讓這些程式語法與一般的文章文字混在一起,才會顯得易讀明白,一般常用的方式有二種:
一、用CSS搭配<code>標籤
可以使用<code>這標籤來包住程式碼,並且可以對<code>這標籤做一點CSS語法設定,這邊提供網路上很多部落客常用的CSS語法,
有2種語法,您可自行選擇:
語法1:
code {
display: block; font-family:
Courier New;
font-size: 11pt;
overflow: auto;
background: #f0f0f0 url(https://0800happy.com/wp-content/uploads/Code_0800happy.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 10px 10px 21px;
max-height: 200px;
line-height: 1.2em; margin: 5px 5px 0 15px;
}
語法2:
code{
background: #000000 url(https://0800happy.com/wp-content/uploads/Code_0800happy.gif) repeat-y scroll left top;
border: 1px solid #CCCCCC;
color: #00FF00;
display: block;
font-family: Courier New;
font-size: 10pt;
line-height: 1.2em;
max-height: 400px;
overflow: auto;
padding: 10px 0 10px 15px;
}
二、使用外來服務
有些網站有提供「程式碼內崁」的轉換服務,列出供參考如下:
如果沒有很常需要在網頁上貼程式碼的話,採用Hilite是最方便的。