標籤

｜JS Package｜Add Syntax Highlighter Code for blogger

Add Syntax Highlighter Code for blogger

highlight.js 是一款簡單易用的程式碼高亮插件，能自動偵測程式語言並高亮程式碼，適用於多種框架。以下將示範如何在 Blogger 平台上使用 highlight.js。


在Blogger的「主題」進去後，在「自訂」的下拉選單點選「編輯HTML」，在 </body> 前再加入以下語法：

html
<!-- ⭣ 預設Theme ⭣ -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css' rel='stylesheet'/>
<!-- ⭣ 其它Theme base16系列 ⭣ -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/mocha.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js'/>

想變更其它 Theme 配色，可到 Highlighter Theme 官方展示頁做挑選，之後把 default.min 更換成你想要的 Theme 名稱 ( 要特別注意 base16 系列 Theme，路徑是 styles/base16/ )。


不過 html 語法會出現無法呈現的問題，需再加入以下語法，要貼之前需讓它轉義成XML，用HTMLEscape線上工具進行轉義。

script

緊接著加入以下語法，讓 highlight.js 執行。

script
hljs.highlightAll();

就可到 Blogger 文章編輯頁面切換成 HTML 檢視，創建 <pre><code>....</code>></pre> 的標籤，並在裡面放要展示 code，就能執行 highlight.js 的效果了。

html
標籤：