部落格呈現高亮原始碼

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

一、用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是最方便的。

推薦文章
FACY

我是小訣行銷工作室的Facy,這是我第二個網站專寫用來寫文章的,我喜歡寫部落格來記錄「把不會變會」的事,也喜歡教別人寫部落格,更有替人架設部落格網站的服務(就像本站)。
專長是WordPress客製化架站,且凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客網站接案製作架站教學,歡迎找我聊聊。

  • 如果您不用寫程式就能架站有興趣的話,可以加入FB社團一起交流。
  • 如果您需要更系統性的學習WordPress,歡迎參考我的線上課程或報名一對一家教班,或公開班(不定時配合開課單位開課)。
  • 如果您想當部落客且想要自架部落格網站且有自己網址,我也能替您服務或顧問式輔導架站
  • 架設網站請找我,點此看作品
0 0 votes
為本文評分
訂閱
通知
guest
0 Comments
Inline Feedbacks
查看所有評論

電子報

站內搜尋

訂閱本站

小訣行銷工作室

如果需要架站(包含像本站類型部落格網站)、網頁設計教學服務、業配需求,歡迎參考小訣行銷工作室

贊助與鼓勵

您好,

如果我的網路筆記剛好有幫到您,不妨請我喝杯咖啡吧!😊