Write Codemirror modes detailed

Before writing a new model (mode), let's summarize the design ideas of codemirror. Codemirror is divided into three parts: core, pattern, extension . The core library is open to a number of interfaces that are the cornerstone of a new paradigm or a new extension.

In the process of using Codemirror, if the mode we need is not in the codemirror modes, we need to customize mode, such as INI file type, Codemirror itself is not implemented, this time need to design a new mode.

By the way, the difference between mode and language is that mode and language are not exactly one by one correspondence, such as HTML code, which often contains JavaScript and CSS code, for HTML documents mixed with JavaScript and CSS code. We are abstracted into a htmlmixed pattern, which is called "multiple patterns", and JavaScript and CSS have their own mode.

Multi-mode implementation of a single mode is dependent, which also reflects the Codemirror author good design skills, the code to maximize the efficiency of the use, htmlmixed mode inside is "JavaScript", "CSS", "xml" three modes of polling.

Approximate principle:

For a typical JavaScript file, to complete the JavaScript pattern, just define a lexical parser, first, the Codemirror core program has split the entire JavaScript document by line, All you need to do in mode is write a lexical analysis program to analyze each row of data.

For a single-line string literal, the lexical parser needs to parse from the string to the end of the string, in which case the character or string that needs to be identified (such as [] {} (), this,function, etc.) is specifically identified and a CSS style (for highlighting) is returned. Given the character or string that is identified, this is the approximate process. More advanced usage can also control the indentation of code documents, and so on.

Registration mode:

In the implementation script of the pattern, the first thing to call the Codemirror.definemode interface registration mode, this interface function contains two parameters:

The first parameter type is a string, is the name of the pattern, all use lowercase, in general, the registered pattern name remains the same as the schema script name, for example, the XML Schema implementation script is "Xml.js", the registered schema name uses "XML".

The second parameter type is a function, which also has two entry parameters: the Configuration object for Codemirror (passed to the Codemirror constructor, see configuration section) and the Configuration object of mode (which properties are determined by the specific mode). The return value of the function is the mode object, which is mentioned later in this section.

Code constraints:

When writing the mode code, all the code is controlled in the same scope as the calling Codemirror.definemode interface, and the declaration of all function variables is written inside the Codemirror.definemode second argument (function). This prevents the mode variable from polluting the global variable.

State object

Mode is the main function of the lexical analysis of the text to carry out textual identification (highlighting), of course, the main function is also the basic function, most of the design requirements of mode far more than the text to highlight, at the same time, the complexity of a language also affects the complexity of mode.

Some of the rules are very concise and clear language, may each line of lexical analysis is not related to the previous line, such as INI file, its comments, blocks, key values must be in the same line, it is impossible to cross the line, lexical analysis function closed the door to the nine Yin Canon on the line.

Unfortunately, most language rules are more complex, in terms of JavaScript, an array can be written in line, can also be written across lines, if the cross-line write, then the lexical analysis of the next line will certainly be on the previous line of the text has a dependency, or can not be properly analyzed.

For this reason, Codemirror designed the state object, which is unique or shared (similar to a global variable) for each row, and its properties are maintained inside the lexical analysis function, so that there is a connection before the peer, the lexical division Analysis function When analyzing the current text, you can get information from the state object that interests you.

Inside the modes that needs to use the state object, the mode object must define a Startstate property, which is a function that returns an object that is the state object, before the entire document is parsed. Codemirror will use Startstate to generate a state object, and what are the attributes of the state object, which are determined entirely according to the design requirements and ideas of mode.

Lexical analysis functions

In the design of mode, the lexical analysis function (token (stream,state)) of the mode object is the most important, and all mode defines the method.
First the token function has two entry parameters:

An instance of the Stream class defined internally by the Stream:codemirror core, which contains not only the text information of the current line, but also the position of the character that has been parsed (string parsing is a sequence of characters), and also contains a series of string processing methods used;

