雖然增加了網頁大小,但在查看修改紀錄的網誌時還是比較方便。
第一步
進入官網所標示的教學文章。
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據聞正在開發中。
*網誌文字設定較大故不適宜設定自動換行與安裝顯示列數的外掛。