國王的新衣

Linked CSE (Custom Search Engine)

2008-04-17T19:57:00.000+08:00

Google的自訂搜尋引擎，讓使用者利用Google的資源打造自己的搜尋，設定檔可以放在Google上用代號連結，或是放在其他地方用url連結 (Linked CSE)，使用Linked CSE可以在使用者端動態的改變設定檔及其連結，增加了很大的彈性。另外Google有提供一些工具，可以動態產生設定檔，例如makecse可以讀取HTML、RSS、ATOM、OPML格式的檔案，掃描其中的連結，作為設定檔中的網域限制，來限制CSE的查詢範圍，Blogger in draft中的search box的其中一部分，就是使用這個功能，提供範圍為blog中所有連結的查詢。

可以用這個線上Demo來測試，試試在URL欄輸入feed的位置，會有什麼效果。

Blogger Data API能產生符合多個標籤的文章的feed (使用summary post，而不是full post，以減少不必要的連結，max-results參數設成很大的數以取得所有符合的文章)，加上Linked CSE、makecse (參數設定pattern=exact)，雖然還有些缺陷，但是可以做出多標籤文章中的關鍵字查詢 (Multiple labels or tags keyword search)，當文章越來越多，若是標籤有分類好，這個功能將來也許會有用處。

這個方法的缺陷在於：

因為makecse本身的功能，會多出一些網站 (feed中多餘的資訊，或是文章摘要中的連結)，目前一般只會多一個，例如傳入http://happytemplate.blogspot.com/feeds/posts/summary/-/Javascript/Cross%20Domain這個feed，產生的設定檔會多出happytemplate.blogspot.com/search/label/Javascript。
(非本網誌的連結可以用搜尋運算子site:來排除，使用Google AJAX Search API的話，可以用setQueryAddition()在幕後加入。若要完全解決多出來的一個網站，需要用其他方法動態產生設定檔。)
目前只有web search有此功能，blog search還沒有，差別在於文章本身之外的內容也可能會被搜尋到，例如在側邊欄中的東西。
因為設定檔是動態產生，所以會要多等一下，若是使用Google AJAX search control，通常第一次搜尋，會有提示訊息要你過幾秒再按一次。

使用Google AJAX Search API做了以上的功能放在側邊欄，介面使用其中的google.search.searchControl，沒有多作修改。

Label Cloud Online Test

2008-04-14T05:23:00.002+08:00

標籤雲的基本原理很簡單，就是改變一下CSS而已。

Blogger中的標籤格式大致如下：

<div>
  <ul>
    <li><a>AAA</a><span>(2)</span></li>
    <li><a>BBB</a><span>(1)</span></li>
  </ul>
</div>

只要將<li>設成display:inline，就會變成橫向表示，IE上要使標籤換行，還要在外面的區塊加上word-wrap:break-word (不知道是否有其他方法)。文章數的部分可依需要改變，例如是否顯示及顏色大小等。接下來就是依照標籤的文章數將標籤的顏色大小加以改變，顏色加在<a>上，文字大小加在<li>上 (好像這樣line-height才會有用)。
依照文章數改變style一般使用以下的方法，以log(文章數)/log(最大文章數)來做加權：

weightStyle( min, max, count, maxCount ) {
  if (maxCount <= 1 || min === max ) {
    return max;
  } else if (min < max) {
    return min + Math.floor(Math.log(count) * (max-min) / Math.log(maxCount));
  } else {
    return min - Math.floor(Math.log(count) * (min-max) / Math.log(maxCount));
  }
}

加權的方式可以自己做合理的改變，例如想要靠近代表最小值的顏色多一點，可以依照比例縮小加權用的文章數：

if (count < maxCount*0.66) {
  count = (count-1)*0.3 + 1;
}

標籤雲的線上測試：用來選擇自己喜歡的顏色及大小範圍、加權方式，可以設定標籤數、最大文章數，按下Refresh按鈕重繪。繪圖使用jquery plugin：flot，顏色選擇器使用yui color picker，flot使用canvas繪圖，因為IE不支援，所以需要ExploreCanvas (動態載入ExploreCanvas的話，flot繪圖會有問題，目前原因不明)，祝大家找到自己喜歡的標籤雲。

Google AJAX Feed API

2008-01-15T18:00:00.004+08:00

Google.com serves as a proxy to the outside feeds。

