[Google Blogger] 程式碼區塊 - highlight.js

如何在Blogger產生有顏色的程式碼區塊

使用的工具是 highlight.js

以下是外掛方法
1. 開啟Blogger版面配置

2. 中間頁面往下拉看到fotter-1點選新增小工具，下圖是已經加入好了的狀況

3. 在內容輸入資料，標題空白就好

4. 內容如下

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

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

5. 輸入好之後會看到如下的成果

#include 

int main(void)
{
    printf("Hello world.\n");

    return 0;
}

但是你會看到include後面的stdio.h不見了，這是因為符號< >關係會讓Blogger以為這角括弧是html的東西 這時候要點選左上角的HTML做一點修改

< 改成 &lt;
> 改成 &gt;

修改後角括弧內容就會像下面這樣正常了


範例: 在你編輯Blog的時候選擇HTML，把你要寫的程式碼如下面方法用標籤pre框住

<pre><code class="c">

#include &lt;stdio.h&gt;

int main(void)
{
    printf("Hello world.\n");

    return 0;
}

</code></pre>

效果如下面所示

#include <stdio.h>

int main(void)
{
    printf("Hello world.\n");

    return 0;
}

可以使用下面網站幫助你轉換角括弧，非常的方便，用法就是把程式碼貼到下面網址然後按下convert，再把轉好的內容複製貼回到Blogger
http://www.bloggerjourney.com/2012/12/xmljavascript-special-characters-escape.html

參考連結:
http://hsingjungchen.blogspot.com/2017/03/blogger.html
http://kaiching.org/pydoing/highlight.html