[JS]程式碼上色程式（beta）

張貼者： surveyorK 於 中午12:40 2009年11月23日 星期一 標籤：
image

在上面的輸入區中輸入程式碼，若含javascript碼，還要在javascript的方塊上打勾，然後按轉換，便可以在下方看到轉換後的程式碼，其下還有結果預覽，可以先看看這段程式碼貼上網頁後，會長什麼樣子。







原本的程式碼：

HTMLjavascriptC/C++

轉換後的程式碼：



輸出結果：

















不知道為什麼FireFox不支援這隻javascript，可以使用這個放在外連空間的

http://popodragon.myweb.hinet.net/Blogger/demo.html

簡單做個程式解說，承上次的程式碼區塊實作，這次我嘗試用javascript寫了一支轉換程式，用來消除程式碼中原先的瀏覽器會認錯的HTML跳脫符號，還有順道添上顏色，還在發展階段，BUG不少，總是搞不定javascript內建的字串函式，尤其是substr()，很多時候用起來含糊不清，簡直到了令人髮指的地步。

上色的部分，目前規劃分三種顏色，標籤用紫色，字串用淺藍，註解用綠色，背景則用粉黃色，這是螞蟻書彩色版中的配色，我覺得不錯，看起來很舒服，就採用了這樣的配色模式。

不過上色問題也很大，由於搞不定substr()，所以若這三種混搭在一起，不會互相配合，譬如說在註解裡面放標籤，本來原則上應該也要是綠色，但因為這隻程式很笨，所以裡面的標籤依然顯示紫色，這是它最需要加強的地方。

另外還有一些小bug，目前HTML碼比較不會出問題，javascript程式碼就難看了，尤其是c-style的注解，就算是正確的程式碼，也很有因為誤判而造成上色混亂的情形，有時候反而比原本的樣式更難以閱讀。

還有，在IE 6.0底下是看不到顏色變化的，我也不曉得為什麼。

還有關於行號，因為用圖片太多問題，字型不能變化，一變化就對不上，所以我改成使用另一個區塊，只是放在程式碼區塊的左邊。顯示沒問題，不過需把兩個區塊都改成向左浮動，所以寬度必須調整得宜，否則太小或太大排版都會亂掉。恩，還不是很理想，不過目前只能想到這樣做了。

就這樣，若有興趣適用的話，可以依下面的步驟使用：



1.在css宣告區中把下面的這幾個宣告複製進去，當然顏色或字型什麼的都可以自己改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

pre.codeStyle {
   background-color: #FFFFF0;
   background-repeat: no-repeat;
   background-attachment: scroll; /* 可隨捲軸移動 */
   background-position: top left;
  
   border: 1px solid #ccc;
   padding: 0px 0px 0px 5px;
   overflow:auto;
   max-width:588px;   /* 因為blog的寬度就這樣 */  
   line-height: 1.3em;
}

.note{
color:green !important ;
}
.quot{
   color: firebrick !important ;
}
.tag{
   color:  blue;
}
.reservedWord{
  color:#4B4BF0;
}
2.把要展示程式碼複製到上方的上色程式輸入區，按轉換取得程式碼完整的HTML碼，直接貼上網頁（部落格），彩色的程式碼便出現了，就是這麼簡單。




上色程式原始碼 codeColor.js：

http://surveyork.blogspot.com/2010/06/javascript-highlight-program-source.html

2010.6.10 更新：
修正註解和字串部分，使之可以印出上色程式本身。

2010.5.2 更新：
增加C/C++上色功能

2010.4.29 更新：
修正字串和註解，使其內不再有其他的顏色標籤

2009.11.29 更新：
修正網址會被javascript解碼器勿判為註解的bug

2009.11.25 更新：
把顏色標籤改成<span>，這樣一來IE也可以正常顯示顏色變化。
修正<, >當作運算符號會加入顏色標籤的bug，但必須有空格才能判斷。

2009.11.24 更新：
基本上已經可以拿掉註解中其他的顏色標籤。( 全程都沒使用substr )

No response to “[JS]程式碼上色程式（beta）” ;

張貼留言