Google AJAX Feed API是Google AJAX API的一個分支，簡單來說就是連到Google來取得feed，本質上仍是使用script tag的方式突破same-origin policy取得資料。

說明上說要先申請一個Google API key，雖然要輸入使用的URL（說明上說在此URL下所有的子目錄都可以使用，且可以用不同的URL申請），但是我用部落格申請的key，在個人電腦上也可以用，好像並沒有限制，甚至沒有key也可以用。
依照Developer's Guide的說明，使用起來非常直覺簡單。
有提供JSON、XML、Conbined JSON/XML三種資料格式，JSON格式將RSS或Atom的部分常用元素轉成對應的欄位，並統一名稱，並沒有全部轉換，XML格式可以使用google.feeds.getElementsByTagNameNS來取得擴充的資料。
feed資料由crawler（Feedfetcher）取得，所以不一定是最新的。
可以設定取得資料的數量，預設是4個。
對於一般的資料顯示，有FeedControl可以直接用，另外還有提供一些成品可以套用（請參考Example、Blog）。
甚至可以做feed的查詢及探知。

範例

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed("http://api.flickr.com/services/feeds/photos_public.gne?tags=羅平,油菜花,sunset&tagmode=all");
  feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
  feed.load(function(result) {
    if (!result.error) {
      var div = document.getElementById("flickr photos");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var img = document.createElement("img");
        var imgLink = google.feeds.getElementsByTagNameNS(entry.xmlNode, "http://www.w3.org/2005/Atom", "link")[2];
        img.setAttribute("src", imgLink.getAttribute("href"));
        img.setAttribute("title", entry.title);
        img.setAttribute("width", "200");
        img.setAttribute("height", "116");
        var a = document.createElement("a");
        a.setAttribute("href", entry.link);
        a.setAttribute("target","_blank");
        a.appendChild(img);
        div.appendChild(a);
      }
    }
  });
}

google.setOnLoadCallback(initialize);
</script>

動態載入^{updated on 2008-04-18}

基本上使用Google AJAX API loader載入所需的模組分為兩個階段：

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 建立google、google.loader模組及相關函式。
使用google.load(moduleName, moduleVersion, optionalSettings)載入所需要的AJAX API模組，例如google.load("feeds","1")載入google.feeds模組

Google對這兩個階段都提供了動態載入的支援 (參考：blog、doc)：

加上callback參數，動態插入<script type="text/javascript" src="http://www.google.com/jsapi&callback=YOUR_CALLBACK"></script>，載入完成後會執行所指定的回呼函式。
傳入callback參數，google.load(..., ..., {"callback": YOUR_CALLBACK})會使用動態插入script tag的方式載入模組，完成後會執行所指定的回呼函式。

Multiple labels or tags search

2008-01-13T11:21:00.002+08:00

目前很多網站及部落格都有提供使用標籤來分類文章的功能，對於以網頁提供服務的方式，這是傳統目錄分類方式的合理替代品。在瀏覽部落格時，常會想要找出符合多個標籤的文章，但網站上通常都沒有明確的說明如何做到，只把標籤當作類似單層的目錄來使用。

以下是我目前知道的多標籤查詢方法：

1. Technorati

在 Advanced Serch 中，Tag Search 好像可以做多個標籤邏輯組合的搜尋（使用AND、OR、NOT，空白似乎代表AND，標籤中有空白的話可用雙引號「"」將標籤包起來），但是介面上缺少只搜尋某個網站文章的功能，但是上面的 Keyword Search 卻有這項功能，使用的參數名稱是from，於是試著自己加看看，結果竟然成功了。

例如要搜尋 Ajaxian.com 上包含 jQuery 和 Prototype 標籤的文章（標籤的大小寫好像無關，這點跟一些部落格上的查詢好像有差），可以在網址列上輸入 http://technorati.com/tag/jQuery+AND+prototype?authority=n&language=n&from=http://ajaxian.com/ （中間用 jQuery+prototype 也可以）。

可惜的是查詢結果的 feed 及網站所提供的 Tag Query API 無法用上面的參數得到限制網站的結果，不過或許還有隱藏秘技沒被發現，有了這些資訊，要自己做一個多標籤限制網站的Technorati搜尋介面應該不難。

另外有的部落格較舊的文章在 Technorati 上找不到。（ps. 關於 Technorati 有一些問題，例如如何與部落格同步增減標籤及文章，或著如何以人工方式做到，如果有人知道希望能分享一下）

