備份一下 自己加的 css

code

code {
  padding: 2px 4px;
  color: #d14;
}

pre

pre {
  font-family: monospace;
  padding: 6px;
  margin: 0;
  font-size: 12.025px;
  line-height: 18px;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

blockquote

blockquote {
  color:#222;
  background-color: #FFD5A0;
  padding: .3em .5em;
  border: 2px #E2C8AF dashed;
}

reference

reference {
  display: block; /* fixes a strange ie margin bug */
  background: #FEE url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
  border: 1px dotted #933;
  padding: 10px 10px 10px 20px;
  margin: 5px 0 0 5px;
  font-size: 13px;
  font: Courier New;
  line-height: 1.6em;
}

[BH] terminal 跟 subtitle 的 CSS style

弄了兩個 css style 分別是給 terminal 跟 subtitle
區別一下，不要都用 blockquote...

pre.termCommand {
font-family: monospace;
color: #DD2;
background: #222;
padding: 0.3em 0.5em;
margin: 0.2em 0.5em;
border: 1px solid silver;
}

h3.sub-title {
color: $(post.title.text.color);
margin:0.5em 0 0 0;
line-height: 1.2;
border-bottom: 2px solid silver;
}

[BH] blockquote tag 跟 reference 的 CSS style

設計一下 blockquote 看起來更醒目

blockquote {
color:#222;
background-color: #FFEBCD;
padding: .3em .5em;
border: 2px #DB9 dashed;
}


reference {
display: block; /* fixes a strange ie margin bug */
background: #FEE url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dotted #933;
padding: 10px 10px 10px 20px;
margin: 5px 0 0 5px;
font-size: 13px;
font: Courier New;
line-height: 1.6em;
}


參考網路上他人的設計
之後再做調整！

似乎可以用 blogger 裡的變數去設定CSS

[CSS] A Cool blockquote for "Code style" and some blogging tips

[BH] 在文章建立程式碼區塊 (2010/12/15 Update!)

在blogger的css裡加上：

code  { 
display: block;
font-family: Courier New; 
overflow:auto; 
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
}

在<code></code>區塊裡寫入程式碼就可以顯示出一個程式碼區了