緣起:

我在寫 Blogger 時一直有個痛點，就是 code 不知道要怎麼呈現，直接貼上的話也太醜，用圖片的話，程式碼一長就不太好截圖，而且圖片大的話，不僅佔空間，在 Blogger 上就算把圖片大小調到最大，使用者沒點進去看的話，根本看不太清楚程式碼在寫什麼，最重要的事，下次自己要抄程式碼時，無從複製。

好久之前有加了一個別人做的小功具到 js 裡，只要用 html 模式，加入 <pre> 標籤，然後設定 class 為什麼 "pretty" 之類的，再把程式碼加到 <pre> 標籤裡，之後顯示時就會有個外框把 code 給包起來，但沒怎麼美化，而且 code 過長的話它也不會多滾輪出來，會整個突出去。

最近發現有 prismjs 這東西，它就是我需要的工具，只要引用 js 跟 css，然後用個 pre 跟 code 的 html 把你的程式碼包住，再設定那些 tag 的 class 就能把你的程式碼美化，非常的方便。

這篇記錄 prismjs 的基本使用方法，以及要怎麼把這工具加到 blogger 裡。

下載 Prismjs:

到它們的官網，點一下那個大大的 Download 鈕，它就會把你帶到一個有很多 CheckBox 的頁面，在那裡你可以自行決定你需要的程式語言，讓你的 prism js 跟 css 裡只包含跟你選的那些程式語言有關的設定。

我選的是 python、C、C++、SQL，HTML CSS 跟 JS 是預設就有勾選的。

最下面有 "Plug in" 區塊，那個 Line Numbers 我也有勾，它能顯示行數，我覺得一定要用的。

選完後就可以點擊 Download js 跟 Download css 來下戴 js 跟 css 檔。

基本用法:

建立一個資料夾放我們測試的 html 檔，把下載的 prism js 跟 css 放到 js 跟 css 資料夾裡

那個 test.html 裡的內容是長這樣

prism.js 的引入推薦放到 body 最後面，code tag 的 class 設定為 "language-" 加上你想要使用的程式語言名稱，然後 pre 加入 "line-numbers" 的 class 就能讓程式碼顯示行數了。

這是網頁最後程現的結果。

jsDelivr:

Blogger 可以在版面配置那邊增加 js 小功具，把 <script> 標籤加到你網頁的架構裡，讓你可以引用其它網站的 js，但我不能把我的 prism js 跟 css 放到 google 雲端或 github 上，但放在上面的檔案沒辨法直接嵌入網站當成 css 或 js。

我後來找到這篇文章，可以用 jsDelivr 把你 Github 上的公開專案轉成 CDN，所以我在我 github 創了一個叫 static-blogger-resource 的專案，然後把 prism 的 js 跟 css 都放進去，然後照文章教學講的，組成 js 檔與 css 檔的 CDN 連結，然後寫成 <script> 跟 <link>，會長下面這樣

//這個是 js 的 source
<script src="https://cdn.jsdelivr.net/gh//birdshiu/static-blogger-resource/js/prism.js"></script>
//這個是 css 的 source
<link href='https://cdn.jsdelivr.net/gh//birdshiu/static-blogger-resource/css/prism.css' rel='stylesheet'/>

用瀏覽器查看連結，可以正常取得檔案內容