在Blogger中顯示程式碼區塊

Blogger預設並沒有提供code block的功能，所以只要在文章中有程式碼就無法顯示的很漂亮。 因此找了一些文章並參考其作法，將code block用比較美觀的方式呈現。

將Code Block的程式碼加入版面的HTML/Script中

有一些網友的作法是將code block的css及js加入範本的HTML中，但後來比較新的作法是在版面配置中新增小工具來加入HTML/Script，再將要美化版面的css/js加入其中就可以了。這裡我新增一個叫Code Block的HTML/Javascript的小工具。

加入CSS及js

編輯剛才建好的Code Block小工具，將以下這一段加入

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>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>

這樣設定的部份就大功告成了。


顯示程式碼的方式

將程式碼放在下面的區塊中，即可顯示程式碼區塊

<pre><code class="prettyprint">



</code></pre>

參考的網站

• google-code-prettify
• Code Block for Blogger
• 在 Blogger 上用 Google Code Prettify 及 GitHub Gist 顯示程式碼 (不修改範本的懶人招數)