如何在 Blog (Google Blogger) 插入程式碼 feat. 不會正常顯示

其實要在 Blog (Google Blogger) 插入程式碼不是件難事，
Google 搜尋「google blogspot 貼程式碼」都有很多教學文，
但會想寫這篇分享文是因為我在用的過程遇到一個問題orz
不知道會不會有其他人跟我遇到一樣的問題，
所以想說分享一下~



網路教學1 (圖文詳細步驟參考)
如果code有使用到<或是>之類的符號必須要先經過轉碼


步驟以上的教學文都有，所以這邊不多說明，直接切入本篇重點。

←我照網路上的教學文不管怎麼樣用就是不會有像這樣 Code 的顯示。










後來我才懷疑到是 Blogger 的  HTML/JavaScript 小工具問題，
所以我去看網路其他大大有用程式碼顯示的 Blogger，
檢視原始碼，都有這幾行：

但是我的 Blogger 卻沒有這幾行，
於是我就換 Blogger 的主題樣式，
換到顯示得出來，原始碼有那幾行，
才總算成功了orz

表示有些 Blogger 樣式不知什麼原因不支援 HTML/JavaScript 小工具，
所以如果沒有正常顯示成程式碼的樣子，
先不要懷疑是自己有用錯，
建議是先將設定都 ready，
然後更換 Blogger 樣式到會正常顯示就好~~~

為了抓這個問題，
花好久時間orz
希望其他人不要跟我踩到一樣的問題QQ

-

最後附上我用的樣式：

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

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

插入 Code
<pre class="prettyprint lang-html linenums">
這裡放程式碼
</pre>

<pre class="prettyprint lang-html linenums">
這裡放程式碼
</pre>

2020.04.26 補充 ---
突然找到這篇日文的，雖然是日文但我覺得寫得比較清楚XD
Google Code Prettifyでソースコードを読みやすく色分けする

<pre class="prettyprint lang-html linenums">
linenums => 標行數
lang-html =>以html的形式呈現
如果是 JavaScript 要記得換成 lang-js
且 lang- 在class裡面只能放1個

還有如何讓程式自動換行：
Google code prettifyでスクロールバーを出す方法
↑但是這篇提到的 "word-wrap:normal;"我試了沒用，
所以我改用↓這篇提到的 white-space: pre-wrap;
在Blogger使用Google Code Prettify來顯示程式碼
就能夠換行了！

在 HTML/JavaScript小工具 貼上以下的 code：

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&amp;skin=sons-of-obsidian"></script>

<style type="text/css">
pre.prettyprint {
  font-size:14px;
  white-space: pre-wrap;
}
</style>

圖示：