2. Blogger Data API（for Blogger.com 的 blog ）

Blogger Data API 是 Google Data API 的一個分支，提供以 feed 的格式存取 blog 資料的功能，其中包括查詢多個標籤文章的功能，例如要查詢本站包含 Javascript 和 Cross Domain 標籤的文章，可以輸入 http://happytemplate.blogspot.com/feeds/posts/summary/-/Javascript/Cross%20Domain。

要注意的是標籤的大小寫要一致，並且要經過 UTF-8 編碼，目前只支援 AND 的功能，用「/」表示。另外網頁上所列的查詢參數有一些錯誤，orderby 的值可以是 published（發佈）或 updated（更新），updated-min 和 updated-max 要與 orderby=updated 一起用才會有效，日期時間的值似乎不能加後面的時區（與 Google Data API 上說的不一樣），以上這些可在討論群組中找到。

利用這些資訊，練習寫了一個 Multiple labels search，放在側邊欄：

多個標籤的 AND 以「/」表示，標籤與/之間不能有空白，例如：Javascript/Cross Domain
本站查詢可以從下方標籤雲以拖拉的方式輸入
可以查詢其他 Blogger.com 的 blog
日期格式為YYYY-MM-DD，會跳出月曆方便選擇，不接受時間
為了方便，日期範圍統一依照排序方式為發佈日期或更新日期
顯示的日期時間以查詢目標網站的時區為主，不做轉換

程式方面的感想：

使用 dynamic script sag 及 JSONP 方式取得資料，若是查詢失敗或產生的網址有錯，script tag 的 onload 事件好像不會觸發，所以使用 timer 來刪除失敗時的 script tag，不知道是否有更好的方法，另外不知是否有辦法取得 script tag 所載入的內容。
IE 真的很難搞，連簡單的產生並設定 DOM 物件的屬性的都會有問題，根據網路上的討論，似乎短時間內還不會改變。
放在 Google project hosting 的 download 中的 css 檔似乎無法在網頁中直接連結，還不知道原因。
會再用 Google AJAX Feed API 試試看。
Yahoo Pipes 的 Filter operator 也可以用來過濾標籤，但是對於 Atom 格式的 feed 會有問題，未深入研究，不知怎樣將參數導入 Filter operator。

JSONP

2007-11-14T14:24:00.005+08:00

The script tag method for cross-domain data fetching: JSON with Padding, or simply JSONP. - Bob Ippolito

緣由

為了安全，瀏覽器中的javascript不能存取位在不同domain的資料，這稱做same-origin policy。Same-Origin Policy Part 1: Why we’re stuck with things like XSS and XSRF/CSRF中說的很清楚：

Put simply, same-origin prevents a document or script loaded from one site of origin from manipulating properties of or communicating with a document loaded from another site of origin. In this case the term origin refers to the domain name, port, and protocol of the site hosting the document. The following list covers the major actions that cause the browser to check access against the same-origin policy:

manipulating browser windows

URLs requested via the XmlHttpRequest

manipulating frames (including inline frames)

manipulating documents (included using the object tag)

manipulating cookie

但是HTML本身仍可以加入很多其他domain的資源。

The above restrictions don’t limit all interaction, however. There is no limitation on including documents from other sources in HTML tag elements. It’s fairly common for images, style sheets, and scripts to be included from other domains. In fact, the only time same-origin explicitly restricts document retrieval is when the XmlHttpRequest method is used.

若是需要cross domain取得資料時，例如使用其他網站提供的web service，就需要一些額外的輔助，例如local proxy，但是一般的使用者，無法在server上放proxy。於是Bob Ippolito提出了以下的建議：

使用script tag載入javascript檔的方式，可以cross domain取得資料。
server端傳回的資料採JSON(Javascript object notation)格式。
server端提供一項服務，接受回呼函式(callback function)名稱為參數，將傳回的資料當成回呼函式的參數，傳回對此回呼函式的呼叫(padding 所指的就是此加上回呼函式的填充動作)。當此javascript傳輸完成，client端會自動執行，呼叫此回呼函式，因此在資料傳輸完畢時可以得知。

這裡需要的是server端的幫助，目前Google、Yahoo等的服務都有提供JSONP格式的回傳。

範例

以Flickr提供的服務查詢標籤包含羅平、油菜花、sunset的公開照片，並加入參數format=json、jsoncallback=doPhoto，表示傳回資料為JSON格式，並將其填入回呼函式doPhoto的呼叫中作為參數：

