[教學] 如何在網頁blogger中插入程式碼

有時候，我們會想在文章中插入語法，讓其他人可以比較清楚的瞭解，過去我常常是透過截圖的方式，但這麼做的缺點是，對方並不能直接複製貼上，那麼我們要怎麼在文章中插入語法呢？

像這樣：<pre class="codeblock prettyprint">
</pre>

首先在版面配置區插入HTML/JavaScript小工具的方式

STEP 1：

STEP 2：

STEP 3：

STEP 4：接著在HTML/JavaScript中貼入以下語法

在小工具中貼入以下程式碼

<style>
.post .codeblock {
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>

如圖所示

STEP 5：
接著只要把想要放在code裡面的語法用，開頭用：

<pre class="codeblock ">

結尾用這個:

</pre>

像是這樣

<pre class="codeblock">
中間可以插入你想放入的程式碼
</pre>

這樣就可以了

STEP 6：當程式碼中包含「<>」時，需轉碼
如果程式碼中包含方角時，需要先把原本的程式碼轉碼，透過這個網站即可以輕易完成。

---

補充：自動將程式碼上色

我們除了可以用上方的色盤將自己的程式碼套色外，
像這樣

結果會像這樣

<pre class="codeblock ">

我們也可以另外安裝一段JavaScript讓他自己幫我們上色，
安裝的方法很簡單，一樣透過最上面所說的方法新增「HTML/JavaScript」，新增下述這段語法：

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

這時候只要在原本的class後面在新增一段prettyprint，程式碼就會自動套色了， 像是這樣：

<pre class="codeblock prettyprint">
中間可以插入你想放入的程式碼
</pre>

大家可以試試看喔！
資料來源：符碼記憶