Extension:CodeMirror

MediaWiki extensions manual
OOjs UI icon advanced-invert.svg
CodeMirror
Release status: stable
Pride and codemirror.png
Implementation User interface
Description Provides syntax highlighting in wikitext editor
Author(s) Pavel Astakhov (pastakhovtalk)
Latest version 4.0.0
Compatibility policy Snapshots releases along with MediaWiki. Master is not backward compatible.
MediaWiki 1.32+
PHP 5.3+
Database changes No
License GNU General Public License 2.0 or later
Download
  • $wgCodeMirrorEnableBracketMatching
  • $wgCodeMirrorAccessibilityColors
  • $wgCodeMirrorLineNumberingNamespaces
Translate the CodeMirror extension if it is available at translatewiki.net

Check usage and version matrix.

Vagrant role codemirror
Issues Open tasks · Report a bug

The CodeMirror extension provides syntax highlighting in MediaWiki's wikitext editor. It adds a button with the icon Codemirror-icon.png 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 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.

Please note though, that the updated color scheme is currently only enabled by default for some wikis (see roadmap and configuration).

FeaturesEdit

Bracket matchingEdit

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.

Please note that bracket matching is only enabled by default in some wikis (see roadmap and configuration).

Line numberingEdit

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

Please note that this feature is only enabled for the template namespace by default (see roadmap and configuration).

Browser supportEdit

All browsers supported by MediaWiki are supported.

InstallationEdit

  • If using Vagrant , install with vagrant roles enable codemirror --provision
Manual installation

ConfigurationEdit

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 common.css.

Add the following code at the bottom of your LocalSettings.php .

# Enables use of CodeMirror by default but still allow users to disable it
$wgDefaultUserOptions['usecodemirror'] = 1;

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.

# Enable bracket matching in CodeMirror
$wgCodeMirrorEnableBracketMatching = true;

# Enable accessible colors in CodeMirror
$wgCodeMirrorAccessibilityColors = true;

# Enable line numbering in CodeMirror
# defaults to the template namespace `[ NS_TEMPLATE ]`
# `null` enables it for all namespace
# [] for disabling everywhere
$wgCodeMirrorLineNumberingNamespaces = null;

Extension integrationEdit

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 integrationEdit

The following front-end hooks are used in this extension:

Hook Parameters
Type Description
ext.CodeMirror.switch boolean Whether the CodeMirror editor is now shown
jQuery object The current "editor", which is either the normal ‎<textarea /> or the .CodeMirror element.


To doEdit

  • highlighting definition lists ( ;foo :bar ) (phab:T170042)
  • auto-completion (phab:T95100)
  • code folding T166098
  • highlighting inside gallery tag (<gallery> foo | bar </gallery>)

See alsoEdit