CodeMirror 介紹 - 在Web上呈現程式語言內容

CodeMirror: http://marijn.haverbeke.nl/codemirror/

一般的programmer總會想在 web 上面去分享自已的一些sample code

但是，html 對於一般程式語言用的換行、tab符號 都視為空白

且，Browser也缺乏對 programmer language syntax high-lighting/coloring, code indentation(縮行)..等功能

所以，我們單純的把程式碼做為 html 的文字內容時，常常得到的是一串很醜、沒斷行的字串
就算加了 pre 這個 html tag, 能保留斷行、空白 但也無法擁有 syntax hilight 的功能

一般，可能用貼圖的方式 or 檔案下載的方式 來提供這些程式碼的內容

或是自訂css來做呈現~

但這些方法都比較間接 也比較麻煩一點...

Code Mirror 就是為了幫助解決這個問題所生的一套 javascript library

基本上，它提供了一個 code editor 的介面

提供了數種程式語言的呈現及編輯介面 (只要依它定的規則去寫parser，就可以再延伸其它語言的應用)，使用者可以很清義的透過 javascript 來使用、設定呈現的效果

目前支援的語言有 HTML ,XML, JavaScript, Python, CSS, SPARQL, PHP

透過 CodeMirror config值的設定，可以定義該呈現區塊處理的程式語言為何(parser)、呈現方式為何(css file)、要不要有行號、要不要自動換行(wrapping)...等功能

可說是非常的方便~

連 Google 的 API playground, Google Earth KML Sampler 都是透過code mirror來打造出一個可線上編輯、執行JavaScript的環境

下面是我試用的結果:

閱讀全文...

Yahoo Pipes: Web資料擷取處理引擎介紹

Yahoo Pipes 可以依你定義的資料流處理方式，幫你進行 web 資料(rss, atom, csv, ..)的擷取、處理、輸出(format: rss, json, ...)

好處是 透過 pipies 作為資料處理引擎，不用將資料處理邏輯放在自家的 server 上 而是 host 在 yahoo

透過拖拉的方式 將資料處理邏輯定義好(如, 取得、匯集、過濾、排序...等) 也可省掉很多 coding的時間及人力

以之前寫的 sample 而言

就是透過 yahoo pipes 裡user定義好的資料處理流程，將 RSS / ATOM feed 轉成 JSON format

以達到 不用 server side code (proxy) 來達到 client 端跨domain 的資料擷取
(註: 因為 Same Origin Policy 的關係，在AJAX的實作中，client side script 不能透過XMLHttpRequest 存取不同domain的web resources，此時 proxy 是一種walkaround來繞過這種問題的解決方式)

這樣，甚至根本就不用 server side 的程式，就可做很多 mashup 的應用 :Q

供各位參考~ 還滿有趣的

閱讀全文...

Google April Fool's joke: 3D Chrome & Brain Search & ...

Google 在愚人節大開使用者玩笑

讓我笑到不行，真是很有趣的一家公司 :)

發現了幾個Google 的惡作劇，這次的惡作劇主題是: CADIE: 分散式人工智慧體

藉這這個強大的新技術，發展出了一些有趣的新APP


以下，是 Google 惡搞的成果 :

1. 3D Chrome


http://www.google.com/intl/en/landing/chrome/cadie/
Chrome 推出 3D 功能，只要下載並製做好3D立體眼鏡
按下Chrome的3D功能，即可用3D的效果來瀏覽網頁~
別擔心~ Google強大的工程團隊，會幫您將web content處理過 讓他們能配合3D Browsing來提供客制的3D Content呢!!

2. Brain Search
http://www.google.com/mobile/default/brainsearch.html

透過手機的天線來接收腦波的訊號，將人腦想到的Search Term直接輸入手機進行Search :Q

好 Kuso ~~~



3. GMail autopilot
http://mail.google.com/mail/help/autopilot/index.html
透過Gmail內您寄出的信件的溝通風格分析~
自動為您回信~

4. Google Code CADIE
http://code.google.com/intl/zh-TW/creative/cadie/
透過自然語言的描述，CADIE可以幫你用C++/PHP/Python/Java/...等語言產出您要的程式碼哦 :)

5. 在GMap 上 CADIE的地標
http://maps.google.com/maps/mpl?f=q&ie=UTF8&moduleurl=http://www.google.com/intl/en/landing/cadie/doc/panda-mapplet.xml&utm_campaign=en&utm_medium=mapshpp&utm_source=en-mapshpp-na-us-gns-mp



6. 在Google Earth 裡 也有
http://earth.google.com/cadie.html


---
以上~ 全為 Google 出品 :Q

閱讀全文...