WordPress 自訂 Prism.js 語法高亮功能 – 提供 Github 下載

原來一直都是使用 Code Syntax Block 外掛來展示文章內關於程式碼的高亮 (Highlight)。但該外掛已近一年沒有更新，導致這次我升級 WordPress 系統並使用 PHP 8.x 版本後外掛的執行出了問題。查找問題發現是 PHP 版本相容性問題，自行更改該外掛的程式碼內容就可以正常執行。

不過這也反映了一個問題：當外掛 (Plugins) 停止更新時，而 WordPress 系統持續更新後就會有發生不相容性的風險。

所以此次重構我的 WordPress 系統盡量不安裝單一功能性質的外掛，若真需要某些特定功能，那就自行客製化，比較容易掌控且避免過多外掛的載入導致系能上的瓶頸。

首先我就打算移除掉這個年久未維護的外掛，然後直接使用目前最為普及的輕量級、可擴展的語法高亮函式庫 - Prism.js，它支援豐富的程式語言並提供多種主題和外掛選項，讓網頁上的程式碼展示更加美觀且易於閱讀。

其實是可以自行到其官網下載，然後再手動設置即可。不過自行撰寫功能模組來引用 Prism.js 可以提供更精確的客製化控制，能夠整合特定需求（如檔案名稱顯示、行號設定、行高亮等功能），同時避免與現有系統衝突，並優化載入效能，使其更能完美融入網站或應用程式生態系統中。

現在要自訂符合自己需求的功能模組容易太多了，只要身旁有個 AI 助理，然後學會「如何與AI溝通」即可，也就是要能確實知道並可以描述問題，這樣就很容易得到想要的解決方案。

以這個 Prism.js 的自訂功能模組來說，我是使用了 Claude 3.7 Sonnet 引擎 (我也有其它主流引擎，包括 GPT-4.5/4o, DeepSeek R1/V3 等，找個容易與之溝通的就可)，大約花一兩個小時輾轉給予提示詞與修正後就能得到一個還算挺滿意的版本)。

(不過對於 AI 的調適是很容易出問題的。使用後發現出現了多出的 html 標籤，以及行號與程式碼行高不一致的問題。倒是這程式碼的迭代可以很快速修正變更，可以查看這個功能模組 README 的版本變更說明。)

關於自訂的 Prism.js 程式碼語法高亮的呈現，可以參考以下我所撰寫的 CSharp 程式碼 (片段)。

using System;
using Thinksoft.PetStore.Dao;
using Thinksoft.PetStore.Models;
namespace Thinksoft.PetStore.Services
{
  public class PlaceOrderService
  {
    // 宣告參考變數為 Interface 形態
    readonly IPlaceOrderDao Dao;
    public PlaceOrderService()
    {
        // 預設所使用的 Dao 類型具體物件
        Dao = new PlaceOrderDaoByADO();
    }
    // 使用相依性注入 (dependency inject)
    // IPlaceOrderDao 形態的具體物件
    public PlaceOrderService(IPlaceOrderDao orderDao)
    {
        Dao = orderDao;
    }
    // 列出寵物商品項目
    public List<ItemModel> ListItemOfPets()
    {
        return Dao.GetAllItems();
    }
  }
}