如何快速的利用Prism在Blogger嵌入具有行數的程式碼

本篇文章參考 [技術分享] 寫給會在部落格中撰寫程式碼的你 ─ 在網頁中嵌入高亮程式碼上色 (syntax highlighting)

由於預期會在Blog之中放入大量關於程式碼的東西
原本以為這會是件容易的事
結果完全沒有任何寫網頁背景的我實在是被搞死阿 ..
找了很多篇之後，發現上方連結的過程是最為簡單且有效的
而本文則記錄下成功的過程，以免之後忘了怎麼用了

首先利用Prism來產生後續所需要的文件
點選進入後，在右方可以選擇喜歡的樣式(我選擇的是OKAIDIA)

選擇完畢後，點選右上角的DOWNLOAD

之後會進入以下頁面

勾選Minified version、Core、Okaidia
往下移動
勾選C語言(此處可依據自己使用的語言來勾選)
附屬的效果選擇Line Highlight與Line Numbers

最後點選DOWNLOAD JS與DOWNLOAD CSS

兩個檔案下載後請使用記事本打開
接下來進到自己Blogger的管理介面
點選版面配置，接下來點選跨欄區中的新增小工具

將.JS檔中的頭加入<script> 以及最尾巴加入 </script>
然後整個貼進"內容"裡面，如下圖

點選儲存。 JS檔作業完畢

接下來處理.css檔
一樣回到Blogger的設定頁面，點選"主題" -> "自訂" -> "進階" -> "新增CSS" -> 將剛剛下載下來的點CSS文件中所有文字貼上 -> 套用至網誌

接下來在發表文章的過程中，由"撰寫"切換到"HTML"的模式下


內容為

<pre><code class="language-c line-numbers">第1行
第2行
第3行
</code></pre>

就完成了!

結果如下

第1行
第2行
第3行

延伸設定
如何在Blogger中加入「繼續閱讀」（Read more）
[blogger] 標籤多層次樹狀清單設定
Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包