Contents

Todo

Features

How to use:

// 1. a partial xml grammar in simple JSON formatvarxml_grammar={// prefix ID for regular expressions, represented as strings, used in the grammar"RegExpID"                          :"RE::","Extra"                             :{"fold"                          :"xml"//"electricChars"               : "<"},// Style model"Style"                             :{"comment"                      :"comment","declaration"                  :"tag","doctype"                      :"meta","meta"                         :"meta","cdata"                        :"atom","tag"                          :"tag","attribute"                    :"attribute","string"                       :"string","atom"                         :"atom","number"                       :"number","error"                        :"error"},// Lexical model"Lex"                               :{"comment:comment"              :["<!--","-->"],"declaration:block"            :["<?xml","?>"],"doctype:block"                :["RE::/<!doctype\\b/i",">"],"meta:block"                   :["RE::/<\\?[_a-zA-Z][\\w\\._\\-]*/","?>"],"cdata:block"                  :["<![CDATA[","]]>"],"open_tag"                     :"RE::/<((?:[_a-zA-Z][_a-zA-Z0-9\\-]*:)?[_a-zA-Z][_a-zA-Z0-9\\-]*)\\b/","close_tag"                    :"RE::/<\\/((?:[_a-zA-Z][_a-zA-Z0-9\\-]*:)?[_a-zA-Z][_a-zA-Z0-9\\-]*)>/","attribute"                    :"RE::/[_a-zA-Z][_a-zA-Z0-9\\-]*/","string:line-block"            :[["\""],["'"]],"number"                       :["RE::/[0-9]\\d*/","RE::/#[0-9a-fA-F]+/"],"atom"                         :["RE::/&#x[a-fA-F\\d]+;/","RE::/&#[\\d]+;/","RE::/&[a-zA-Z][a-zA-Z0-9]*;/"],"text"                         :"RE::/[^<&]+/"// actions,"@tag:action"                  :{"context":true},"tag@:action"                  :{"context":false},"@unique_id:action"            :{"unique":["xml","$1"],"msg":"Duplicate id value \"$0\"","mode":"hash"},"@unique_att:action"           :{"unique":["att","$0"],"msg":"Duplicate attribute \"$0\"","mode":"hash","in-context":true},"@tag_opened:action"           :{"push":"<$1>","ci":true},"@tag_closed:action"           :{"pop":"<$1>","ci":true,"msg":"Tags \"$0\" and \"$1\" do not match"},"@tag_autoclosed:action"       :{"pop":null},"@autocomplete:action"         :{"define":["autocomplete","$1"],"msg":false,"autocomplete":true,"mode":"hash"},"@out_of_place:error"          :"\"$2$3\" can only be at the beginning of XML document"},// Syntax model (optional)"Syntax"                            :{"tag_att"                      :"'id'.attribute @unique_att '=' string @unique_id | attribute @unique_att '=' (string | number)","start_tag"                    :"open_tag.tag @tag @autocomplete @tag_opened tag_att* ('>'.tag | '/>'.tag @tag_autoclosed) tag@","end_tag"                      :"close_tag.tag @autocomplete @tag_closed","xml"                          :"(^^1 declaration? doctype?) (declaration.error @out_of_place | doctype.error @out_of_place | comment | meta | cdata | start_tag | end_tag | atom | text)*"},// what to parse and in what order"Parser"                            :[["xml"]]};// 2. parse the grammar into a Codemirror syntax-highlight modevarxml_mode=CodeMirrorGrammar.getMode(xml_grammar);// 3. use it with CodemirrorCodeMirror.defineMode("xml",xml_mode);// enable user-defined code folding in the specification (new feature)xml_mode.supportCodeFolding=true;CodeMirror.registerHelper("fold",xml_mode.foldType,xml_mode.folder);// enable user-defined code matching in the specification (new feature)xml_mode.supportCodeMatching=true;xml_mode.matcher.options={maxHighlightLineLength:1000};// defaultCodeMirror.defineOption("matching",false,function(cm,val,old){if(old&&old!=CodeMirror.Init){cm.off("cursorActivity",xml_mode.matcher);xml_mode.matcher.clear(cm);}if(val){cm.on("cursorActivity",xml_mode.matcher);xml_mode.matcher(cm);}});// enable syntax lint-like validation in the grammarxml_mode.supportGrammarAnnotations=true;CodeMirror.registerHelper("lint","xml",xml_mode.validator);// enable user-defined autocompletion (if defined)xml_mode.supportAutoCompletion=true;CodeMirror.commands['my_autocompletion']=function(cm){CodeMirror.showHint(cm,xml_mode.autocompleter,{prefixMatch:true,caseInsensitiveMatch:false});};// this also works (takes priority if set)xml_mode.autocompleter.options={prefixMatch:true,caseInsensitiveMatch:false};// or for context-sensitive autocompletion, extracted from the grammarxml_mode.autocompleter.options={prefixMatch:true,caseInsensitiveMatch:false,inContext:true};// or for dynamic (context-sensitive) autocompletion, extracted from user actionsxml_mode.autocompleter.options={prefixMatch:true,caseInsensitiveMatch:false,inContext:true|false,dynamic:true};vareditor=CodeMirror.fromTextArea(document.getElementById("code"),{mode:"xml",lineNumbers:true,indentUnit:4,indentWithTabs:false,lint:true,// enable lint validationmatching:true,// enable token matching, e.g braces, tags etc..extraKeys:{"Ctrl-Space":'my_autocompletion',"Ctrl-L":"toggleComment"},foldGutter:true,gutters:["CodeMirror-lint-markers","CodeMirror-linenumbers","CodeMirror-foldgutter"]});

Other Examples: