用 css 幫 blog 的文章裝扮一下,為了好區分文章的內文和程式碼,最後將寫好的 css 加入 BLOG 的範本裡,以後就很方便用了。
使用方式就是將程式碼用 <code></code>包起來,就用 css 的 code 當內容來顯示成果吧

code {
  display: block;
  font-family: Courier New;
  font-size: 80%;
  color: white;
  background-color: navy;
  padding: 10px 5px 5px 20px;
  white-space: pre;
}

code.cmd {
  background-color: black;
}

又加了一個 cmd 用來顯示命令,unix用太多了,常會有這需求。
使用方式 <code class="cmd">command</code>,顯示如下
command

css 說明:
將 <code> 改成區塊元素(block element),字型設定成 Courier New,字型大小為文章的 80%,字型顏色則是白色,背景改為深藍色(cmd改為黑色),另外給上下左右都增加一些空間,最重要是加上 white-space: pre 將元素內的空白保留。

有點囧,痞客邦居然無視 while-space: pre; 會強制處理空白,真的是 Orz...

mark528 發表在 痞客邦 PIXNET 留言(0) 人氣()