使用Prism Syntax Highlighter讓文章裡的程式碼產生高亮效果!

 

 

在很多分享程式碼的部落格,或是網站,一定常常看到高亮程式碼的作法
但是具體要怎麼做到呢?
如果你是使用WordPress,姐夫在這邊非常推薦一套外掛 Prism Syntax Highlighter
這套外掛能夠讓你在編輯文章的時候插入程式碼,用法很簡單,我們就看下去吧!

▼首先我們先安裝並啟用外掛

Prism-Syntax-Highlighter-jetalk

 

▼接著我們直接來到想要加入程式碼的文章編輯頁面,會看到多出一個Prism Syntax Highlighter的選項,點擊它
jetalk-CSS-code

 

▼接著會跳出一個小視窗,可以選擇你的程式語言,在下方填入你的程式碼
(不知道是不是版本的問題,姐夫的視窗會有跑版的情況發生,不過不影響效果)
Prism-Syntax-Highlighter

 

▼在按下確定後會在文章裡呈現下圖的樣子
CSS-html-嵌入

 

▼按下更新後,就可以到前台看一下效果了
PrismSyntaxHighlighter

 

以上就是關於高亮程式碼外掛-Prism Syntax Highlighter的介紹,使用上有問題歡迎詢問!