應用Google Code Prettify在blogger中顯示程式

紀錄一下要如何在blogger中漂亮的顯示程式碼，這裡使用的是Google Code Prettify。

如何在blogger中調用Google Code Prettify：

1. 進入blogger的版面配置當中
2. 選擇一個欄位新增HTML/JavaScript小工具
3. 貼上以下的程式碼

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

4. 按下儲存，大功告成

如果需要做樣式設定，可以在run_prettify.js後面增加?skin=desert

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>

樣式的選擇可以參考skin gallery，把等號後面改成自己想要的樣式即可

先把想輸入的程式碼經過html編碼器編碼
使用時在html界面中輸入以下程式碼，把...中的東西替換成想呈現的html編碼後的程式碼

<pre class="prettyprint">...</pre>

如果想要在每行呈現行號，則在原本的HTML/JavaScript小工具增加以下的碼

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
</style>

使用時在html界面中輸入以下程式碼，把...中的東西替換成想呈現的html編碼後的程式碼

<pre class="prettyprint linenums">...</pre>

Reference

1. google/code-prettify. (2018). Retrieved from https://github.com/google/code-prettify/blob/master/docs/getting_started.md
2. HTML編碼 - 在線HTML編碼器（2018）。取自：http://www.convertstring.com/zh_TW/EncodeDecode/HtmlEncode