在 Blogger 上面增加顯示程式碼的 Code 區域

在 Blogger 增加工具

• 進入「版面配置」，
• 按下「新增小工具」，選擇「HTML/JavaScript」，
• 然後直接在「內容」區塊裡面輸入任何想要的 script, style 標籤即可。

<style>
pre.code {
  display: block;
  font-size: 10pt;
  overflow: auto;
  max-height:1000px;
  padding: 10px 10px 10px 50px;
  border: 1px solid #ccc;
  background: #f8f8ff url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
}

pre.codeline {
  display: block;
  font-size: 10pt;
  overflow: auto;
  padding: 0 10px 0 18px;
  border: 1px solid #ccc;
  background: #f8f8ff url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
}

code.prettyprint {
  line-height: 1.2em;
  margin: 1px;
}

code.inline {
  background: rgb(255, 255, 255);
  font-family: Consolas;
  font-size: 14px;
  border-radius: 0.4em;
  border: 1px solid rgb(221, 221, 221);
  color: #555555;
  display: inline-block;  
  line-height: 1.5em;
  margin: -1px 0px;
  padding: 0px 0.3em;
}

.sheet {
  style=background-color: #fefdfa;
  border-radius: 3px;
  border: 1px solid rgb(204, 204, 204);
  box-shadow: rgba(0, 0, 0, 0.439216) 0px 1px 4px 0px;
  color: #333333;
  font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  font-size: 13px;
  line-height: 18.2px;
  margin: 8px 0px;
  padding: 8px;
}

ul {
  style=line-height: 1.4;
  margin: 0.5em 0px;
  padding: 0px 2.5em;
}

li {
  style="border: none;
  margin: 0px 0px 0.25em;
  padding: 0.25em 0px;
}
</style>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

程式碼顯示測試一：行號顯示

<pre class="codeline"><code class="prettyprint linenums">
  ...打入要顯示的Code...
  ...打入要顯示的Code...
  ...打入要顯示的Code...
</code></pre>

public class HelloWorld {
    public static void main (String[] args) {
        System.out.println("Hello, world!");
        System.out.println("Hello, world!");
        System.out.println("Hello, world!");
    }
}

程式碼顯示測試二：正常顯示(無行號)

<pre class="code"><code class="prettyprint">
  ...打入要顯示的Code...
  ...打入要顯示的Code...
  ...打入要顯示的Code...
</code></pre>

public class HelloWorld {
    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

程式碼顯示測試三：無加框

<pre><code class="prettyprint">
  ...打入要顯示的Code...
  ...打入要顯示的Code...
  ...打入要顯示的Code...
</code></pre>

public class HelloWorld {
    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

程式碼顯示測試四：行內加框

<code class="inline">code class="inline"</code>

頭文字 code class="inline" 尾文字

程式碼顯示測試五

加強 <ul> / <li> 標籤效果

• ...行列效果...
• ...行列效果...
• ...行列效果...

<dir class="sheet">
<ul>
<li>...行列效果...</li>
<li>...行列效果...</li>
<li>...行列效果...</li>
</ul>
</div>

參考文件：
1：在 Blogger 上用 Google Code Prettify 及 GitHub Gist 顯示程式碼 (不修改範本的懶人招數)
2：在網頁中嵌入顯示程式碼：CSS Block
3：程式碼高亮

處理 Html 原始碼標籤
1：Javascript Tools 選 JS Encode,Decode
2：opinionatedgeek