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 switching on, it will replace the standard textarea with the editor provided by [ http://codemirror.net CodeMirror library]. When switching off, it will be the opposite effect.

The colors used in this extension have been optimised to provide higher contrast, accessibility and better readability.

Bracket matching
This feature allows highlighting of the closest matching pair of surrounding brackets while navigating through wikitext code using the cursor. Bracket matching will be 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.

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 [ https://phabricator.wikimedia.org/diffusion/ECMI/browse/master/resources/mode/mediawiki/mediawiki.css here]. You should place your own styles to common.css.

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. Please note though, that these features are meant to become default features. The settings might not have an effect any more then.

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: [ https://gerrit.wikimedia.org/r/#/c/348673/ Cite extension] and [ https://gerrit.wikimedia.org/r/#/c/350840/ 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:

To do

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