寫跟 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中。