在 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>之前。
<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='&quot;loading&quot; + 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>
上面三種方式都可直接在該說明的程式碼區看到顯示結果。

備註:

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

留言

  1. hello 不好意思想麻煩請教一個問題
    我只用CCS引用程式碼
    我的程式碼引用後會自動產生左右橫向的「捲軸」
    不會自動跳行,似乎是Firefox的關係
    我希望程式碼可以自動換行,不要產生捲軸
    想請問版主知道可以怎麼解決嗎?

    謝謝

    回覆刪除
    回覆
    1. 我之前只有試過Chrome及IE, 沒試過firefox, Sorry. 您可以參考符碼記憶的那一篇看看。

      刪除
  2. 您好,請問一下,雖然您內文裡提到 class="code prettyprint",但是我注意到您使用的實際上是 class="csscodeblock prettyprint prettyprinted" style="" csscodeblock 應該只是您自己改過的名稱,但是第 3 個 prettyprinted 這個是做何用途?我發現符碼記憶那篇也是像這樣用 3 個標籤,最後一個也是 prettyprinted 。請問這是做何用途?

    其實我真正想問的是,我要顯示的程式碼區塊,最左邊無法留白,會跟灰色直條重疊,會重疊 1 個字元。如果想要像您文章裡顯示的那樣,我必須這樣用:class="codeblock prettyprint" style="padding-left:10px; 。可否請您賜教一下?

    回覆刪除
    回覆
    1. Dear Ron,
      我確實改了 class name, class name本來就可以修改, 我那樣命名是提醒自己這是結合Google Code Prettify及CSS Block的用法. 而Prettyprinted是class name. 請看本文上半段的教學及程式碼內容便知, 這段class的語法是Google code prettify上色工具在使用的語法.
      另外, 您提的重疊的問題, 應該是你版面CSS設定的問係, 因為我並未遇到您說的狀況~

      刪除
  3. 謝謝分享。
    另外,google-code-prettify現在只要加入一行就設定完成嚕!
    http://google-code-prettify.googlecode.com/svn/trunk/README.html

    回覆刪除
    回覆
    1. 謝謝您的分享^^,時間有點久遠了,忘記當時為何必須用二行程式碼。但若現在只要一行,對很多朋友來說是福音~

      刪除

張貼留言

注意事項:
1. 請勿張貼廣告或垃圾訊息,此類留言一律刪除。
2. 網路禮節不可少~請勿留下謾罵或人身攻擊之類的言詞。
3. 歡迎朋友們留言交流。

熱門文章

失業了嗎?您不可不知的權利~如何申請失業補助

非死不可 ~ 教你如何徹底刪除 facebook 帳號