實時語法高亮編輯器的一種實現方式

1.         在沒有語法高亮的日子裏：

         在沒有語法高亮的日子裏，textarea中代碼是這樣的，讓習慣了有語法高亮的人們非常糾結啊。

 

 

2.         在有了語法高亮的日子裏：

         有了codemirror這件神器，可實時高亮編輯的代碼，又能夠過上幸福快樂的好日子。

         Firebug代碼截圖以下：

       

         Codemirror,某大牛Marijn Haverbeke的實時語法高亮編輯器，用起來真是給力。大牛說雖然實現過程很痛苦，幾欲絕望，可是最後仍是成了。源碼內容博大精深。大牛從繁雜的dom中的文字取出來，通過解析，都轉換簡潔的一個span一行，br換行的形式。着實很贊！實現的大體過程以下：從dom中把字符取出，分析這一系列字符，依據規則把處理後的結果從新寫入到原先的dom中，以完成語法高亮的過程。

 

3.         高亮的大致實現：

         一開始初始化大致以下所示：

        

         支持iterator的對象以閉包的形式出現，迭代的對象做爲閉包內的一個局部變量存在,迭代該對象的時候至關於一直調用該對象的next方法。若迭代內容存在，調用相關的處理邏輯處理。若不存在 ,會拋出一個異常 ，接住這個異常後迭代終結。

         代碼形如：

         初始化的過程大致以下：

traveseDOM會生成一個iterator對象傳遞給stringStream這個對象。這個對象處理後仍是返回一個iterator.這個對象又會傳遞給tokenize這個對象。返回的仍是一個iterator.這個對象又被傳遞給parse這個對象。Parse這個對象依然是一個iterator.程序中會迭代Parse這個對象。每迭代依次會返回一個當前內容環境的對象(包含content,style,type,value屬性)。從而依據這些個屬性來改變dom結構從而高亮相對應的內容。

 

4.         語法高亮velocity：

以velocity爲例,高亮後形如這種效果：

 

         要高亮 主要作的就是對tokenizeXML的過程加一些處理,如：

        

依據每次傳入的字符值，採起相應的處理。如：發現處理的當前字符爲#號，那麼判斷是否是接下來的字符依然是#號。 若是是, 那麼將當前行在這以後的全部字符從stringStream返回的對象中取出來，這串字符會做爲將要返回token的content屬性， style 爲velocity-commnet。Parse拿着這個token通過一系列處理 ，返回給調用函數,調用函數拿着這個token把內容變動反映到實際的dom中。

 

5.         參考：

參考1：Codemirror

參考2：Iteration in JavaScript