<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?tags=羅平,油菜花,sunset&tagmode=all&format=json&jsoncallback=doPhoto">

會得到「回呼函式名稱(JSON格式資料)」這種格式的回傳：

doPhoto({
 "title": "每個人的相片 已標籤 羅平, 油菜花 和 sunset",
 "link": "http://www.flickr.com/photos/",
 "description": "",
 "modified": "2007-04-22T14:19:09Z",
 "generator": "http://www.flickr.com/",
 "items": [
 {
 "title": "羅平金雞嶺夕陽",
 "link": "http://www.flickr.com/photos/38362352@N00/468370409/",
 "media": {"m":"http://farm1.static.flickr.com/211/468370409_319f383a24_m.jpg"},
 "date_taken": "2007-04-22T22:19:09-08:00",
 "description": "...",
 "published": "2007-04-22T14:19:09Z",
 "author": "nobody@flickr.com (Nature RGB)",
 "author_id": "38362352@N00",
 "tags": "sunset yunnan 油菜花 羅平"
 }
 ]
})

當回傳載入完畢後，client端執行上面這段javascript，便會呼叫之前定義好的doPhoto，這裡做的是秀出查詢的圖片(請原諒我憋腳的javascript)：

function doPhoto(result) {
  var div = document.getElementById("flickr photos");
  for(var i=0; i < result.items.length; i++) {
    var img = document.createElement("img");
    img.setAttribute("src",result.items[i].media.m);
    img.setAttribute("alt",result.items[i].title);
    var a = document.createElement("a");
    a.setAttribute("href",result.items[i].link);
    a.setAttribute("target","_blank");
    a.appendChild(img);
    div.appendChild(a);
  }
}

Syntax Highlight

2007-11-09T05:14:00.001+08:00

厭倦了單調的程式碼嗎，來加點色彩吧！

當你需要某種軟體功能時，要花多久時間才能找到讓你滿意的答案呢？龐大的資料量，加上不同的用語、語言、資料來源，使得需要在搜尋結果中花費很多時間來篩選，然後還要再一一測試，而且說不定還找不到想要的結果。所以搜尋引擎還有很多進步空間，suryvey、catalog類型的網站或文章還是需要的。

對於將程式碼加上語法色彩，大致上分為兩類，事先產生後將靜態的資料貼到網頁上，或是以javascript線上即時修改網頁，以下是一些例子：

事先產生：

1. Highlight(名字真直接)
桌上軟體，可將檔案轉換成所選的格式，語法以副檔名判斷，可選擇配色、CSS是否inline、是否顯示行數，可自行定義語法及配色，若輸出格式選擇UTF-8，中文在預覽視窗會是亂碼，不過輸出的結果是正確的。

因為使用CSS檔，以下程式碼在feeds中顯示會有問題。

//syntax highligth 測試程式碼
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  logger.info("copy 開始!");
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
  logger.info("copy 結束!");
}

2. SyntaxColor4Writer (Windows Live Writer Plugin)
需要.NET 2.0，使用inline CSS，神奇的是會將WLW轉換編輯模式後吃掉的空白和斷行回復。
註：0.26版在WLW 12.0.1367.1128無法執行

//syntax highligth 測試程式碼
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  logger.info("copy 開始!");
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
  logger.info("copy 結束!");
}

3. CodeSnippet(Eclipse plugin)
將所選程式片段依Editor中的顏色設定產生輸出，因為如此所以不需要定義語法，但是目前只支援幾種格式，使用inline CSS。

//syntax highligth 測試程式碼
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  logger.info("copy 開始!");
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
  logger.info("copy 結束!");
}

4. Iris Syntax Highlighter(C# Open Source)
提供網頁版syntax highlight介面，下載版需要.NET 2.0，利用Vim(一種文字編輯器)已有的語法定義檔，支援超過460種語法，可選擇配色、是否顯示行數，可自行定義語法及配色。

//syntax highligth 測試程式碼
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  logger.info("copy 開始!");
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
  logger.info("copy 結束!");
}

線上即時：

1. SyntaxHighlighter (Yahoo Developer Network上有在用)
可以處理<textarea>(ps. 為了在feed中有較好的顯示結果，最好還是使用<pre>)，使用CSS檔做樣式，適合用在少量程式碼的情況(因為用regular expression來做parse)，在Blogger上因為轉換換行符號的問題，需要特別設定(只是多呼叫一個函示)。

