用 highlight.js 作為 wordpress 程式碼著色的程式

http://blog.fntsr.tw/articles/402/

前言

原本本部落格是使用 Crayon Syntax Highlighter 這套 WordPress 套件作為程式碼著色的程式，雖未說得上好用，但也算是符合需求。但該套件是不支援 JetPack Markdown 渲染 HTML 標籤的格式，導致我每次更新套件時都要重新修正程式碼 (詳見從 Jekyll 遷移至 WordPress 4.2 節)，不堪其擾，遂有想改用其他程式碼著色程式的念頭。

當初轉移部落格到 WordPress 時，就有試過 highlight.js，但已經忘記當初沒有選擇這個著色程式的原因。不過今天嘗試改用這套程式時，發現體驗良好，既有喜歡的 Theme 又有支援多種語言，重點是該程式的規格和 JetPack Markdown 渲染出來的標籤是同規格！所以就立即改用 highlight.js 作為著色程式。

比較

highlight.js 最大的優勢在能夠與 JetPack Markdown 相容，我可以不用再另外處理就可以直接使用。除此之外，在語言支援度上 highlight.js 的 166 種程式語言也遠多於 Crayon 的 65 種，Themes 的數量也是略多，highlight.js 的更新頻率更是遠遠高過於 Crayon，更遑論 Crayon 的文件因為作者換部落格的關係，圖片都已經失效了。

若要說 Crayon 優勢，大概就是使用上比較適合非程式設計師背景的 wordpress 使用者，不用修改程式透過後台的介面勾勾選選就可以客製化自己想要的著色效果，也有提供標題、純文字化等效果，除此之外還有許多客製化設定選項可以套用。但對於我來說許多功能都是多餘的，所以並不是很有吸引力。

套用 highlight.js

CDN

最快的套用方式就是透過修改 wordpress 主題 (theme) 加入該程式的 cdn 連結：

<!-- 你可以將 `default` 換成任何你想要的主題名稱。 -->
<!-- 如本站的 `monokai-sublime`。記得要保留 `.min`。 -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css">

<!-- 這邊會包含常用的 22 種語言。 -->
<!-- 若所要套用的語言不含在其中，可另外到官網下載客制化的版本。 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>

<!-- 呼叫程式在 HTML 文件讀取完畢後進行程式碼著色 -->
<script>hljs.initHighlightingOnLoad();</script>

客製化

若要使用的語言不含在常用的語言裡，如 Dockerfile、Go、Erb、YAML等，就需要另外到官網下載客製化版本。套用方式和上一節差不多，先把下載下來的套件放到主題專案裡，或是任何可以外連的空間，然後用上節的語法去引用即可。

結語

本篇雖然主要是講述利用 highlight.js 作為 WordPress 的程式碼著色程式，但只要任何可以把 ~~~lang 轉換成

…

的部落格系統或靜態網頁產生器都可以簡單如上述的方式簡單套用。若是不是以

…

作為輸出格式，官方亦有在首頁上示範利用 JavaScript 腳本去指定要套用的標籤樣板，使用文件也有示範利用 jQuery 的選擇器協助指定目標。比較進階的用法可以參考官方提供的 API 文件，裡面也有講述如何新增語言和樣式格式。

透過 highlight.js 取代 Crayon，使得本站相依的套件又少一個。能利用主題 (theme) 直接處理的功能，就少用套件，如此也可減少伺服器的負擔，並且讓渲染專心在前端實作，前後端職責更加分明。