如何讓 Publii 的 code block 顯示 syntax highlight

同樣使用 Publii 作為網站開發工具的各位，是否也被 程式碼區塊無法顯示語法色彩 的問題所困擾呢（筆者是在網頁預覽時發生無法顯示的問題，編輯器環境則正常）。其實，在 Publii 官方網站上有提供解決方案（網址連結在文末），以下就為各位詳細解說步驟：

請到 PrismJS 的官方網站，按下上方極為顯眼的 "DOWNLOAD" 鈕。然後在網頁中依序選取自己喜歡的 "Themes"、並勾選需要使用的 "Languages" 和 "Plugins"，最後捲動到網頁最下方，並分別點按 "DOWNLOAD JS" 和 "DOWNLOAD CSS" 來完成檔案的下載。
將下載到電腦上的 "prism.js" 和 "prism.css" 分別複製到以下路徑的資料夾中。（以下路徑為 Mac 上的，Windows 使用者請自行尋找對應資料夾）
- 檔案 "prism.js" 貼至 "文件/Publii/sites/your-site-name/input/ themes/your-theme/assets/js"
- 檔案 "prism.css" 貼至 "文件/Publii/sites/your-site-name/input/themes/your-theme/assets/css"
到 "文件/Publii/sites/your-site-name/input/themes/your-theme/partials" 資料夾底下，分別開啟以下檔案、並且插入所需的程式碼。
- 開啟 "head.hbs"，捲動到檔案末端在</head>之前插入以下程式碼，
  <link rel="stylesheet" href="{{css "prism.css" }}。
- 開啟 "footer.hbs"，捲動到檔案末端在</body>之前插入以下程式碼，
  <script defer src="{{js "prism.js"}}"></script>。
最後，回到 Publii 程式的主畫面，點選工具列的 "Tools"，再點選 "Custom CSS"，然後在 "normal" 頁次裡插入以下程式碼。

code[class * =language-], pre[class * =language-] {
  ::placeholder {
    color: var(--placeholder);
    opacity: 1;
  }
}

經過以上的步驟，我們已經完成 code block 的 syntax highlight 。現在，你可以試著重新預覽使用 Publii 所建構的網頁，相信你的程式碼區塊現在也變得容易閱讀了。😁

補充：若讀者想調整程式碼區塊所使用的字體大小、行距等等，可到 "prism.css" 裡修改像是font-size、line-height等等的屬性值。

Highlight your code syntax with PrismJS（請自段落 "How can Prism.js be implemented in a theme without built-in support for it" 閱讀起）
注意！一旦使用者 "變換" 或 "更新(update)" 佈景主題（theme），原本的 syntax hightlight 就會失效，必須根據上述的方法再重新操作一次。