部落格呈現高亮原始碼

1 Star2 Stars3 Stars4 Stars5 Stars (本文對您有幫助嗎?)
Loading...

若寫部落格時想要把「語法或程式碼原碼」用高亮的方式呈現在部落格讀者頁面上,這樣不讓這些程式語法與一般的文章文字混在一起,才會顯得易讀明白,一般常用的方式有二種:

一、用CSS搭配<code>標籤

可以使用<code>這標籤來包住程式碼,並且可以對<code>這標籤做一點CSS語法設定,這邊提供網路上很多部落客常用的CSS語法,

有2種語法,您可自行選擇:

語法1:

code {
display: block; font-family:
Courier New;
font-size: 11pt;
overflow: auto;
background: #f0f0f0 url(http://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(http://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是最方便的。

如果您喜歡這篇文章,請幫我們按個讚!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *