〈教學〉Blogger 文章如何加入程式碼區塊

怕忘了寫筆記一下

適合給初學者如何使用程式碼區塊

程式碼區塊教學

Step-1 ▼  請把程式碼複製

CODE {
    display: block; /* fixes a strange ie margin bug */
    font-family: Courier New;
    font-size: 8pt;
    overflow:auto;
    background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
    border: 1px solid #ccc;
    padding: 10px 10px 10px 21px;
    max-height:200px;
    line-height: 1.2em;
}

Step-2 ▼  進入blogger主題 > 自訂 > 進階 > 新增CSS > 剛程式碼複製貼上在白框裡 > 套用至網誌

Step-3 ▼ 使用的方法很簡單，點新文章 > 點HTML > 輸入下面框架，只需要寫成如下：

<pre><code class='language-javascript line-numbers'>

填入程式碼

測試

123

</code></pre>
或
<code>填入程式碼<br />
測試<br />

123<br /></code>

填入程式碼
測試
123

這樣就完成了。

若要程式碼上色，請切換到撰寫模式下，字體上色。

填入程式碼
測試
123