簡介
本文介紹以下五個 Blogger 樣式修改及顯示程式碼的小技巧：
- 利用「新增小工具」功能，不必修改範本即可改變部落格的 CSS 樣式的方法，
- 利用 Google Code Prettify 顯示程式碼的最簡單方法，
- 利用前處理工具處理要貼上網頁的程式碼，
- 美化並強調程式碼區塊，
- 顯示 GitHub Gist 程式碼，並且套用(比較)一致的顯示風格。
前言
昨天突然心血來潮，玩起 Blogger 的範本，想換換不同的外觀、換換不同的心情。
玩著玩著，發現「新的」動態檢視(Dynamic Views)功能蠻有趣的，把玩了一陣子之後，才發現很多功能在動態檢視功能下都無法使用，尤其是不支援 範本理嵌入 JavaScript，所以之前設定好的 Google Code Prettify 程式碼都無法作用。結果，切換回一般範本時，忘記先保留之前的修改，直接套用的結果，竟然就把整個 Google Code Prettify 程式碼都移除了。
只好再重新查找作法。同時，想到可以利用「新增小工具」的功能，直接插入 HTML/JavaScript 碼，就可以避免直接修改 HTML 範本，免得日後又再次手殘...。
利用「新增小工具」功能，不必修改範本即可改變部落格的 CSS 樣式的方法
其實很簡單：
- 進入「版面配置」，
- 按下「新增小工具」，選擇「HTML/JavaScript」 - 將第三方功能或其他程式碼加入您的網誌，
- 然後直接在「內容」區塊裡面輸入任何想要的 script, style 標籤即可。
後面會看到實際作法。另外，小工具放在哪裡都無所謂。
雖然這樣做不符合將 style, script 元素放在 head 區塊的慣例，但其實現在網頁設計的趨勢，已經趨向於將 script 元素放在網頁最後面，待頁面整體架構顯示完畢後，才開始處理 script 的邏輯部分。至於 style 的部分，由於 Google Code Prettify 需要更動 pre / code 區塊的結構之後，才能以正確的方式顯示程式碼，因此在 script 尚未處理程式碼之前，css 也無法完全發揮作用。所以...為了避免直接修改 html 範本，就狠心按下去吧!
利用 Google Code Prettify 顯示程式碼的最簡單方法
網路上找到的 Google Code Prettify 中文資訊，似乎還是很久以前剛做設定時同樣的那幾篇文章，做法都還是不免要直接編輯 HTML 範本，並且要修改兩、三個地方。
- 載入 css 樣式表，設定程式碼顯示的樣式，
- 載入 javascript 檔案，這時候頁面很可能還沒顯示完畢，為避免遺漏，所以...
- 等待頁面顯示完畢後，再執行 javascript 程式碼，搜尋網頁中的
<pre>,<code>,<xmp>元素，進行加工處理。
我直接找到 Google Code Prettify 的官網，在 Getting Started 這篇文章，說明了其實可以一個步驟自動載入必要的 CSS 檔案與 JavaScript 檔案，並且能自動在部落格頁面載入完畢後，自動尋找 <pre>, <code>, <xmp> 元素，處理程式碼美化。也就是說，現在 Google Code Prettify 只要一行即可：
如果還沒有新增的話，利用前面介紹的「新增小工具」方法，插入這一行程式碼：
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>其實 Google Code Prettify 還有許多功能，譬如可以利用 skin 參數選擇外觀，利用 lang 參數以程式語言的副檔名指定語言：
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst&lang=js"></script>目前官方支援的外觀可以在 skin gallery 查找，指定參數時，指定 skin gallery 列表中的標題名稱即可。或者，也可以自己設計 css 檔案，自行修改外觀。
由於在 script 標籤中指定語言會套用到所有的網頁，因此 Google Code Prettify 也支援利用 class 屬性 lang-* 的方式，指明程式語言：
<pre class="prettyprint lang-scm">(friends 'of '(parentheses))</pre>或者，採用 HTML5 標準，在 code 標籤以 language-* 的 class 屬性，指明程式語言：
<pre class="prettyprint"><code class="language-java">...</code></pre>要顯示行號的話，要在 class 上加上 linenums：
<pre class="prettyprint linenums"><code>...</code></pre>如果貼上的程式碼不是從頭開始，還可以指定開始的行號：
<pre class="prettyprint linenums:40"><code>...</code></pre>利用前處理工具處理要貼上網頁的程式碼
程式碼要貼在 html 檔案前，要先進行處理，轉換與 html 標籤有關的文字，否則會導致 html 網頁結構錯亂。
我目前使用這個工具：Javascript Tools。
- 先選擇 JS Encode,Decode，
- 貼上程式碼之後，按下 Encode 按鈕，
- 然後複製 HTML special chars 的文字內容，就可以貼到 html 檔案的 code 區塊上了。
美化並強調程式碼區塊
我還蠻喜歡程式碼區塊前面加上 code 標籤，凸顯程式碼區塊的做法，就如同現在各位所看到的樣子。這部分直接借用網友的做法；不過，還是放在 HTML/JavaScript 小工具中：
如果還沒有新增的話，利用前面介紹的「新增小工具」方法，插入這些程式碼：
<style>
pre.code {
display: block;
overflow: auto;
min-height: 30px;
max-height:800px;
padding: 0 0 0 11px;
border: 1px solid #ccc;
background: #f8f8ff url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
}
code.prettyprint {
line-height: 1.2em;
margin: 1px;
}
</style>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
要注意這裡設定了 max-height: 800px; 限制程式碼區塊的最大長度，這裡的值可以依照個人喜好需求調整。
另外，改成這樣之後，pre 標籤負責顯示 [code] 這個圖形標籤，而 code 標籤則負責程式碼美化，所以要貼上程式碼時，要這樣寫：
<pre class="code"><code class="prettyprint linenums">...</code></pre>顯示 GitHub Gist 程式碼，並且套用(比較)一致的顯示風格
GitHub 是現在很熱門的程式碼管理工具，它甚至也提供了純粹用來分享程式碼片段的功能: Gist。甚至不需要註冊，就可以使用，也支援版本管理。當然，它也提供了在網頁上顯示程式碼的功能，只要複製要分享的程式碼片段的頁面左邊的 Embed this gist 內容，貼到 html 上即可。
貼上的 html 程式碼，長這個樣子：
<script src="https://gist.github.com/inno-v/5650722.js"></script>實際在網頁中顯示的樣子，可以參考後面的例子，或是可以參考這篇文章：Differential backup using 7-Zip for Windows (Part 1) - 利用 7-Zip 進行差異備份（上篇）。
要挑剔的話，應該說可惜 Gist 不提供目錄和標籤功能，且一定要有檔名，如果我們不提供，系統將自動產生如 gistfile1.js 這樣的檔名。當分享的程式碼片段變多了，就不是很好管理。我的策略是使用文章的名稱當作前綴，這樣至少還能透過排序找出相關檔案。另外就是，我似乎找不到分享一般 GitHub 專案檔案，在網頁上直接嵌入的方法。如果有朋友知道該怎麼做的話，懇請指導一下。
我在 Gist: inno-v 上面分享部落格中的程式碼，歡迎大家利用。
最後，就是要讓 Gist 的顯示，與我前面的設定盡量一致，所以還要修改之前的 style 標籤內容:
如果還沒有新增的話，利用前面介紹的「新增小工具」方法，插入這些程式碼，完整取代之前的 HTML/JavaScript 小工具的內容：
結論
終於把處理顯示程式碼的方法，完整地整理在一起了，日後又癡呆的時候，就可以回頭參考了。
歡迎大家的回饋與心得分享。
沒有留言:
張貼留言