2011年8月7日

用 google-code-prettify 在網頁中嵌入代碼

作為一個以程式技術為主的網誌,文章中免不了得出現一兩段程式碼。原本我使用 githubgist 服務來將程式代碼內嵌到網頁([使用效果見此]),另一方面 gist 也可以用來當作是自己的小小代碼備忘錄,許多程式碼片段直接丟上去就好了,非常便利,可說是一舉兩得。

不過有時候只是想要顯示幾行代碼,這些代碼也許不具有完整性,如果將代碼一股腦兒地全丟上 gist,總有一天代碼庫會變成亂葬崗。所以除了 gist 之外,我也找了其他網頁貼程式碼的方案。原本前幾天已經物色好了 SyntaxHighlighter,打算趁週末有空時來實裝測試。結果因為在安裝前四處蒐集資訊,意外又發現到 google-code-prettify,看了一下立刻就變心決定改用 google-code-prettify。

其實就功能上而言,SyntaxHighlighter 遠遠勝過 google-code-prettify,之所以選擇了 google-code-prettify,最主要的原因就在於「簡單」。兩者的比較如下(分別簡稱為 GCP 和 SH):

  • 遇到過長的程式碼,SH 可以顯示出 Scrollbar,維持原排版;而 GCP 則會強制換行。
  • SH 預設有行號,GCP 也可加入行號,但不方便。
  • 兩者都支援顏色主題。包含預設的在內,SH 現有 7 種顏色主題,GCP 則有 4 種。
  • SH 支援 23 種程式語法,GCP 預設內建的也有 20 種左右。
  • 就安裝上,GCP 只要加入兩個檔案,就可以處理大多數的語言;SH 則除了得加入核心的 CSS 與 JavaScript 檔共三個檔外,還必須加入對應使用程式語言的 JavaScript。
  • 使用上兩者差異不大。SH 除了 <pre> 標籤外也提供了 <script> 的使用方式;GCP 則是可以省略語法指定,自動判斷。

由於我經常跨不同程式語言撰寫,因此 SH 在安裝上對我而言就顯得比較不便。雖然新版提供了 Autoloader 來動態決定要載入哪些程式語言語法的 JavaScript,不過我最後還是選擇單純一點的 GCP。GCP 對我而言最大的缺點就是沒有行號,我在 IDE 上寫 code 一定會打開行號顯示,不過反正網頁上顯示的代碼行數都不多,沒有行號這一點倒是還可以接受。

以下就是我的 google-code-prettify 安裝筆記:

Step 1.

google-code-prettify 首頁下載好檔案後,解壓放到自己的網路空間上。我是放到 Dropbox 的 public 資料夾下。

Step 2.

然後再修改自己網頁的範本。有兩個地方要修改,一個是在 </head> 標籤之前加上 css 與 javascript 的載入;另外一個是在 <body> 標籤內加上 onLoad 函式。

<head>
  <-- 中略 -->
  <-- 1. 在 /head 標籤前加入下面兩行 -->
  <link href="http://my.url.to/prettify.css" rel="stylesheet" type="text/css"/>
  <script src="http://my.url.to/prettify.js" type="text/javascript"/>
</head>

<-- 2. 在 body 標籤內加入 onload 設定 -->
<body onload='prettyPrint()'>
</body>

Step 3.

接下來只要在想要使用代碼的地方,用 <pre><code> 包起來,並且設定 class 為 prettiprint 即可。google-code-prettify 會自動判斷裡面的代碼是屬於何種語言。

<pre class="prettyprint">
#include <stdio.h>

int main(void)
{
   printf("Hello, world!\n");
   return 0;
}
</pre>

上面這段代碼的結果如下:

#include <stdio.h>

int main(void)
{
   printf("Hello, world!\n");
   return 0;
}

如果想要自己指定區塊內的程式語言,可以再加上 lang-*,其中 * 要替換成該程式語言的代碼。

<pre class="prettyprint lang-html">
  <-- HTML 的場合 -->
</pre>
<pre class="prettyprint lang-c">
  /* C 的場合 */
</pre>
<pre class="prettyprint lang-py">
  " Python 的場合
</pre>

目前支援的代碼有

"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"

看得出來是以程式碼的副檔名做區隔。基本上常見的幾乎都包含在裡面了。


參考資訊:

沒有留言:

張貼留言

Related Posts Plugin for WordPress, Blogger...