讓prismjs.com幫你將部落格中的程式碼格式化

 最近正在重整與練習一些程式設計的文章

想起之前因為想要讓文章中的程式碼能夠加上行號、格式化，做了一些設定

發現東西久了沒整理，沒記錄下來~真的很容易遺忘，又要花一些時間回想與練習~很可惜

所以，趁著這次重新整理的機會~~趕緊將這部分的設定及操作整理出來！

======================================================================

要將部落格(以我使用的google blogspot說明)中的程式碼做相關設定，這裡推薦的是：

prismjs.com 這個網站

這個網站最主要的功能就是幫你設計並提供下載將程式碼格式化(如加上行號、顏色、語法高亮顯示等等)所需的js及css語法，讓你文章中的程式碼產生類似下方的效果：

=====================================================================

整個設定及操作可以整理為以下幾個步驟：

一、在https://prismjs.com/中設定格式化佈景主題、支援的程式語法、外掛功能

二、將上述設定完成產生的js及CSS二個檔案下載回來

三、進入部落格(google blogspot)的管理頁面將剛剛下載回來的js及CSS內容加入版面及主題設定之中，基本上就完成設定工作了！

四、以後寫文章中有需要格式化的程式碼，就切換進HTML檢視模式，在程式碼前後加上指定的語法即可！

以上各步驟的相關說明如下：

一、進入https://prismjs.com/進行功能及需求設定

    一-1：進入https://prismjs.com/網站，點選「DOWNLOAD」進入設定頁面

    一-2：進入設定頁面後，點選喜歡的佈景主題(Themes)；選擇要支援的程式語法(Language)；並選用要支援的外掛功能選項(Plugins)[如：line Numbers加上行號]等功能需求

二：將https://prismjs.com/為你產生的JS及CSS二個檔案下載回來備用！

三、進入部落格管理頁面~~~

    三-1：進入「版面配置」

    三-2：點選「新增小工具」→選擇新增「HTML/JavaScript」

    三-3：將剛剛下載完回的JS檔案內容全部複製→貼到「內容」框中如下圖：

並記得自行在語法最上方加上<script>並在結尾處加上</script>

    三-4：將剛剛下載的CSS語法加入的方法為：進入「主題」點選「自訂」如下圖

    三-5：進入主題設計自訂頁面後，點選「進階」→選擇「新增CSS」，將剛才下載的CSS內容全部「複製」→貼上，即可完成全部的設定工作！

四、在文章編輯完成後，進入「HTML檢視」畫面，在想要格式化的程式碼內容前加上指定語法<pre><code class="設定內容">，結尾處加上</code></pre>如下圖：

其中class="指定使用的程式語言 顯示行號"可依自行需求加以設定

這樣就完成囉~~~

以後文章中有程式碼需要格式化時，都可以透過以上第四步驟前後加上語法即可！

=====================================================================

備註說明：

其實這裡提到的操作，也可以應用在自己的應用程式裡，只要童要載自行設計的應用程式中引入剛剛下載回來的JS及CSS檔案，同樣在需要格式化的內容以上述第四步驟方式設定，農樣可以產生相對應的格式化效果！