highlight.js – 讓嵌入在wordpress、Blogger等部落格的code更好閱讀

最後更新:December 17, 2022

為wordpress的code增添新氣象

比較以下兩張圖,在wordpress放code並不容易閱讀,而highlight.js則讓code變得生動。

wordpress原始效果
wordpress原始效果
用highlight.js為code新增效果
用highlight.js為code新增效果

為什麼要選highlight.js?

可以讓部落格的code變亮的方式有許多種,我自己最推荐highlight.js,為什麼呢?它有什麼吸引人的地方?答案是它可以讓我一勞永逸,雖然在建置摸索過程花了一點時間,不過一旦設定好,就不必像其它方式每放一次code就要重新操作一次,highlight.js就跟一般內建CSS一樣,只不過好心人已準備了許多模版供我們使用,接著我們就來看看如何建置吧!

一點HTML的觀念

HTML有三個tag,分別是head、body和footer,一般會在head區域引用像CSS這種資源庫,而body是我們內容放置的區域,highlight.js的建置簡單來說就是在head引入它的CSS資源,而在body區域執行渲染,在找出wordpress裡的head和body之前,我們先來看看等等要置入highlight.js的code吧!

認識highlight.js

剛剛有提到highlight.js就是針對code section所提供的CSS樣版,我們要做的就是把它和我們的網站做串接,首先先進入highlight.js網站,可以在首頁的位置也試玩一下不同語言以及不同樣式的渲染效果。

highlight.js官網
highlight.js官網

在wordpress裡建置highlight.js

script we should add to head and body tag
script we should add to head and body tag

我們的目標是將上面兩段script分別加到wordpress的head和body tag裡,點擊Appearance下的Theme File Editor,header.php裡可以找到head tag。至於body會稍微複雜,因為wordpress沒有明確的body位置,所以要在function.php的最下方加入function,內容大意就是我要將body內加入這個script,不懂用途沒關係,只要將script照下面加入正確的位置後更新即可。

script in head
script in head
script in body
script in body

最後更新頁面,看看效果是否有上去,如果沒有檢查script是否有確實被加入html裡,可以在網頁按右鍵inspect開啟html碼,如果有找到加入的script,基本上就成功了。

check script in html
check script in html

在JS DELIVER選擇喜歡的樣式

討白說初始樣式並不討喜,不過沒關係,因為我們可以在JS DELIVER選擇自己喜歡的樣式套用,方法很簡單,複製欲用樣式的html script,再取代原先放到head的script,完成!

 js deliver選擇樣式

其它方式

覺得highlight.js這個方式不適合自己?沒關係,下列還有許多方式可以參考(列出武功秘笈)

延伸閱讀

如何在wordpress文章中嵌入Jupyter notebooks

用thiscodeworks將程式碼片段(code snippets)嵌入(embedded)Wrodpress, Medium等部落格文章

code syntax block – wordpress plugin for code snippets highlight