我的 Blogger 程式碼區塊 CSS

網路上已經可以找到很多在 Blogger 上張貼程式碼區塊的方法(例如這個),這裡把我用的 CSS 樣式貼上來,主要是結合 c# code format 的樣式:
<style type='text/css'>
.code { /* 一般程式碼樣式 */
background: #f0f0f0 url(http://hltsai.myweb.hinet.net/images/blogger/bg_code.gif) repeat-y scroll left top;
display: block; /* fixes a strange ie margin bug */
border: 1px solid #CCCCCC;
color: #333333;
font-family: Courier New;
font-size: 10pt;
overflow:auto;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:400px;
line-height: 120%;
}

.csharpcode, .csharpcode pre
{
font-size: small;
font-family: &quot;Courier New&quot;, Courier, Monospace;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

</style>
把上面這段 CSS 貼到部落格範本的 <head> 元素裡面就行了。寫文章時,如果是一般的程式碼,就用 <pre class="code"> 包住,實際的效果就如上面的程式碼區塊。若包含 C# code format 的樣式,則可以用 <pre class="code csharpcode">。步驟是先到 C# code format 網站產生程式碼的 HTML code,然後修改外層的 <pre> 或 <div> 標籤的 class 屬性。以下是結合兩種樣式的範例:

   1:  class Hello
   2:  {
   3:      public void Print(string s)
   4:      {
   5:          Console.WriteLine("Hello!");
   6:      }
   7:  }

要注意的是,在使用 C# code format 時如果有勾選 "line numbers" 核取方塊,產生的 HTML 區塊的最外層是以一個 <div> 包住,而且裡面的每一列程式碼都是 <pre> 區塊,這會造成顯示時每列之間都會多一列空白(可能是因為我的部落格的「轉換分行符號」選項是設定成「Yes」的緣故)。目前我大都是手動逐一刪除每列的換行字元,挺麻煩的。Blogger 的編輯器還是不太好用啊 >_<

另外,如果程式碼裡面包含大於(>)、小於(<)這類標籤字元,可以先利用 HTML Encoder 網頁直接在線上轉換。

喔,還有一個很困擾的問題,是 Blogger 在視覺化編輯和 HTML 編輯模式間切換時,會把文章裡面的空白字元吃掉,而且是每切換一次吃掉一個(如果單單用 HTML 編輯模式就沒有這個問題),導致程式碼縮排的部分經常在反覆修改文章的過程中消失,得自己一個個補回來,實在很麻煩。若有人知道解法,希望能分享一下。
Copyright © 2012. Huan-Lin 學習筆記 - All Rights Reserved
Powered by Blogger
Template Design by Cool Blogger Tutorials
Published by Templates Doctor