用JS讓呈現的程式碼變色

  5/05/2007 分類:

隨著越來越誇張的免費服務，真的很希望可以完全免費的在網路上呈現很多東西。目前已知檔案可以放在Box.net。
在開始看Prototype、PEAR之類的東西之後，深深地覺得應該要多找這些工具才能更快地開發東西。我一直很害怕會陷入如使用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來引人注意，現在也只是比較漂亮罷了。（也許再過十年，就不會覺得現在的品味是好的了）

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)