Blogger 放程式碼

開始寫程式以後，想要在 blogger 中記錄一些筆記，在 google 後，覺得這個方法蠻實用的，於是紀錄一下

我想要有以下的樣式該怎麼做?

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

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

步驟一 :

進去blogger版面設置

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

選擇 HTML/Java Script

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

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

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

<pre><code class="xml">
<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></code></pre>

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!");
    }
}

Pages

KAIDLOG