Blogger : 如何使用程式碼區塊

很多Blogger初學者，第一次使用blogger開心地建好網站，卻發現要貼上程式碼時發現不知道怎麼使用程式碼區塊

下面將介紹如何使用外掛在Blogger裡使用程式碼區塊，我使用的外掛為highlight.js的外掛，網路上還有很多類似的外掛，因為我比較喜歡highlight所以下面使用它來做介紹。

步驟一 : 

進去blogger版面設置

步驟二 : 找到版面設置下面footer-1的地方，點選新增小工具(下面的圖片是我已經新增完了)

選擇 HTML/Java Script

步驟三 : 新增完後，點選編輯，進去可以看到下面圖片的樣子

標題的部分不用輸入任何東西，主要是內容部分要輸入步驟四的程式(圖片裡面我已經輸入好了)

步驟四 : 在內容裡輸入下面程式

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/rainbow.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

PS : rainbow.min.css這裡是讓你輸入想要的樣式的地方，我用的是rainbow樣式，其他樣式可以去highlight.js官網看看。

輸入完上面的程式碼後就可以按儲存，這樣外掛就安裝完成了，接下來就可以使用了。

步驟五 : 安裝完外掛後，新增一篇文章，使用HTML編輯格式，輸入下面框架，

<pre><code class="xml"> 你的程式碼 </code></pre>

像下面這張圖片一樣，中間你的程式碼的部分就是讓你貼上你的程式碼的區塊

重點 : 只是要注意的部分是class="xml"這裡，""裡面是讓你輸入下面要貼上程式碼的code語言，如果要貼上java的程式，那就改成class="java"，其他語言以此類推。

EX : 下面這張圖我寫了個簡單HelloWorld.java的程式

在框架裡輸入完你要顯示的程式碼後，就可以按預覽看看有沒有成功瞜~

成功的話會像下面這樣

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

PS : 如果貼上的程式碼格式會亂掉或者少字，解決方法將在另一篇文章介紹。