Help:Extension:CodeMirror
The CodeMirror extension provides syntax highlighting in wikitext editors. This can make editing easier by using colors and shading to visually separate plain text from links, templates, and other wikitext markup.
Usage
Enabling
CodeMirror can be enabled by setting "⧼codemirror-prefs-enable⧽" in your preferences. In WikiEditor (also known as the 2010 editor, enabled with the "Enable the editing toolbar" preference), it can also be toggled on and off using the highlighter button File:Codemirror-icon.png in the toolbar. In the 2017 editor, you can toggle CodeMirror by clicking the "Page options" button File:VisualEditor - Icon - Menu.svg in the toolbar, then selecting "⧼codemirror-toggle-label⧽".
Keyboard shortcuts
Shortcut | Shortcut (macOS) | Description |
---|---|---|
Alt+← | Ctrl+← | Move the cursor one word to the left. |
Alt+→ | Ctrl+→ | Move the cursor one word to the right. |
Alt+↑ | Alt+↑ | Move the selected lines up one line. |
Alt+↓ | Alt+↓ | Move the selected lines down one line. |
⇧ Shift+Alt+↑ | ⇧ Shift+Alt+↑ | Duplicate the selected lines and keep the selection on the top copy. |
⇧ Shift+Alt+↓ | ⇧ Shift+Alt+↓ | Duplicate the selected lines and keep the selection on the bottom copy. |
Escape | Escape | Reduce multiple selections to the main range, or to a cursor if there is only one selection. |
Ctrl+↵ Enter | ⌘ Command+↵ Enter | Insert a blank line below the current line. |
Ctrl+[ | ⌘ Command+[ | Remove indentation from the selected lines. |
Ctrl+] | ⌘ Command+] | Add indentation to the selected lines. |
Ctrl+⇧ Shift+[ | ⌘ Command+Alt+[ | Fold the currently selected templates. |
Ctrl+⇧ Shift+] | ⌘ Command+Alt+] | Unfold the any folded templates in the selection. |
Ctrl+Alt+[ | Ctrl+Alt+[ | Fold all templates on the page. |
Ctrl+Alt+] | Ctrl+Alt+] | Unfold all templates that are currently folded. |
Ctrl+f | ⌘ Command+f | Open the search panel. |
Ctrl+g | ⌘ Command+g | Find the next occurrence of the search string. |
⇧ Shift+Ctrl+g | ⇧ Shift+⌘ Command+g | Find the previous occurrence of the search string. |
Ctrl+d | ⌘ Command+d | Select the next occurrence of the current selection or word, creating multiple selections. |
Ctrl+click | ⌘ Command+click | Add an additional cursor or selection to the area clicked. |
Features
Bracket matching
This feature highlights the innermost pair of brackets when the cursor lies between any bracket pair. When the cursor lies directly next to a bracket, the feature highlights the corresponding matching bracket.
Template folding
<td class="mw-version-versionbox" title="<translate nowrap> The latest stable version is <tvar name=1>1.41</tvar></translate>"><translate> MediaWiki version:</translate> |
Template folding is a form of code folding for templates in wikitext. It allows you to hide all parameters and their values, showing only the template name. This can make managing large, complex templates considerably easier.
Usage
When a cursor or selection covers any part of template syntax, a tooltip icon File:CodeMirror template folding icon.png will appear just above the text. Clicking it will fold all parameters and values of the template, leaving only the template name.
Folded templates will have the template name followed by the ellipsis icon File:CodeMirror template unfolding icon.png. Clicking on it will unfold the template back to its original state.
Shortcut | Shortcut (macOS) | Description |
---|---|---|
Ctrl+⇧ Shift+[ | ⌘ Command+Alt+[ | Fold the currently selected templates. |
Ctrl+⇧ Shift+] | ⌘ Command+Alt+] | Unfold the any folded templates in the selection. |
Ctrl+Alt+[ | Ctrl+Alt+[ | Fold all templates on the page. |
Ctrl+Alt+] | Ctrl+Alt+] | Unfold all templates that are currently folded. |
Availability
Template folding is currently only deployed on specific wikis and for specific namespaces on Wikimedia wikis.[1] It will be available broadly to everyone as an opt-in feature after we offer preferences (<translate> task <tvar name=1>T359498</tvar></translate>).
Customization
If you'd like to keep the keyboard shortcut for folding templates, but hide the visual component, you can do so by adding the following to your personal CSS:[2]
.cm-tooltip-fold {
display: none;
}
Line numbering
When enabled, line numbers are automatically displayed in all editors. On the Wikimedia wikis, it is only enabled for specific namespaces of specific wikis.[3]
It will be available broadly to everyone as an opt-in feature after we offer preferences (<translate> task <tvar name=1>T359498</tvar></translate>). Additionally, we'll have an option to highlight the active line, which is useful when editing code.
Line numbers will take into account any hidden lines, such as those through template folding.
Multiple cursors and selections
You can add additional cursors or selections by holding the Ctrl key (or ⌘ Command on MacOS) and clicking on the desired content or cursor placement. After doing so, any changes you make will be applied to all the selections at the same time.
You can also press Ctrl+d (or ⌘ Command+d on MacOS) to select the next occurrence of the current selection or word, which create multiple selections. This can be useful as a quick find and replace feature.
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 with "⧼codemirror-prefs-colorblind⧽" in your preferences.
With the colorblind-friendly scheme active, the colors of the following page elements change:
Headings, symbols, signatures, section names, magic words | #E4A400 |
Templates | #9C3A00 |
HTML tags, references, mathematical expressions | #56B4E9 |
Variables | #009E73 |
In addition, background highlights and colors are removed from all text and objects. Bolding and underlining behavior remains unaffected.
Color and style customization
The colors and styles used in CodeMirror can be overridden by defining your own styles for the classes in the table below in your personal CSS.[2] Please be aware that changing some things like the line height or font size may not work in the 2017 wikitext editor.
CSS class(es) | Element | CodeMirror styling | WikEd styling | Rememberthedot's styling |
---|---|---|---|---|
.cm-mw-skipformatting | leading space | foo bar | foo bar | |
.cm-mw-list | asterisk or number sign | * foo bar, # foo bar | * foo bar # foo bar | * foo bar # foo bar |
.cm-mw-signature, .cm-mw-hr |
signature, horizontal rule | ∼∼∼∼, ---- | ~~~~, ---- | ~~~~, ---- |
.cm-mw-indenting | colons | ::: foo bar | ::: foo bar | ::: foo bar |
.cm-mw-html-entity | HTML entities | & | & | & |
.cm-mw-comment | HTML comment | <!-- comment --> | <!-- comment --> | <!-- comment --> |
.cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic |
bold and italic | '''bold''' ''italic'' | '''bold''' ''italic'' | '''bold''' ''italic'' |
Headings | ||||
.cm-mw-section-1 | level 1 heading[4] | = Heading = | = Heading = | = Heading = |
.cm-mw-section-2 | level 2 heading[4] | == Heading == | == Heading == | == Heading == |
.cm-mw-section-3 | level 3 heading | === Heading === | === Heading === | === Heading === |
.cm-mw-section-4 | level 4 heading | ==== Heading ==== | ==== Heading ==== | ==== Heading ==== |
.cm-mw-section-5 | level 5 heading | ===== Heading ===== | ===== Heading ===== | ===== Heading ===== |
.cm-mw-section-6 | level 6 heading | ====== Heading ====== | ====== Heading ====== | ====== Heading ====== |
.cm-mw-section-header | equal signs | == | ||
Templates | ||||
example | {{cite book|title=foo bar}} | {{cite book|title=foo bar}} | {{cite book|title=foo bar}} | |
.cm-mw-template | other template content | foo bar | ||
.cm-mw-template-name | template name | cite book | cite book | |
.cm-mw-template-argument-name | template parameters | title= | title= | |
.cm-mw-template-delimiter | pipe | | | | | |
.cm-mw-template-bracket | opening/closing brackets | {{ }} | {{ }} | |
.cm-mw-template-ground .cm-mw-template2-ground .cm-mw-template3-ground |
whole template (the number is the level of nesting) |
{{foo|{{cite book|title=foo bar}}}} | ||
Variables | ||||
example | {{{foo|bar}}} | {{{foo|bar}}} | {{{foo|bar}}} | |
.cm-mw-templatevariable | variable | bar | ||
.cm-mw-templatevariable-name | triple-braced variable name | foo | ||
.cm-mw-templatevariable-bracket | opening/closing brackets | {{{ }}} | ||
.cm-mw-templatevariable-delimiter | pipe | | | ||
Parser functions | ||||
example | {{#assessment: A | High }} | |||
.cm-mw-parserfunction | parser function parameters | High | ||
.cm-mw-parserfunction-name | parser function name | PAGENAME #invoke | ||
.cm-mw-parserfunction-bracket | opening/closing brackets | {{ }} | ||
.cm-mw-parserfunction-delimiter | delimiter | : | ||
Extension tags | ||||
Note: Extension may use their own styles and rules for highlighting text within the extension tag. | ||||
example | <poem style="padding: 1em;">string whole line string</poem> |
<ref name="foo"> </ref> | <tag>...</tag> | |
.cm-mw-exttag | text inside tags | string | ||
.cm-mw-exttag-name, .cm-mw-ext-poem[5] |
tag name | poem | ||
.cm-mw-exttag-bracket | opening/closing brackets | < > | ||
.cm-mw-exttag-attribute | reference attributes | style="padding: 1em;" | ||
HTML tags | ||||
example | <span style="foo">foo bar</span> | |||
.cm-mw-htmltag-name | HTML tag | span | ||
.cm-mw-htmltag-bracket | opening/closing brackets | < > | ||
.cm-mw-htmltag-attribute | parameters and values | style="foo" | ||
superscript subscript |
foo<sup>bar</sup> foo<sub>bar</sub> |
Foo<sup>bar</sup> Foo<sub>bar</sub> |
||
Pre-formatted text | ||||
.cm-mw-tag-pre | pre-formatted text | <pre>foo bar</pre> | <pre>foo bar</pre> | <tag>foo bar</tag> |
.cm-mw-tag-nowiki | nowiki text | <nowiki>foo bar</nowiki> | <nowiki>foo bar</nowiki> | <tag>foo bar</tag> |
Internal links | ||||
example | [[foo bar]] [[foo#section|bar]] | [[foo bar]]
[[foo#section|bar]] |
[[foo bar]]
[[foo#section|bar]] | |
.cm-mw-link-pagename | internal link target | foo bar | ||
.cm-mw-link | # character | #section | ||
.cm-mw-link-tosection | characters after the # | #section | ||
.cm-mw-link-bracket | opening/closing brackets | [[ ]] | ||
.cm-mw-link-text | link label | (no additional formatting) | ||
.cm-mw-link-delimiter | pipe | | | ||
.cm-mw-pagename | internal link targets | foo bar | ||
External links | ||||
example | https://www.example.org [https://www.example.org] [https://www.example.org example.org] |
https://www.example.org [https://www.example.org] [https://www.example.org example.org] |
https://example.org [https://example.org] [https://example.org example.org] | |
.cm-mw-extlink, .cm-mw-free-extlink |
external link target | www.example.org | ||
.cm-mw-extlink-protocol, .cm-mw-free-extlink-protocol |
protocol | https:// | ||
.cm-mw-extlink-text | link label | (no additional formatting) | ||
.cm-mw-extlink-bracket | opening/closing brackets | [ ] | ||
Tables | ||||
example | {| class="wikitable" |- ! Header text !! Header text |- | Example || Example |} |
{| class="wikitable" |- ! Header text !! Header text |- | Example || Example |} |
{| class="wikitable" |- ! Header text !! Header text |- | Example || Example |} | |
.cm-mw-table-bracket | opening/closing brackets and pipe | {| |} | ||
.cm-mw-table-delimiter | row and column separators | | |- ! | ||
.cm-mw-table-definition | table classes and styles | class="wikitable" | ||
.cm-mw-table-caption | caption text | |+ | ||
Other | ||||
.cm-mw-double-underscore | magic words | __TOC__ | __TOC__ | |
.cm-mw-list | semicolon (definition lists) | ;Foo:Bar[6] | ||
.cm-special-char-nbsp | non-breaking space | · · | ||
.cm-specialChar | control characters | • |
Notes
- ↑ Controlled by the
$wgCodeMirrorTemplateFoldingNamespaces
configuration setting. See Extension:CodeMirror#Configuration for more information. - ↑ 2.0 2.1 Your personal CSS is at Special:MyPage/common.css. You can also make your changes take effect globally if GlobalCssJs is installed. On Wikimedia wikis, your global CSS is at meta:Special:MyPage/global.css.
- ↑ Controlled by the
$wgCodeMirrorLineNumberingNamespaces
configuration setting. See Extension:CodeMirror#Configuration for more information. - ↑ 4.0 4.1 The size is not changed in the 2017 wikitext editor.
- ↑ Where "poem" is the name of the tag.
- ↑ Highlighting is planned for definition lists. See phab:T170042