Code Block for Blogger
我使用Markdonw語法打部落格文章，先轉換成Html之後，在貼到Blogger去，但是闡述程式碼的Code Block的區塊，產生出來的HTML是
<pre><code> ... </pre></code>
這些HTML貼到Blooger去，因為沒有CSS樣式裝飾，所以只有簡單的換行縮排，看起來有點像引言。
這邊我們可以自己加上CSS Style上去，讓他看起來漂亮點。首先Markdown轉出來的code block有兩種形式，一種是嵌入式的，譬如-> int i=0; <- 直接嵌入在行內，另一種是整個程式碼區塊，譬如:
int i=0; /* 程式碼自己佔一個區塊 */
嵌入式的程式碼區塊產生的HTML會是`int i=0;
整個程式碼區塊產生的HTML會是`
int i=0;差在<pre>tag的有無，所以我們只要分別加上這兩個CSS Style給blooger的範本，就行了。可以自己寫，不過我直接在網路上找別人做好的:
<style>
code {
background-color: #F9F9F9;
border: 1px dashed #2F6FAB;
color: black;
/* line-height: 1.1em;
padding: 1em;*/
}
pre code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:1000px;
line-height: 1.2em;
}
</style>
把上面一串貼到你的Blogger範本去，進入編輯HTML，放在<head>裡面就行了。
這個CSS將兩個HTML tag <code> 與 <pre><code> 加上了一些裝飾。
如果在網路上找相關的CSS style樣式表，大部份別人的CSS style樣式表是內容大約是這樣
.post .codeblock { ... }
事實上這樣比較正確，在指定的程式碼區塊Tag加上class=codeblock，才會套用此CSS樣式。此法可以將Markdown產生的程式碼區塊，與非Markdown產生的<code></code>鬆綁。
但我懶得Markdown轉換後還要一個一個加上class name，而且我貼到Blogger去的文章一定都是我用Markdown打的，所以就直接CSS指定<code>與<pre><code>區塊都套用CSS。
