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。

研發宅的腦漿

2014年2月5日星期三