用JS讓呈現的程式碼變色
分類:
網站製作
隨著越來越誇張的免費服務，真的很希望可以完全免費的在網路上呈現很多東西。目前已知檔案可以放在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）
總之，步驟如下：
- 引用一些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（變成"或'），但是實際顯示的時候卻又都正常了 - 要放一些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; } - 因為想要區分程式碼跟一般文字，所以我又加上了一些CSS：
code {
display: block; /*因為<code>預設是inline物件，如果不這樣設的話就只有字的後面有顏色，而不是整個區塊*/
white-space: pre; /*如果被自動換行的話可是會破壞程式碼縮排排版的唷，所以不允許自動換行，空白也都會留著。（IE無效，但我不想管了）*/
overflow: auto; /*承上，如果超過一行的寬度的話，會自動有捲軸（像現在這樣:P）*/
background: #eee;
} - 接下來就可以po文了，原理是在<code>加上以想要的語法為名的class，也就像是：
<code class="html"> <span style="font-style: italic;">Hahaha</span>
<!-- 當然可以放註解 --></code>
不過要注意的是大多數的Blog系統會自作聰明的轉換HTML標籤，所以編輯上可能會有點痛苦..（比方說在Blogger的WYSIWYG模式裡，我如果要打<li>的話，還是得要打&lt;li&gt;，不然會在切換模式的時候被自動轉換成HTML的<li>，如果又遇到是要打HTML的話，可能就又要把&再escape成&了）
另外，因為我把<code>的white-space設成pre了，所以每一個enter（包括<code>後面和</code>前面的換行），都會直接反映在結果上喔。（所以上面那個例子才會看起來像是沒排版）
話說回來，十年前的網頁也常常用很多很花俏但耗資源的JS來引人注意，現在也只是比較漂亮罷了。（也許再過十年，就不會覺得現在的品味是好的了）......
... read more
昨天亂七八糟地測試了一下
交大資工所碩一張勝淵被發現陳屍在七舍內...
發表文章
