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 toolbar>Special:MyLanguage/Extension:WikiEditor|2010 WikiEditor toolbar as well as the visualeditor>Special:MyLanguage/Extension:VisualEditor#Integration of "2017 wikitext editor"|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.

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>Special:MyLanguage/Manual:Interface/Stylesheets|common.css. If you have found better styles please let me know.

Browser support
All browsers 1>Special:MyLanguage/Compatibility#Browser support matrix|supported by MediaWiki are supported.

Modern mobile browsers tend to partly work.

Screenshots
[http://test.foxway.org/w/index.php?title=Sandbox:CodeMirror&action=edit Live demo].

Configuration
Add the above code at the bottom of your .

For color and style customization, see 1>meta:Community Tech/Wikitext editor syntax highlighting#Color and style customization|Meta help page.

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 [<tvar|second>https://gerrit.wikimedia.org/r/#/c/350840/</> PhpTags extension].

To do

 * highlighting definition lists (foo :bar ) (<tvar|T170042>T170042</>)
 * auto-completion (<tvar|T95100>T95100</>)
 * brace matching (<tvar|T15302>T15302</>)
 * code folding T166098
 * highlighting inside gallery tag