Extension:CodeMirror

The CodeMirror extension provides syntax highlighting in MediaWiki's wikitext editor. It adds a button with the icon to the editing toolbar that allows for switching syntax highlighting on and off. It supports the 2010 WikiEditor toolbar as well as the VisualEditor toolbar.

By default it is switched off. When switched on, it will replace the standard textarea with the editor provided by [ http://codemirror.net CodeMirror library]. When switched off, it will switch back to the standard textarea.

The colors used in this extension have been optimised for higher contrast, accessibility and better readability and now conform to the Web Content Accessibility Guidelines (WCAG 1.4.3 AA). The colors provide better access for people with limited vision as well as for users working in bright daylight conditions.

Bracket matching
This feature highlights the innermost pair of brackets when the cursor lies between any bracket pair, and when the cursor lies directly next to a bracket, the feature highlights the corresponding matching bracket. Bracket matching is active in both editors when syntax highlighting is turned on in any namespace using these editors.

Line numbering
In the wikitext edit mode line numbers are automatically displayed in both editors.

Colorblind mode
For users who have difficulty distinguishing between colors, CodeMirror offers a colorblind-friendly mode. This feature can be activated on wikis with CodeMirror enabled by navigating to the Special:Preferences page.



With the colorblind-friendly scheme active, the colors of the following page elements change:

In addition, background highlights and colors are removed from all text and objects. Bolding and underlining behavior remains unaffected.

Browser support
All browsers supported by MediaWiki are supported.

Configuration
For color and style customization, see Meta help page. You can use your own styles for wikitext highlighting. Used styles available here. You should place your own styles to.

Add the following code at the bottom of your.

To try out the new features mentioned above in your local installation, add the following lines as well. Note: these features are intended to become default features. Once made default, these settings may no longer have an effect.

Extension integration
If your MediaWiki extension adds a new tag and you want to make sure CodeMirror properly highlights the content within it, you can add CodeMirror support to your extension. Here are two examples: Cite extension and PhpTags extension.

JavaScript integration
The following [ https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.hook front-end hooks] are used in this extension:

If you need to interact with the contents of a CodeMirror instance, use jQuery.plugin.textSelection.

To do

 * highlighting definition lists (foo :bar )
 * auto-completion (T95100 )
 * code folding
 * highlighting inside gallery tag