CodeMirror js代碼加亮使用總結(jié)
CodeMirror是一個(gè)基于JavaScript的代碼編輯器,CodeMirror支持大量語言的語法高亮,也包括css,html,js等的高亮顯示。此外,CodeMirror還支持代碼自動(dòng)完成、搜索/替換、HTML預(yù)覽、行號、選擇/搜索結(jié)果高亮、可視化tab、代碼自動(dòng)格式等。
CodeMirror源碼的github地址:https://github.com/marijnh/CodeMirror/。這幾天除了上課之外有空我都是在啃著它的源碼,在網(wǎng)上相關(guān)資料基本一點(diǎn)都沒找到,發(fā)覺看起來真是很吃力,這篇總結(jié)也只是說個(gè)大概原理,具體細(xì)節(jié)我也很多不明白,雖然很多代碼都讀得懂,但是串聯(lián)起來有很大問題,沒注釋,源碼大部分變量都是猜它的意思,大部分函數(shù)也真是知道個(gè)大概實(shí)現(xiàn)什么功能。
CodeMirror之所以能夠支持這么多語言的高亮,是由于在它的mode包中定義了多種語言的解析方式,然后對外提供統(tǒng)一的接口。源碼中也把這部分內(nèi)容分為一個(gè)層次。下面我主要是對CodeMirror庫自帶的對JS和CSS代碼加亮腳本為例進(jìn)行了研究。
github:https://github.com/marijnh/CodeMirror/blob/master/mode/javascript/javascript.js
這個(gè)是它定義的js解析方式,下面我用mode.js代替該js文件
mode.js中主要定義了兩個(gè)函數(shù):
CodeMirror.defineMode("javascript",function(config,parserConfig){} CodeMirror.defineMIME("text/javascript", "javascript");
這兩個(gè)define的作用主要是掛靠到CodeMirror這個(gè)主體類中
mode.js 對外提供的接口主要是:
return{ startState:function(basecolumn){...} token:function(stream,state){...} indent:function(state,textAfter){...} }
現(xiàn)在解析這三個(gè)函數(shù):
(1)startState:主要是定義函數(shù)解析執(zhí)行的上下文環(huán)境,起始的狀態(tài),如果沒有這個(gè)方法的話,相當(dāng)于在解析過程中沒有了語義。
startState鍵雖然不是必選但也十分重要,因?yàn)楦吡镣婕罢Z境,即目前高亮的短語處于一個(gè)什么樣的上下文中,通常影響語義和顏色的選取。所以需要一個(gè)startState來初始化一個(gè)狀態(tài)物體,而這個(gè)狀態(tài)物體具體包含什么內(nèi)容完全由具體應(yīng)用決定,CodeMirror沒有硬性規(guī)定。
(2)token:這是最主要的解析語法函數(shù),通過調(diào)用state.tokenize(stream,state)執(zhí)行 function jsTokenBase(stream, state) {...},下面我會(huì)解析這個(gè)函數(shù)的主要內(nèi)容.
(3)indent:這個(gè)是可有可無的
說下jsTokenBase這個(gè)函數(shù),通過stream.next()讀取下一個(gè)字符,并對字符進(jìn)行判斷,主要用到了正則匹配,返回的結(jié)果???
function jsTokenBase(stream,state){ var ch = stream.next(); if(ch == '”' || ch=”'”) return ...; //判斷是否存在下個(gè)”或',return [“string”,”string”] else if(/[\[\]{}\(\),;\:\.]/.test(ch)) return .. ; //匹配[]{}()...這幾個(gè),return ch else if(ch==”0” && stream.eat(/x/i)){ stream.eatwhile(/[\da-f]/i); //0x**,解析16進(jìn)制數(shù) return ret(“number”,”number”);//返回一個(gè)自己封裝好的對象function ret(tp,style,cont) } else if(/\d/.test(ch) || ch ==“”&&stream.eat(/\d/)) return ret(“number”,”number”);//匹配數(shù)字 else if (ch == "/") { //匹配注釋 if(stream.eat(“*”)) return [“comment”,”comment”]; //判斷“/*” else if(stream.eat(“/”)) return [“comment”,”comment”]; //判斷“//” else if (state.lastType == "operator" || state.lastType == "keyword c" || /^[\[{}\(,;:]$/.test(state.lastType)) {} //?? else if(stream.eatWhile(isOperatorChar)) return ret(“operator”); //判斷/之后的操作符 } else if(ch == "#") return [“error”,”error”]; //返回語句是錯(cuò)誤的 else if(isOperatorChar.test(ch)) return ret(“operator”); //返回操作符 else { stream.eatWhile(/[\w\$_]/); return ..} //返回匹配字符串 }
上面這個(gè)只是判斷每一個(gè)ch = stream.next() 是屬于什么類型的字符,也就是知道現(xiàn)在的字符是屬于符號,字符串,數(shù)字,注釋還是其他的.
接著,更重點(diǎn)的還是后面的字符串棧,其實(shí)在代碼里面是可以看到棧的影子的。就像編譯原理里面的語法分析和語義分析,你需要掃描字符串中的每個(gè)字符,并判斷是否進(jìn)?;蛘咭?guī)約,這學(xué)期的編譯原理沒特別認(rèn)真去學(xué),還得重新復(fù)習(xí)一遍。在前面舉例子時(shí)其實(shí)就已經(jīng)感受到,加亮JS或CSS代碼需要上下文,而JS或CSS的大括號、冒號這種層級關(guān)系從上往下從左往右讀時(shí)恰好是一個(gè)壓棧的過程。
For example: function pushcontext(){...} function popcontext() {...} function pushlex(type,info){..} function poplex(){...}
然后通過function statement(type){}等進(jìn)行調(diào)用。
另外要說的一點(diǎn)是,上面判斷中為什么需要標(biāo)記這么多的狀態(tài)?因?yàn)楦吡敛⒉皇且淮涡酝瓿傻模?dāng)用戶完輸入代碼后,可能會(huì)將光標(biāo)移動(dòng)到任意一個(gè)點(diǎn),然后修改代碼,這時(shí)難道要重新解析整個(gè)代碼嗎?不是,但是某種程度上來說也是。是,因?yàn)橛脩粜薷狞c(diǎn)之后的代碼必須重新高亮,因?yàn)橛脩艨赡茌斎胍粋€(gè)大括號,從而改變所有之后代碼的層級(一個(gè)大括號入棧,之后的代碼的棧環(huán)境均發(fā)生改變,而加亮方案要靠棧的元素決定)。也不是。因?yàn)橹暗拇a當(dāng)然可以很安全地認(rèn)為是不需要重新加亮的,所以如果重新加亮整個(gè)代碼是沒必要的,試想若是幾千行的代碼,用戶每次按鍵都要重新加亮,豈不是非常低效。所以,當(dāng)每次捕獲加亮任務(wù),程序應(yīng)該從這個(gè)修改點(diǎn)往后進(jìn)行加亮。而實(shí)際上CodeMirror也是這么做的。這個(gè)多狀態(tài)物體,就是為了能很快的重新從某個(gè)點(diǎn)開始重新加亮。CodeMirror其實(shí)會(huì)幫你“備份”這些狀態(tài)物體(copystate函數(shù)),對于源代碼中的copyState函數(shù)實(shí)現(xiàn)細(xì)節(jié)還真是不懂....
相比JS的mode文件,CSS會(huì)感覺簡單點(diǎn),容易理解點(diǎn)..原理也差不多,就不多說一遍了,總體上是定義大堆的keyword,然后對于每個(gè)關(guān)鍵符號進(jìn)行判斷,也用到了stack.
github源碼:https://github.com/marijnh/CodeMirror/blob/master/mode/css/css.js
現(xiàn)在轉(zhuǎn)到CodeMirror的主函數(shù),html的調(diào)用方式為:
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { mode: "application/xml", styleActiveLine: true, //line選擇是是否加亮 lineNumbers: true, //是否顯示行數(shù) lineWrapping: true, //是否自動(dòng)換行 });
其實(shí)調(diào)用過程中還可以傳遞更多自定義的參數(shù),不過這里就不是討論重點(diǎn)了??傊前炎远x的屬性整合到CodeMirror的defaultConfig中。
在CodeMirror里通過functionhighlightLine(cm,line,state){}調(diào)用 function runMode(cm,text,mode,state,f) 再者通過 mode.token(stream,state) 調(diào)用mode.js對外公開的接口token。
在hightlightLine()函數(shù)執(zhí)行前進(jìn)行了大量的配置定義和分行然后格式化對應(yīng)的字符串.剩下部分前兩天看了不過現(xiàn)在還真得再看一遍才能理清楚思路啦,幾千行的代碼,用最笨的方法看..
如果簡單的詞語高亮,而且不需要考慮到很復(fù)雜的語義,用正則表達(dá)式可以簡單解決..如:
var kw1 = new RegExp("(if|while|with|else|do|try|finally|return|break|continue|new|delete|throw|var|function|catch|for|switch|case|default|typeof|instanceof|true|false|null|undefined|NaN)"), //匹配關(guān)鍵字 kw2 = new RegExp("(\\/\\/[^\n<]*(?:\n|$))(?!<\\/)"), //匹配注釋
但是正則有時(shí)候也會(huì)出很多問題,在有語義的情況下,寫正則表達(dá)式是很麻煩的.高亮一般的方式是采用編譯原理里面的語法分析+語義分析,這部分是有點(diǎn)難度的。本來還想在CodeMirror基礎(chǔ)上改進(jìn)些東西,但是發(fā)現(xiàn)很難,還不如自己寫個(gè)簡單的,過些天有空我會(huì)自己嘗試下。最近開始期末考,然后還有大把綜合實(shí)驗(yàn),看書時(shí)間都少了。淡定!!保持心態(tài)...
附:
CodeMirror的應(yīng)用可以參考:http://codemirror.net/
相關(guān)文章
微信小程序?qū)崿F(xiàn)團(tuán)購或秒殺批量倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)團(tuán)購或秒殺批量倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07基于JavaScript制作一個(gè)簡單的天氣應(yīng)用
隨著Web開發(fā)技術(shù)的不斷發(fā)展,JavaScript已經(jīng)成為前端開發(fā)中不可或缺的一部分,下面我們就來看看如何使用JavaScript實(shí)現(xiàn)一個(gè)簡單的天氣應(yīng)用吧2024-01-01js中string和number類型互轉(zhuǎn)換技巧(分享)
下面小編就為大家?guī)硪黄猨s中string和number類型互轉(zhuǎn)換技巧(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11微信小程序?qū)崿F(xiàn)批量倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)批量倒計(jì)時(shí)功能,適用于商品列表倒計(jì)時(shí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06JavaScript代碼實(shí)現(xiàn)簡單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JavaScript代碼實(shí)現(xiàn)簡單計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12JavaScript中Object.prototype.toString方法的原理
這篇文章主要介紹了JavaScript中Object.prototype.toString方法的原理的相關(guān)資料,需要的朋友可以參考下2016-02-02微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能
本文通過實(shí)例代碼給大家介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-07淺析C/C++,Java,PHP,JavaScript,Json數(shù)組、對象賦值時(shí)最后一個(gè)元素后面是否可以帶逗號
這篇文章主要介紹了淺析C/C++,Java,PHP,JavaScript,Json數(shù)組、對象賦值時(shí)最后一個(gè)元素后面是否可以帶逗號的相關(guān)資料,需要的朋友可以參考下2016-03-03