緣起:
我在寫 Blogger 時一直有個痛點,就是 code
不知道要怎麼呈現,直接貼上的話也太醜,用圖片的話,程式碼一長就不太好截圖,而且圖片大的話,不僅佔空間,在
Blogger
上就算把圖片大小調到最大,使用者沒點進去看的話,根本看不太清楚程式碼在寫什麼,最重要的事,下次自己要抄程式碼時,無從複製。
好久之前有加了一個別人做的小功具到 js 裡,只要用 html
模式,加入 <pre> 標籤,然後設定 class 為什麼 "pretty"
之類的,再把程式碼加到 <pre> 標籤裡,之後顯示時就會有個外框把 code
給包起來,但沒怎麼美化,而且 code
過長的話它也不會多滾輪出來,會整個突出去。
最近發現有 prismjs 這東西,它就是我需要的工具,只要引用 js
跟 css,然後用個 pre 跟 code 的 html 把你的程式碼包住,再設定那些 tag 的
class 就能把你的程式碼美化,非常的方便。
這篇記錄 prismjs 的基本使用方法,以及要怎麼把這工具加到
blogger 裡。