WordPress 外掛推薦:Prism Syntax Highlighter 程式碼高亮,一試成主顧

剛成立部落格的時候,我主要都是在寫程式相關的筆記,好比 Hadoop、Ubuntu、Python 之類的東西,對於一個從電機領域跨入資訊界的學生,開個部落格好像是常態,隨手寫筆記好像是美德,也就開始了寫文章之路

我記得當時花最多時間是 Hadoop Cluster 安裝步驟,這聽起來很容易,不就是安裝嗎,搞個環境沒甚麼大不了的吧?但環境這種東西,可愛又可恨,最怕的是版本不同、套件相衝,就算你放幾包乖乖在身邊,也不見得每次都能順利搞定

那時候真的是不斷的重裝、嘗試,剛開始還規定要裝在 AWS 上,而我們申請的 VM 規格太差跑不動,又多走了很多冤枉路…

哀呀,血淚史就不講了,總之好不容易裝完,開心的教完作業後,突然覺得我好像有種使命,應該要來造福大眾,便寫了篇教學讓後人有跡可循 (當時網路上有許多版本的安裝方法,眾說紛紜,有的甚至還寫錯,對於不熟 Linux 指令的我,根本是天書阿)

當時的文章在這裡,各位無聊可以參考看看,裡面有超多程式碼的,想想看,如果沒有程式碼亮高,會是甚麼慘況 XDD

[教學] 如何在 Ubuntu 14.04 上安裝 Hadoop 2.6.0

Prism Syntax Highlighter 程式碼高亮

一路走來,我還是在用 WordPress,我喜歡這個熟悉的介面,有眾多外掛支援的天地,整個不像是資工出身的?哈,我本來就不是純種資工,所以就別說你為啥不用 Git Page、Medium 拉 (儘管逐漸有跳巢的趨勢^^)

請支持《傑瑞窩在這》原創文章。原文標題:WordPress 外掛推薦:Prism Syntax Highlighter 程式碼高亮,一試成主顧,原文網址:https://jerrynest.io/prism/

總之,我在 WordPress 就是要用程式碼高亮外掛 (也很固執的不想從 GitHub 導入過來 XD),前前後後我試過三套程式碼高亮外掛,每次都大動干戈,因為後面的 HTML 語法有些微差異,每篇文章都要重新調整,當初實在是很痛苦阿!

最後,發現了這款 Prism Syntax Highlighter,他漂亮的外皮以及多項擴充功能實在是深的我心,也持續地用到現在,推薦給大家

prism - WordPress 外掛推薦:Prism Syntax Highlighter 程式碼高亮,一試成主顧

這套 Prism 其實是一款 Javascript 套件,輕量且有相當大的擴展性,並不一定是 WordPress 使用者才能體會他的好,自架網站的朋友也能使用,但採用 Markdown 的朋友應該沒興趣 XDDD

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

就連 React 網站上的程式碼也是使用 Prism 欸,好東西當然要用啊 ~


下載並使用 Prism Syntax Highlighter

下載 WordPress 外掛:Prism Syntax Highlighter

將 Prism Syntax Highlighter 安裝到你的部落格後,你會在設定選單中看見「Prism For WP」,點下去就能進入設定頁囉

prism1 - WordPress 外掛推薦:Prism Syntax Highlighter 程式碼高亮,一試成主顧

這裡有三個大項目:主題 (theme)、語言 (languages) 以及擴充功能 (plugin)。雖然主題的選擇不多,但我覺得款式都算不錯,挑個你喜歡的吧!像我目前用的是「Coy」主題,但我有稍微修改過,因為原有的設計會有陰影效果,看起來與我的部落格主題風格不搭

使用的方式很簡單,在文章編輯器上方點選「Prism」按鈕就能插入程式碼了,有個下拉選單能讓你選擇語言,我自己是覺得直接切到 HTML 模式編輯比較快 XD

prism3 - WordPress 外掛推薦:Prism Syntax Highlighter 程式碼高亮,一試成主顧

推薦幾個擴充功能:Line Numbers (顯示行數) 與 Copy to Clipboard (複製到剪貼簿),畢竟要讓讀者好閱讀好複製嘛,另外一個我覺得重要的則是 Command Line

像我之前的文章有很多指令步驟,這時候如果有終端機的錢字號 ($) 在前面會更加清楚,排版也顯得漂亮,比如像下方這樣:

echo "hello world!"

由於這個在編輯器內沒有 Template 可以抄,我就把它紀錄在此,好讓我之後也能直接抄 XDD

<pre class="command-line" data-user="jerry" data-host="ubuntu">
<code class="language-bash">echo "hello world!"</code>
</pre>

除了錢字號外,還有代表 root 的井字號 (#),甚至是 Windows PowerShell 的樣式,有興趣的話可以前往 Command Line 說明文件

prism2 - WordPress 外掛推薦:Prism Syntax Highlighter 程式碼高亮,一試成主顧

其他好玩的功能就自摸索吧,如果有不錯的使用方式也歡迎在留言區與我分享,感恩!

如果您覺得這篇文章有幫助,歡迎按個讚或分享出去唷:

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

發表回應