開始寫程式以後,想要在 blogger 中記錄一些筆記,在 google 後,覺得這個方法蠻實用的,於是紀錄一下
我想要有以下的樣式該怎麼做?
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello! World!");
}
}
下面將介紹如何使用外掛在Blogger裡使用程式碼區塊,我使用的外掛為highlight.js的外掛,網路上還有很多類似的外掛,因為我比較喜歡highlight所以下面使用它來做介紹。步驟一 :
進去blogger版面設置步驟二 : 找到版面設置下面slides的地方,點選新增小工具(下面的圖片是我已經新增完了)
步驟三 : 新增完後,點選編輯,進去可以看到下面圖片的樣子
標題的部分不用輸入任何東西,主要是內容部分要輸入步驟四的程式(圖片裡面我已經輸入好了)
步驟四 : 在內容裡輸入下面程式
<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!");
}
}