Extension:SyntaxHighlight/VisualEditor

SyntaxHighlight nodes in VisualEditor (WIP)
SyntaxHighlight nodes are made editable via VisualEditor  module. Although the module is related to SyntaxHighlight GeSHi, it doesn't use the extension for editing  blocks. Rather, the module only displays and manipulates parsed  block, provided by Parsoid, with it's own language highlighting and validating rules. A more straightforward relationship graph: SyntaxHighlight GeSHi <--> Parsoid <--> syntaxhighlight module The module's language rules are stored as JSON files, which will be described in detail below. All files mentioned below are under the module's folder, except where specified.

Language rules
Language rules are located under. The file name should match the language name used by SyntaxHighlight GeSHi extension's. For example, JavaScript is, plus the file extension  , therefore. For a certain language, highlighting and validating rules are stored in the same JSON file, with highlighting rules defined in, and validating rules in.

Regex objects are used to define matches that a certain rule can fit. Since JSON file is not ideal for storing regex objects, the "regex objects" in the rule files are string representations of javascript RegExp object, which will be parsed on load. For each regex, you should use one and only one capturing group to indicate which part will be linked with related CSS style.

Highlighting rules
Example: Each highlighting rule consists of a regex object, and a css class name. Use  modifier in your regex such that every match will be associated with the related CSS style. The CSS are defined in.

You can use SyntaxHighlight GeSHi highlighting definitions as a reference to create these rules.

Validating rules
Example: Each validating rule consists of the following:
 * : an array of regex objects. These regex objects will be parsed and passed to  as parameters.
 * : an array of regex objects. Use this to define certain patterns that you want to exclude from . Use   to disable.
 * : an array of regex objects. Use this to define ranges that are whitelisted. Any matches outside these ranges will be discarded. Use  for default range, which is the entire code text.
 * : an array of regex objects. Use this to define ranges that are blacklisted. Any matches within these ranges will be discarded. Use  to disable.
 * : a string that can be referenced to a helper method.
 * : a css class name. This style will be applied once  returns places that need error marks.
 * : error tip that will be displayed when user hovers on the error.