用JS讓呈現的程式碼變色

隨著越來越誇張的免費服務,真的很希望可以完全免費的在網路上呈現很多東西。目前已知檔案可以放在Box.net
在開始看PrototypePEAR之類的東西之後,深深地覺得應該要多找這些工具才能更快地開發東西。我一直很害怕會陷入如使用DreamWeaver的困境-不會改它不支援的東西(其實我不會用DreamWeaver),畢竟我(們)不會知道自己是不是真的已經了解了那些東西的「基礎」,而已知的是若是貿然硬要使用根本不懂得「工具」,那只會成為累贅而已。
就現況而言,我自認對JS和PHP的了解能夠支援我使用Prototype和PEAR,但是再接下來呢?在我對Prototype的了解只有$()的情況下,我又嘗試使用了PWC (Prototype Window Class,一個在Prototype的基礎上建構夭壽花俏窗格的JS應用),結果當然怎麼用都不順手,還為了一個它在IE上的Bug(其實也有可能是我使用的問題)煩惱了整整一天。

PS:那個bug是,呼叫Window()必須在<body>裡還沒有任何DOM物件之時。否則IE6和IE7會說無法執行(不會說是JS錯誤),然後變成「找不到網頁」的錯誤。

回到標題要講的事情..前一篇 Blogger使用心得 - 轉錄BBS色碼文、隱藏多媒體 裡面有一些程式碼的顯現,其實那個關鍵字變色並不是手動調的喔!其實我很早就想要這樣的功能了,只是一直以來都是想在Server端做這件事情,直到看到了Prototype的code解說頁面的HTML碼才確定真的已經有人用JS做關鍵字變色了。不過,目前我看到的好像僅限於Regular Expression的應用,而且幾乎侷限在Keyword和Reserved word的變色而已,如果能夠藉由Syntax來判斷的話應該會更理想。(也就是說,希望能夠看到有人用JS來實做YACC
總之,步驟如下:
  1. 引用一些JS和CSS檔(目前我是直接連..印象中這樣不好,但是還沒去查相關法條)
    <script src='http://www.prototypejs.org/assets/2007/5/1/prototype.js' type='text/javascript'></script>
    <script src='http://www.prototypejs.org/javascripts/code_highlighter.js' type='text/javascript'></script>
    <script src='http://www.prototypejs.org/javascripts/javascript.js' type='text/javascript'></script>
    <script src='http://www.prototypejs.org/javascripts/html.js' type='text/javascript'></script>

    如果是Blogger的話,可以在po文的時候加,不過我是直接修改範本HTML,放在<head>裡
    PS:附帶一提Blogger的範本也用了頗變態的技術,範本的HTML裡頭,<script>標籤會自閉(就是變成<script />,但實際上應該要是<script></script>),而且引號會被encode(變成&quot;或&#39;),但是實際顯示的時候卻又都正常了
  2. 要放一些CSS..同樣可以改<head>裡面,或是po文的時候加(建議是前者):.html .tag { color:#34A; }
    .html .attribute { color:#B71; }
    .keywords { color: #f71; }
    .comment { color: #6c9; }
    .string { color: #392; }
    .regex { background: #CEF; color: #27b; }
    .doctype { color:red; }
    .brackets { color: navy; }
    .global { color: red; }
    .selectors { color: blue; }
    .properties { color: brown; }
    .units { color: gray; }
    .urls { color: green; }

  3. 因為想要區分程式碼跟一般文字,所以我又加上了一些CSS:code {
    display: block; /*因為<code>預設是inline物件,如果不這樣設的話就只有字的後面有顏色,而不是整個區塊*/
    white-space: pre; /*如果被自動換行的話可是會破壞程式碼縮排排版的唷,所以不允許自動換行,空白也都會留著。(IE無效,但我不想管了)*/
    overflow: auto; /*承上,如果超過一行的寬度的話,會自動有捲軸(像現在這樣:P)*/
    background: #eee;
    }

  4. 接下來就可以po文了,原理是在<code>加上以想要的語法為名的class,也就像是:<code class="html"> &lt;span style="font-style: italic;"&gt;Hahaha&lt;/span&gt;
    &lt;!-- 當然可以放註解 --&gt;</code>

    不過要注意的是大多數的Blog系統會自作聰明的轉換HTML標籤,所以編輯上可能會有點痛苦..(比方說在Blogger的WYSIWYG模式裡,我如果要打<li>的話,還是得要打&amp;lt;li&amp;gt;,不然會在切換模式的時候被自動轉換成HTML的<li>,如果又遇到是要打HTML的話,可能就又要把&再escape成&amp;了)
    另外,因為我把<code>的white-space設成pre了,所以每一個enter(包括<code>後面和</code>前面的換行),都會直接反映在結果上喔。(所以上面那個例子才會看起來像是沒排版)
以上要include的檔目前都是盜連Prototype的(其實code highliter並不是prototype計畫的部份),之後還要查GooglePage或是Box.net能不能放JS和CSS檔給別的網頁連,不然我這個Blog只會越來越肥(話說現在已經比Yahoo!奇摩首頁還要誇張了)。
話說回來,十年前的網頁也常常用很多很花俏但耗資源的JS來引人注意,現在也只是比較漂亮罷了。(也許再過十年,就不會覺得現在的品味是好的了)

沒有留言: