首页 > 部落格語法 > 部落格呈現高亮原始碼
2016
09-17

部落格呈現高亮原始碼

Want create site? Find Free WordPress Themes and plugins.

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

一、用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;
}

二、使用外來服務

有些網站有提供「程式碼內崁」的轉換服務,列出供參考如下:

使用外來的服務雖方便,但萬一哪一日這些網站不經營了,你放在上面的程式就GG了,很痛的!

§建議使用第一種方法是無痛的!
如果您喜歡這篇文章,請幫我們按個讚
 

 
Did you find apk for android? You can find new Free Android Games and apps.
最後编辑:
作者:今晚有風
盡量培養優雅的心境,事事優雅,事事無礙,就讓優雅成為人生的寫照唄!

我有話說