State: That is, the status object, each lexical analysis, will pass this parameter, and then in the lexical analysis to maintain the properties of this parameter.

When parsing the same line of text, the token function is called repeatedly, so long as it encounters a substring fragment or whitespace character that needs to be identified, token will return until the end of the entire line is parsed, and for example, there is the following line of JavaScript code:

var this. Name;

One, token from the first character of the string analysis, at this time Stream.pos is 0, encountered a keyword "var", then return a CSS style "keyword", while Stream.pos moving to 2,codemirror will add a span tag to Var, which is "Cm-kerword" (the "cm-" prefix is added to the core module, and all the styles returned by the token function are prefixed). The Cm-kerword style is defined in the Codemirror.css file.

Second, the string has not reached the end, the second call token analysis, encountered a space, return null, that is, the space does not need to highlight, while Stream.pos moved to 3;

Three, the string has not ended, the third call token analysis, encountered a property name, return "Properties", while Stream.pos moved to 7,codemirror will give name outside the span tag, the label's class is " Cm-properties ".

Four, the string has not reached the end, continue to call token, until the end of parsing the string.

In fact, lexical analysis of the outline of the process is this, is not very simple? Concrete implementation of the details are actually more cumbersome.

Styling

Style is done in the lexical analysis process, but also the purpose of lexical analysis, codemirror support a number of styles, all of which are distinguished by special keywords

1. Normal styles, which do not contain "line-" and "line-background-" prefixes, are normal styles that work on a word or substring of an entire line of string.

2. A style with the "line-" prefix, acting on the entire line of text, in the DOM structure, the style is added to the pre tag. It is important to note that the entire string parsing process is over, as long as there is a return value containing the "line-" prefix, the pre tag will be added to the corresponding style, multiple return different values, it will increase the number of styles.

3. The style with the "line-background-" prefix affects the background of the entire line of text, which creates a block element that is parallel to the pre, whose z-index is less than the pre tag, and the pre itself is set to transparent, so the newly created block element simulates the background color of the entire row. As with the "line-" prefix, multiple returns add more styles

4. Token can also return multiple styles (separated by spaces), for example, "string Error", which is the overlay of the string style (shaded) and error (dash) styles.

PS:CODEMIRROR.CSS files do not have a style that needs to be defined, the general custom style file is written in the same directory as the mode script file.

It might be clearer to look at an entire row of DOM structures that are identified:

    <!--the DOM structure of the entire line -    <Divclass=""style= "position:relative;">        <!--only the token function returns a style with the line-background-keyword, and the node is created -        <!--This example token return value contains LINE-BACKGROUND-LINEBGC -        <!--codemirror-linebackground style definition in codemirror.css, LINEBGC needs to define itself -        <Divclass= "LINEBGC codemirror-linebackground"></Div>        <!--the DOM corresponding to the line number is not within the scope of the token -        <Divclass= "Codemirror-gutter-wrapper"style= "Position:absolute; left: -29px;">            <Divclass= "Codemirror-linenumber codemirror-gutter-elt"style= "left:0px; width:20px;">3</Div>        </Div>        <!--official full line of text corresponding to the DOM, the label's background is codemirror set to transparent -        <!--The pre tag was added to the "Linetext" style because the token return value contains "Line-linetext" with "line-" prefix, so this style is generated -        <!--Linetext style needs to be defined by itself -        <Preclass= "Linetext">            <spanstyle= "padding-right:0.1px;">                <!--token return value contains key -                <spanclass= "Cm-key">Innodb_log_file_size</span>                <!--token return value contains "Equal-symbol strong" is a multiple style -                <spanclass= "Cm-equal-symbol Cm-strong">=</span>                <!--token return value contains "Vaule" -                <spanclass= "Cm-value">10M</span>                <!--token return value contains "comment" -                <spanclass= "Cm-comment">;DD AD</span>            </span>        </Pre>    </Div>

Write Codemirror modes detailed