不研究還好，研究後才發現事情沒那麼好解決，花了好多時間在上面（不過後來發現是因為自己疏忽而白白浪費時間）。
先說明一下為什麼當初會選擇 Google Blogger 寫部落格。
- 比起其他的 Blog Service Provider (BSP)，Google 的未來比較穩定，至少在短期內不會倒。如果部落格寫一段時間了，BSP 宣布經營不善，到時候要搬整個部落格真的好麻煩。
- Google Blogger 是免費的，而且短期內也不會有需要付費的趨勢。
- 頁面乾淨，不會強迫被放置自己非自願放置的廣告。
- 可套用 Blogger 的版型，在後台微調字型大小跟顏色很容易，也可以自己改寫CSS。
一剛開始搜尋先找到這篇 在 Blogger 上用 Google Code Prettify 及 GitHub Gist 顯示程式碼（不修改範本的懶人招式），不用修改範本看了覺得很心動，不過我第一次嘗試後程式碼卻沒有顯示出來，看文章也已經是 2013 年的文章，以為此方法已經不能用了，所以就又繼續搜尋。
如上篇所說的一樣，大部分的教學都是要修改範本的，像是 How to Use Prettify Syntax Highlighter with Blogger、Syntax Highlighter For Blogger Using Google Prettify，不過就算是跟著上面兩篇教學做也都沒辦法顯示出程式碼，而且這兩篇教學也都有點久了。
後來才發現 Google Code Prettify 已經移到 GitHub 上面了，猜想應該是這樣所以之前嘗試才無法成功，新的連結在此：Google Code Prettify on GitHub。
嘗試把新的連結放在範本的 HTML 裡，可是呈現出來的樣子不太滿意，釋出的主題又都不合我意，在蒐尋過程中發現這個 Color themes for Google Code Prettify，看了非常喜歡，裡面的主題好看多了，可是又不知道如何使用。
後來找到 Code Block for Blogger 跟 在 Blogger 上顯示 Code 碼區塊，可以單純在後台新增 CSS 不用經過 Google Code Prettify，我當時想說乾脆放棄用 Google Code Prettify，所以就先直接在後台加 CSS，我有稍微修改過，呈現的樣子大概是這樣。
就是加字型、字體大小、背景顏色、框線、內距等等，標籤並不會上色。
可是看到 Color themes for Google Code Prettify 就覺得好好看，想要研究出來到底要怎麼用！
但還是不太想要修改範本的 HTML，所以又回頭看 在 Blogger 上用 Google Code Prettify 及 GitHub Gist 顯示程式碼（不修改範本的懶人招式），然後才發現，原來是我放錯標籤所以才無法顯示程式碼，恍然大悟！覺得自己都沒好好看人家寫的文章有點笨 XD
前面的辛酸過程終於結束了，要來講解一下我是怎麼用 Google Code Prettify 顯示程式碼。
1. 進入版面配置 (Layout)，新增小工具 (Add a Gadge)：
2. 選擇 HTML/JavaScript - 將第三方功能或其他程式碼加入您的部落格：
3. 加入 Google Code Prettify 的程式碼：
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
4. 記得要儲存設定。
5. 在編輯文章的時候，切換 HTML 模式，然後在程式碼的前後加入：
<code class="prettyprint">程式碼</code> <pre class="prettyprint">程式碼</pre>我自己是如果是一個程式碼區塊用
<pre class="prettyprint">程式碼</pre>，程式碼插入文字中間就用 <code class="print">程式碼</code>。.print 我有另外定義 CSS。這邊要特別注意，切換成 HTML 編輯文章時，如果有「<」、「>」、「&」等符號會被瀏覽器當成標籤，所以需要轉換成 XML，可以使用 HTML To XML Parce 來轉換比較方便。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>基本 HTML/CSS 練習：以 Twitch 為例</title>
<link rel="stylesheet" type="text/css" href="HW_1.css">
</head>
6. 此時你的程式碼可能長得跟我不一樣，可以到 Color themes for Google Code Prettify 選一個你喜歡的主題，點選 CSS。
複製 CSS，然後編輯剛才的 HTML/JavaScript 小工具裡，把 CSS 貼在剛才的
script 的上方，記得 CSS 前後方要用 <style></style> 標籤包起來。
我會建議在
.prettyprint 裡面加入 overflow: auto，這樣程式碼太長時下方會自動有卷軸。其他的都可以依照自己喜好做修改。當然也可以使用預設的主題或從 Skin Gallery 裡選一個主題加在 script 後面，詳細步驟可以參考 Google Code Prettify Getting Started。7. 如果想要在程式碼區塊顯示行數，可以在
class="prettyprint" 後面加 linenums，像這樣子： <pre class="prettyprint linenums">程式碼</pre>。如果要顯示的行數不是從第一行開始，也可以指定從哪一行開始，例如從第 5 開始顯示，那就
<pre class="prettyprint linenums:5">程式碼</pre>。8. Google Code Prettify 會自動猜測你輸入的程式碼是哪個語言，如果你想指定語言也可以，列如要指定 HTML，那就在
class="prettyprint" 加 lang-html。像這樣子：<pre class="prettyprint lang-html">程式碼</pre>。還有其他一些細節可以參考 Google Code Prettify on GitHub。其中有幾個缺點：
1. 在手機版上無法顯示程式碼，只會看到程式碼的部分字型不同而已。似乎可以從手機版上自己設定，不過對我來說難度還太高，所以暫時不想管他，哈哈。
2. 只有簡單樣式的版型才能引入第三方功能或其他程式碼，Blogger 上漂亮的版型都沒辦法使用這個功能。
3. Blogger 的確不是容易編輯程式碼的 BPS，要手動加入 HTML 的標籤的確會花比較多時間。不過用久了也習慣了，等以後再考慮搬家吧。
總算把自己浪費的時間做個總結，做個筆記以後才不會又浪費時間在同一件事情上面 XD
希望這篇可以幫助到有一樣需求的人。
Thank you!
ReplyDelete