//syntax highligth 測試程式碼
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  logger.info("copy 開始!");
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
  logger.info("copy 結束!");
}

Blog Editor

2007-11-07T06:39:00.002+08:00

編輯blog文章，這麼常做的事反而這麼不方便。

Weblog的出現以及網路環境的成熟，讓個人發表網頁變的簡單了，blog的數量一下子增加，這麼多人每天進行的活動，照理說應該存在適當的輔助工具，但是卻沒有。(或是有但我沒找到)

目前我是先在客戶端以自己喜歡的網頁編輯器編輯好文章，用瀏覽器測試自己想要的效果，然後登錄到Blogger的線上介面，貼上文章的HTML。

使用Blogger線上編輯器有些需要注意的事：

要在「設定」>「格式」頁面中將選項「轉換分行符號」設定為否，否則在線上編輯器中的換行會被換成<br />。
(通常在編輯HTML時都不會把所有內容排成一行，如果不改設定就會出現一大堆換行)
不要按到網頁編輯器中的撰寫(其實就是所視即所得的編輯方式)，不然一些自動轉換會改變你的文章格式。
(例如<pre></pre>中的空白和換行會被壓縮成一個空白)
預覽看到的是將轉換分行符號設定為是的結果。

這種土法煉鋼的方式其實是很不方便的，這時如果有一個好用的離線部落格編輯器就好了，最好要是免錢的！(少男的祈禱～～)
但是…現實總是殘酷的！
參考了Top 10 Free Desktop Blog Editors for Windows、十大免費部落格寫作軟體之旅中的幾個比較可以行的軟體，只考慮編輯、上下載文章這兩種最基本的功能：

Windows Live Writer beta 3
編輯：切換編輯模式會修改網頁(空白和換行會被壓縮成一個空白、HTML保留符號會被自動轉換，對於有貼程式碼的會造成困擾)
上下載：會修改網頁(空白和換行會被壓縮成一個空白、HTML保留符號會被自動轉換)、下載文章會失敗
Zoundry Blog Writer 1.0.40
編輯：切換編輯模式會修改網頁(HTML保留符號會被自動轉換)
上下載：會修改網頁格式(HTML保留符號會被自動轉換、為了只顯示文章摘要所加的<div id="fullpost"></div>不見了)
Zoundry Raven alpha 0.8.134
編輯：下載文章失敗就不太想測了，不過看起來好像還ok
上下載：下載文章會失敗(好像是XML not well-formated)
Flock 1.0
編輯：切換編輯模式會修改網頁(空白和換行會被壓縮成一個空白、HTML保留符號會被自動轉換)
上下載：沒有下載功能
ScribeFire 1.4.2 (Mozilla Firefox 附加元件)
編輯：切換編輯模式會修改網頁(空白和換行會被壓縮成一個空白、HTML保留符號會被自動轉換)
上下載：顯示上載成功，但實際上卻沒有上載

當然光批評比實際上去做要容易的多，而且這些是免費的軟體，很多都還在測試階段，有很多問題感覺好像都是自動轉換格式造成的，而且似乎只會對想貼程式碼，或不想網頁元素變成一坨的人有影響，難怪還是有人覺得好用。
所以…向流星許願吧！希望好用的blog editor早日出現。

Code Snippet

2007-11-04T06:19:00.001+08:00

想要在blog貼一段程式碼，這是個很基本的需求，但是真麻煩。

假設想要貼上以下這段java程式碼：

public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
}

首先會遇到兩個問題，「<」、「>」在HTML用來表示標籤，必須要用「<」取代「<」，「>」取代「>」，否則無法正常顯示，還有一些特殊用途的符號也需要避開：「&」取代「&」，「"」取代「"」，另外就是空白和斷行的問題，必須要用「 」(non-breaking space)和「<br />」表示(r和/之間的空格好像是為了相容於較舊的瀏覽器)，不過若是使用網頁編輯器，通常都會自動置換這些符號。
程式碼片段可以放在<code></code>之間，但是這個標籤只是用來增加文字片段的結構資訊，對於頁面的顯示沒有影響。
接著通常會以CSS來修改顯示方式，這時就看個人的創意了，例如：

/* for code */
code, .code {
  display: block;
  background: #E3F5D2;
  padding: 10px 10px 10px 21px;
  margin: 10px;
  border: 1px solid #CCCCCC;
  max-height: 300px;
  overflow: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 95%;
  line-height: 120%;
}

