在 Blogger 文章中利用 CSS Block 及 Google Code Prettify 顯示程式碼
自從Blogger改了新版，之前所使用的一些程式工具都走了樣，只好重新來過，並開始將每次修改在 Blogger 記錄下來。那麼就需要用到在網頁顯示程式碼的工具了。Google Code Prettify 是由 Google 開發出來的程式碼上色工具，已被大量運用在 Google Code 的網站上，對網頁不會有很大的負擔。 而 CSS Block 的語法，也很多人用，二者可以單獨使用，也可以合併使用。夏箖是採用後者。
首先是 Google Code Prettify 的設定：
1. 請在Blogger後台管理介面找到 "範本" 的頁籤，若是舊版介面，則是 "設計" 頁籤。
2. 點選 "修改HTML" , 按 Ctrl + F 出現搜尋框，一般而言，在不同瀏覽器會出現搜尋框的位置不太一樣，IE是在左上方，Chrome是在右上方。
3. 在搜尋框裡鍵入 </head>，並複製下面的程式碼放在</head>之前。
接下來是 CSS Block 的設定：
6. 請在 "修改 HTML" 裡找到 /* Post 。
7. 貼上下方的程式碼。
CSS Block + Google Code Prettify 的設定：
9. 請在文章的HTML編輯畫面裡輸入下方的程式碼。
備註：
1. CSS Block 裡的 class "code" 是可以自己改名成 NAME，請記得也要一併更改成 .post .NAME。
2. CSS Block 裡的有個圖片連結 yourweb_images_home 請改成自己置放 Code_BG.gif 的位址。
3. 請不要在 CSS 語法前後加上程式註解，可能會造成程式碼無法正常顯示。
4. 如果，要顯示的程式碼裡有特殊符號像是 < > 字元，請先至 HTML Encode 網頁 進行轉換。
參考資料：
1. Google-Code-Prettify (Javascript code prettifer)
2. 符碼記憶 | 在網頁中嵌入顯示程式碼：CSS Block
首先是 Google Code Prettify 的設定：
1. 請在Blogger後台管理介面找到 "範本" 的頁籤，若是舊版介面，則是 "設計" 頁籤。
3. 在搜尋框裡鍵入 </head>，並複製下面的程式碼放在</head>之前。
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"> </script>4. 找到 <body ，並加入 onload='prettyPrint();' ，如下方程式碼。
<body expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint();'>5. 請在文章的HTML編輯畫面裡輸入下方的程式碼。
<pre class="prettyprint"> 輸入想顯示的程式碼 </pre>
接下來是 CSS Block 的設定：
6. 請在 "修改 HTML" 裡找到 /* Post 。
7. 貼上下方的程式碼。
.post .code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(http://yourweb_images_home/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}
8. 請在文章的HTML編輯畫面裡輸入下方的程式碼。<pre class="code"> 要顯示的程式碼 </pre>
CSS Block + Google Code Prettify 的設定：
9. 請在文章的HTML編輯畫面裡輸入下方的程式碼。
<pre class="code prettyprint"> 要顯示的程式碼 </pre>
<pre class="code prettyprint"> <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"> </script> </pre>上面三種方式都可直接在該說明的程式碼區看到顯示結果。
備註：
2. CSS Block 裡的有個圖片連結 yourweb_images_home 請改成自己置放 Code_BG.gif 的位址。
3. 請不要在 CSS 語法前後加上程式註解，可能會造成程式碼無法正常顯示。
4. 如果，要顯示的程式碼裡有特殊符號像是 < > 字元，請先至 HTML Encode 網頁 進行轉換。
參考資料：
1. Google-Code-Prettify (Javascript code prettifer)
2. 符碼記憶 | 在網頁中嵌入顯示程式碼：CSS Block
hello 不好意思想麻煩請教一個問題
回覆刪除我只用CCS引用程式碼
我的程式碼引用後會自動產生左右橫向的「捲軸」
不會自動跳行，似乎是Firefox的關係
我希望程式碼可以自動換行，不要產生捲軸
想請問版主知道可以怎麼解決嗎?
謝謝
我之前只有試過Chrome及IE, 沒試過firefox, Sorry. 您可以參考符碼記憶的那一篇看看。
刪除您好，請問一下，雖然您內文裡提到 class="code prettyprint"，但是我注意到您使用的實際上是 class="csscodeblock prettyprint prettyprinted" style="" csscodeblock 應該只是您自己改過的名稱，但是第 3 個 prettyprinted 這個是做何用途？我發現符碼記憶那篇也是像這樣用 3 個標籤，最後一個也是 prettyprinted 。請問這是做何用途？
回覆刪除其實我真正想問的是，我要顯示的程式碼區塊，最左邊無法留白，會跟灰色直條重疊，會重疊 1 個字元。如果想要像您文章裡顯示的那樣，我必須這樣用：class="codeblock prettyprint" style="padding-left:10px; 。可否請您賜教一下？
Dear Ron,
刪除我確實改了 class name, class name本來就可以修改, 我那樣命名是提醒自己這是結合Google Code Prettify及CSS Block的用法. 而Prettyprinted是class name. 請看本文上半段的教學及程式碼內容便知, 這段class的語法是Google code prettify上色工具在使用的語法.
另外, 您提的重疊的問題, 應該是你版面CSS設定的問係, 因為我並未遇到您說的狀況~
謝謝分享。
回覆刪除另外，google-code-prettify現在只要加入一行就設定完成嚕！
http://google-code-prettify.googlecode.com/svn/trunk/README.html
謝謝您的分享^^，時間有點久遠了，忘記當時為何必須用二行程式碼。但若現在只要一行，對很多朋友來說是福音～
刪除You are welcome.
回覆刪除