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/PRGEMBh3...