Enabling

CodeMirror can be enabled by enabling the Beta feature Improved Syntax Highlighting, then enabling Enable syntax highlighting in the Editing section of 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 " Syntax" in the toolbar. In the 2017 editor, you can toggle CodeMirror by clicking the Page options button in the toolbar, then selecting Syntax highlighting.

Keyboard shortcuts

You can review keyboard shortcuts by opening the help dialog with Ctrl+⇧ Shift+/.

CodeMirror preferences

Most features documented here can be disabled or enabled by individual users. To open the preferences panel, press Ctrl+⇧ Shift+, (or ⌘ Command+⇧ Shift+, on macOS). If you use WikiEditor , you can also get to your CodeMirror preferences by clicking on the button in the Advanced section of the toolbar. Your CodeMirror preferences will be remembered across different devices and sessions.

Some preferences are only available in the "full" preferences dialog. This is accessible by clicking on full preferences link in the preferences panel, or directly by pressing Alt+⇧ Shift+,.

Editing MediaWiki Wikitext often has different needs than editing proper "code" such as JavaScript or Lua. For this reason, preferences are stored separately for wikitext and non-wikitext, allowing you to customize the two experiences differently.

Bracket matching

When the cursor lies directly next to a bracket, the feature highlights the corresponding matching bracket.

Code folding

Code folding allows you to fold template parameters, extension tags, and other code blocks. This can make managing large, complex templates considerably easier.

.cm-tooltip-fold {
	display: none;
}

Autocompletion

This feature provides autocompletion of magic words , parser extension tags , and URL protocols. If you enter {{#, you should see a list of all parser functions that start with #. Similarly, typing double underscores (__) will show a list of double-underscored magic words. You can continue to type to narrow your search. Use the arrow keys to select the desired text, and hit the ↵ Enter or Tab ↹ key to make your selection. Autocompletion does not work for templates, or for magic words or parser functions that do not begin with # or __ by default. To get autocompletion in that case, press ⇧ Shift+↵ Enter after you've typed {{ and the first few characters of the template, magic word or parser function you're looking for. The same shortcut also works to enable autocompletion of wikilinks, including file links.

Linting

CodeMirror includes a linter. This performs static code analysis in real time, surfacing errors or other potential problems with your code without you having to save. This works for all languages supported by CodeMirror, including wikitext.

Linting is available as the Lint the code option in your CodeMirror preferences. When enabled, you will see a status bar at the bottom of the editor listing the number of errors, warnings, and informational diagnostics. Issues are underlined in the source text. Hovering over them or moving the cursor to the issues will reveal more information, and in some cases the linter may offer a button to quickly fix the issue. On the opposite side of the status bar, you are shown the numbers for the current line number, character, and selection length.

See Help:Extension:CodeMirror/Wikitext linting for the list of the available lint rules for wikitext.

Note that while the linter is a useful tool to assist with fixing various issues, it is not an authority and may have stylistic opinions not shared by all editors.

Opening links in wikitext

You can quickly open links specified in the wikitext. Do this by holding down the Ctrl key (or ⌘ Command on macOS) and clicking on a page title inside of link syntax, such as [[Main Page]]. Clicking this case would open Main Page in a new tab.

This feature also works for template names and file names.

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.^[2]

Line numbers will take into account any hidden lines, such as those through code folding.

Highlight the active line

In your CodeMirror preferences, you can select Highlight the active line to enable this feature, which can make it easier to tell which line of text the cursor is on, especially on large pages.

Line wrapping

Line wrapping is the default behaviour in most editors. Sometimes you may want to disable this, especially when writing complex wikitext or other code. You can disable line wrapping in your CodeMirror preferences.

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.

Highlight references

By default, CodeMirror will highlight non-printable control characters and other characters such as non-breaking spaces. Control characters appear as a red dot, while non-breaking spaces are displayed as a faint gray dot. Hovering over these characters will show a tooltip stating which character it is.

If desired, you can disable this feature in your CodeMirror preferences.

Highlight whitespace

Enabling "Highlight whitespace" will highlight the whitespace characters with a gray dot, or a wide arrow for the tab character.

The "Highlight trailing whitespace" setting will highlight spaces, tabs and other invisible characters at the end of a sentence.

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 Enable colorblind-friendly scheme for syntax highlighting when editing wikitext in your preferences.

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.