<code> example：

demo
source


//This is a code tag test

public static <T> void copy(List<? super T> dst, List<? extends T> src) {

  for (int i = 0; i < src.size(); i++) {

    dst.set(i, src.get(i));

  }

}

<code>
<span style="color:#FF0000">//This is a code tag test</span><br />
public static &lt;T&gt; void copy(List&lt;? super T&gt; dst, List&lt;? extends T&gt; src) {<br />
&nbsp;&nbsp;for (int i = 0; i &lt; src.size(); i++) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;dst.set(i, src.get(i));<br />
&nbsp;&nbsp;}<br />
}
</code>

但以這種方法來處理空白和斷行，還是太麻煩了，這時可以試試看「<pre>」或「<textarea>」。
<pre></pre>(preformatted text)會將標籤所包圍的空白和斷行顯示在網頁上，但仍舊會處理其中的HTML標籤，所以仍需要置換特殊符號，這也表示可以用CSS修飾程式碼。
<textarea></textarea>會將標籤所包圍的文字全部顯示，但這也表示無法用CSS修飾程式碼，而且比較麻煩的是必須自己設定寬高和唯讀等屬性。(這是目前所知的情況，也許有其他的好方法可以辦到。)

<pre> example：

demo
source

//This is a pre tag test
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
}

<pre class="code">
<span style="color:#FF0000">//This is a pre tag test</span>
public static &lt;T&gt; void copy(List&lt;? super T&gt; dst, List&lt;? extends T&gt; src) {
  for (int i = 0; i &lt; src.size(); i++) {
    dst.set(i, src.get(i));
  }
}
</pre>

<textarea> example：

demo
source

//This is a textarea tag test
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
}

<textarea name="textarea" rows="6" readonly="readonly" class="code" style="width:90%">
//This is a textarea tag test
public static <T> void copy(List<? super T> dst, List<? extends T> src) {
  for (int i = 0; i < src.size(); i++) {
    dst.set(i, src.get(i));
  }
}
</textarea>

所以結論是，用<pre>似乎是比較方便的方法，不用自己設定寬高，也可以用CSS修飾達成syntax highlight的效果。

Blog Template I Want

2007-10-18T23:34:00.002+08:00

列出目前 blog 想要有的功能，原則：在符合需求下，越簡單越好。

版面規劃：
目前沒有很多 widgets，主要內容是文章，所以 2 columns 就OK，左邊文章欄，右邊佈告欄。

功能：

Peek-a-boo（躲貓貓）：只顯示標題，或者摘要，詳細內容隱藏起來，需要時可打開。
需要此功能的部分：佈告欄^done、文章^done
（blogger-ext2 與 jQuery 1.2+ 相容性請參考討論群組，另外裡面的 jQuery.noConflict(); 好像不是這樣用的，似乎應該去掉，否則若有其他使用 jQuery 的程式會有問題）
標籤雲^done
站內搜尋^done
（有仍在 Draft 中的 Search Box，不過本站搜尋結果中搜尋條件的 highlight 好像有問題，會直接顯示成<font color=CC0033>...</font>，有向 Google 反應，但似乎沒有回應。另外自己寫了一個 Multiple labels search）
程式碼片段顯示^done、syntax highlight^done

儲存空間：

javascript、CSS files
Google Page（no gzip, no foler support）、Google Code Project Hosting（gzip support）
images
Flikr、Picasa
videos
YouTube

目前網路上增加 Blogger 功能的方法大致上可以分為兩類，侵入式的直接修改 template 中的 widgets，主要好處是不用等頁面載入後再去進行修改，且可以利用 template 中專用的一些標籤來輔助，使用 ajax 方式載入 widget 時不用再重新修改頁面元素（例如較新的文章、較舊的文章這類聯結會以 ajax 方式載入文章），但是所修改的程式會散落在 template 的各個角落，變更 template 時需要比較多修改；非侵入式的是以 javascript 依設定在頁面元素載入後來作修改，優缺點跟侵入式的相反。

非侵入式的有找到阿土伯程式大觀園作者寫的 blogger-ext2（底層使用 jQuery javascript library ），目前想要的功能好像都有，再加上可以直接到 Google Code Project Hosting 上去連結 js 檔案，似乎已經解決的一大半問題，不過還是想學會自己改。