寫跟 code 相關的 Blog 通常會用到 highlight 標示程式碼片段+更好看，2016年已有不少套件可選。這裡使用步驟最少最簡單的 highlight.js（官網）。

後記:
這篇文章是之前寫在 blogger 的，適用 blogger 的配置，自從用 hexo 架寫 markdown 都會自動 highlight 也不用看這篇惹，好 hexo 不用嗎?

目前這裡是個人偏好的ocean主題，官網demo頁面展示了許多支援的語言跟主題任君挑選。

引入

  • 步驟一：在Blogger設置的「主題」進入「編輯HTML」，把下面這段code複製貼上到 <body></body> 裡的最後面：

如最新版本號為9.10.0

1
2
3
4
5
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/ocean.min.css"
rel="stylesheet" type="text/css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"
type="text/javascript"/>
<script>hljs.initHighlightingOnLoad();</script>

分析一下link的href，如果想換主題只要改動css的檔名即可。

  • 步驟二：沒了。是的，就這麼簡單。

用法

用HTML模式撰寫如下

1
<pre><code class="語法名稱">...程式碼...</code></pre>

範例：

1
2
3
4
5
<pre><code class="javascript">function helloWorld() {
let str = 'Hello World';
console.log(str)
}
</code></pre>

結果：

1
2
3
4
function helloWorld() {
  let str = 'Hello World';
  console.log(str);
}

備註

程式碼如果包含 <> 等符號（例如 html 語法），blogger 會直接視為 html tag 處理而發生錯誤，可用HTMLEscape網站作轉換再貼進code中。