添加prism程式碼色彩標註功能

雖然增加了網頁大小,但在查看修改紀錄的網誌時還是比較方便。

第一步

進入官網所標示的教學文章。

How to Add Prism.js Syntax Highlighting to Your WordPress Site

Blogging 101

在子主題的function.php中加入文章提供的程式碼後,其中:

  • if ( is_single() && has_tag( '標籤' ) )
    • 唯有含特定標籤的文章才會載入Prism,避免在不需要的文章有不必要的加載。
    • 自行更改需要的網誌標籤代稱,除代稱外也可輸入標籤ID。

特別記錄是因為作者使用has_tag( 'code' )作為示例,明明是指「標籤」但我當時卻不知為何誤將code當作是古騰堡的「程式碼」區塊,花了好一番功夫才發現錯誤。

第二步

Prism官網選擇支援的語言、外掛與主題並下載prism.js及prism.css。

第三步

應用:點擊需要進行色彩標註的區塊 > 「顯示更多設定」 > 「進階設定」 > 「附加的 CSS 類別」 > 輸入lang-xxx

lang-xxx:xxx為程式語言代稱,可在官網的「Supported languages」找到全部代稱。

完成。

*Prism V2據聞正在開發中。

*網誌文字設定較大故不適宜設定自動換行與安裝顯示列數的外掛。