Erweiterung:CodeMirror

Nicht zu verwechseln mit CodeEditor .

The CodeMirror extension provides a standalone editor with syntax highlighting for a number of programming and markup languages, including wikitext, using the CodeMirror library. It can be used with other editors such as WikiEditor , the Wikitext-Editor 2017 , Proofread Page , and more. For usage and a list of features, see Help:Extension:CodeMirror .

• For information about the older version, see Extension:CodeMirror/5 .
• For help documentation, see Help:Extension:CodeMirror .
• For the JavaScript documentation, see wmdoc:CodeMirror.

• Die Erweiterung herunterladen und die Datei(en) in ein Verzeichnis namens CodeMirror im Ordner extensions/ ablegen.
  Entwickler und Code-Beitragende sollten stattdessen die Erweiterung von Git installieren, mit:

  cdextensions/
  gitclonehttps://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
  

• Folgenden Code am Ende deiner LocalSettings.php -Datei einfügen:

  wfLoadExtension( 'CodeMirror' );
  

• Configure as required.
• Yes Erledigt – Navigiere zu Special:Version in deinem Wiki, um zu überprüfen, ob die Erweiterung erfolgreich installiert wurde.

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

$wgCodeMirrorEnabledModes

Temporary feature flag to control conflicts with Erweiterung:CodeEditor . See the Using CodeMirror instead of CodeEditor section below for more information.

$wgCodeMirrorConflictingGadgets

An array of gadget names that, if enabled, will prevent CodeMirror from loading. Defaults to wikEd.

$wgCodeMirrorPrimaryPreferences

The preferences to advertise in the in-editor preferences panel. These should have a clear visual effect or be commonly used to warrant easier access to toggling the feature. Preferences not listed here will still be available in the full preferences dialog.

$wgCodeMirrorDefaultPreferences

Control which features are enabled by default for all users. See below for more information.

$wgCodeMirrorDefaultPreferencesCode

Same as $wgCodeMirrorDefaultPreferences but applies to "code"; That is, any CodeMirror mode other than "mediawiki" (wikitext).

The default preferences are set on either wikitext ($wgCodeMirrorDefaultPreferences) or all other "modes" such as JavaScript, CSS and JSON ($wgCodeMirrorDefaultPreferencesCode). For each feature, use true or false to enable or disable it entirely, or provide an array containing namespace IDs (integers) indicating where the feature should be enabled by default.

Note this configuration setting only applies to the default value. Users can override the defaults in their own CodeMirror preferences. When changing a preference, it will apply only to either wikitext (the mediawiki mode) or non-wikitext (all other modes).

# Limit highlighting of whitespace to non-wikitext
$wgCodeMirrorDefaultPreferences[ 'whitespace' ] = false;
$wgCodeMirrorDefaultPreferencesCode[ 'whitespace' ] = true;
# Limit autocompletion to templates and code
$wgCodeMirrorDefaultPreferences[ 'autocomplete' ] = [ NS_TEMPLATE ];
$wgCodeMirrorDefaultPreferencesCode[ 'autocomplete' ] = true;

• Erfordert nicht mehr die Verwendung von WikiEditor .
• Support for Scribunto, JavaScript, CSS, JSON, and Vue as an alternative to CodeEditor .
• Significant performance improvements.
• Right-to-left support (T170001) with bidi isolation. (T358804)
• Code folding . (T30684)
• Autocompletion . (T95100)
• Linting . (T381577)
• Quickly open links with modifier key + click . (T303392)
• Improved search panel. (T371436)
• CodeMirror preferences . (T359498)
• Syntax highlighting in DiscussionTools . (T407918)
• Syntax highlighting on read-only pages. (T301615)
• Syntax highlighting at Special:Upload. (T170246)
• Syntax highlighting at Special:ExpandTemplates. (T384148)
• Syntax highlighting at Special:AbuseFilter. (T399673)
• Syntax highlighting at Special:SecurePoll/translate (T397871)
• Robust JavaScript API for integration with extensions, gadgets, and user scripts.

• The ResourceLoader modules have changed. See the migration guide.
• The ext.CodeMirror.switch hook has been deprecated. Use ext.CodeMirror.toggle instead.
• The .cm-mw-mnemonic CSS class has been renamed to .cm-mw-html-entity.
• The .cm-mw-doubleUnderscore CSS class has been renamed to .cm-mw-double-underscore.
• The .cm-mw-template-name-mnemonic class has been removed. Use .cm-mw-template-ground.cm-html-entity instead.
• The .cm-mw-apostrophes-bold and .cm-mw-apostrophes-italic CSS classes have been removed. Use .cm-mw-apostrophes instead.
• Line-level styling for <nowiki>, <pre>, or any tag without an associated TagMode has been removed (T351686).
• Mixed languages within wikitext are not yet supported (T357480).
• The browser's native search functionality (using Ctrl+F) has been replaced with search functionality built into CodeMirror. This is necessary to maintain performance (T303664).

Configure $wgCodeMirrorDefaultPreferences instead.

Ensure you're using the correct ResourceLoader modules. Because CodeMirror 6 no longer relies on WikiEditor, there are some naming and behaviourial changes from the CodeMirror 5 counterparts:

Some module names are shown without the ext.CodeMirror prefix for brevity; replace the '...' when using.

The CodeMirror global has been removed entirely. For example, CodeMirror.fromTextArea( myTextarea ) will no longer work. Instead, first load the desired ResourceLoader modules, instantiate a CodeMirror object, and call the initialize() method.

If your script relies on the ext.CodeMirror.switch hook to change the way it interacts with the editor, you'll need to use ext.CodeMirror.toggle instead, or alternatively listen to an event. See the JavaScript integration section for more information.

The .CodeMirror element no longer exists. Use .cm-editor instead for the entire CodeMirror DOM, or .cm-content for the inner content (doesn't include the search panel, for example).

• Extension:VisualEditor – uses CodeEditor modules to power syntax highlighting for other extensions integrating with VisualEditor (T400014):
  • Erweiterung:Kartographer
  • Erweiterung:Math
  • Erweiterung:Score
  • Erweiterung:SyntaxHighlight
  • Extension:TabberNeue
• Erweiterung:WikiLambda – the ext.wikilambda.app module relies on CodeEditor (T400015).

// Desired modes that should use CodeMirror (mediawiki, i.e. wikitext, is enabled by default)
$wgCodeMirrorEnabledModes['javascript'] = true;
$wgCodeMirrorEnabledModes['json'] = true;
$wgCodeMirrorEnabledModes['css'] = true;
$wgCodeMirrorEnabledModes['lua'] = true;
$wgCodeMirrorEnabledModes['vue'] = true;
// If you're also using CodeEditor, disable the same modes there:
$wgCodeEditorEnabledModes['javascript'] = false;
$wgCodeEditorEnabledModes['json'] = false;
$wgCodeEditorEnabledModes['css'] = false;
$wgCodeEditorEnabledModes['lua'] = false;
$wgCodeEditorEnabledModes['vue'] = false;
// AbuseFilter (note that there is no corresponding "mode" that needs to be set above)
$wgAbuseFilterUseCodeEditor = false;
$wgAbuseFilterUseCodeMirror = true;
// Gadgets (for editing Gadget definition JSON pages)
$wgGadgetsDefinitionsUseCodeEditor = false;
$wgGadgetsDefinitionsUseCodeMirror = true;
// JsonConfig
$wgJsonConfigUseCodeEditor = false;
$wgJsonConfigUseCodeMirror = true;
// Scribunto (for editing Module pages that use the "lua" mode)
$wgScribuntoUseCodeEditor = false;
$wgScribuntoUseCodeMirror = true;
// TemplateStyles
$wgTemplateStylesUseCodeEditor = false;
$wgTemplateStylesUseCodeMirror = true;
// UploadWizard (for editing Campaign JSON pages)
$wgUploadWizardUseCodeEditor = false;
$wgUploadWizardUseCodeMirror = true;

If you simply want CodeMirror to recognize a tag that is added by an extension, you can do so using the CodeMirrorTagModes extension attribute . For example, to register the tag ‎<foo> as something containing wikitext, you would add the following to extension.json:

{
"attributes":{
"CodeMirror":{
"TagModes":[
"foo":"mediawiki"
]
}
}
}

Registering a tag so that CodeMirror treats the contents as something other than wikitext is currently not supported (T357480). If a tag is not registered, CodeMirror will highlight the contents as non-wikitext in the same way it highlights the contents of a ‎<nowiki>...‎</nowiki> tag.

class CodeMirrorHooks implements CodeMirrorGetModeHook {
	public function onCodeMirrorGetMode(Title $title, ?string &$mode, string $model ): bool {
		// Logic to determine if CodeMirror should be used
		if ( $title->hasContentModel( 'JsonLikeContentModel' ) ) {
			$mode = 'json';
			return false;
		}
		return true;
	}
}

"Hooks":{
"CodeMirrorGetMode":"codemirror"
},
"HookHandlers":{
"codemirror":{
"class":"MediaWiki\\Extension\\MyExtension\\CodeMirrorHooks"
}
}

CodeMirrorPluginModules is an extension attribute that allows side-loading a module with CodeMirror. This unconditionally loads the module whenever the ext.CodeMirror module is loaded.

extension.json:

{
"attributes":{
"CodeMirror":{
"PluginModules":[
"ext.MyExtension.CodeMirror"
]
}
}
}

The CodeMirror editor is not an actual textarea, but a contenteditable. Usually developers need to ensure their code works with both given that CodeMirror can be toggled off.

For detecting changes to the document, using an event or a hook is likely the simplest. For reading and making changes, jQuery.textSelection may be convenient.

If you simply want to fetch or make changes to the document text, jQuery.textSelection is the easiest and most reliable means to do so. Usage of jQuery.textSelection on the textarea is bubbled up to CodeMirror, so you don't need to have any knowledge of whether CodeMirror is enabled:

const$textarea=$('#wpTextbox1')
constcontent=$textarea.textSelection('getContents');
// Append "Foobar" to the content.
$textarea.textSelection('setContents',content+'\nFoobar');

The CodeMirror extension provides a number of ResourceLoader modules for use by user scripts, gadgets, and extensions. To make use of CodeMirror, you'll need at minimum the ext.CodeMirror module, along with the desired "mode".

Modes can be unpacked from the ResourceLoader modules, using an exported method with the same name as the mode. For MediaWiki wikitext, you'd use ext.CodeMirror.mode.mediawiki, and for JavaScript, JSON, CSS, Vue and Lua, you'd use ext.CodeMirror.modes:

constrequire=awaitmw.loader.using(['ext.CodeMirror','ext.CodeMirror.mode.mediawiki']);
constCodeMirror=require('ext.CodeMirror');
const{mediawiki}=require('ext.CodeMirror.mode.mediawiki');
constcm=newCodeMirror(myTextarea,mediawiki());
cm.initialize();

constrequire=awaitmw.loader.using([
'ext.wikiEditor',
'ext.CodeMirror.WikiEditor',
'ext.CodeMirror.mode.mediawiki'
]);
consttextarea=document.getElementById('wpTextbox1');
mw.addWikiEditor($(textarea));
constCodeMirrorWikiEditor=require('ext.CodeMirror.WikiEditor');
const{mediawiki}=require('ext.CodeMirror.mode.mediawiki');
constcmWe=newCodeMirrorWikiEditor(textarea,mediawiki());
cmWe.mode='mediawiki';
cmWe.initialize();

constrequire=awaitmw.loader.using(['ext.CodeMirror','ext.CodeMirror.modes']);
constCodeMirror=require('ext.CodeMirror');
const{javascript}=require('ext.CodeMirror.modes');
constcm=newCodeMirror(myTextarea,javascript());
cm.initialize();

• blur
• focus
• keyup
• keydown ^[9]
• scroll

Using these events, you can integrate with CodeMirror using the same code as the original textarea:

myTextarea.addEventListener('keyup',(event)=>{
console.log(event.key);
});

You can import the ext.CodeMirror.lib module to get access to the upstream CodeMirror API. With this you can provide your own Extension when instantiating a CodeMirror or CodeMirrorWikiEditor object.

constrequire=awaitmw.loader.using(['ext.CodeMirror','ext.CodeMirror.mode.mediawiki']);
constCodeMirror=require('ext.CodeMirror');
const{mediawiki}=require('ext.CodeMirror.mode.mediawiki');
// ext.CodeMirror.lib is a dependency of ext.CodeMirror, so it's already loaded at this point
const{EditorView}=require('ext.CodeMirror.lib');
constmyExtension=EditorView.updateListener.of((/** @type {ViewUpdate} */update)=>{
if(update.docChanged){
// do something
console.log(update.changes);
}
});
constcm=newCodeMirror(myTextarea,mediawiki());
cm.initialize([cm.defaultExtensions,myExtension]);

Or if you need to interact with an existing CodeMirror instance:

// Ensure CodeMirror is initialized first
mw.hook('ext.CodeMirror.ready').add((cm)=>{
const{EditorView}=require('ext.CodeMirror.lib');
constmyExtension=EditorView.updateListener.of((/** @type {ViewUpdate} */update)=>{
if(update.docChanged){
// do something
console.log(update.changes);
}
});
cm.applyExtension(myExtension);
});

mw.hook('ext.CodeMirror.input').add((update)=>{
// Print the ChangeSet to the console
console.log(update.changes.toJSON());
});

• November 2024 – The CodeMirror 6 version of the extension was introduced as a beta feature.
• 21. April 2026 – After two years of development and testing, "Improved Syntax Highlighting" (CodeMirror 6) was officially promoted out of beta. This update brought advanced features like code folding, autocompletion, and linting to all users of the standard syntax highlighter, while significantly improving wikitext readability.^[10]

• User:Remember the dot/Syntax highlighter
• Extension:VisualEditor
• Erweiterung:WikiEditor
• Erweiterung:CodeEditor
• EditorAPIs: A library that presents a common interface for wikitext editing. Support for the legacy editor, VE, 2017 source editor and CodeMirror 5/6.
• c:Category:MediaWiki extension CodeMirror

• Stable extensions/de
• User interface extensions/de
• EditPage::showEditForm:initial extensions/de
• EditPage::showReadOnlyForm:initial extensions/de
• GetPreferences extensions/de
• SpecialPageAfterExecute extensions/de
• UploadForm:initial extensions/de
• GPL licensed extensions/de
• Extensions in Wikimedia version control/de
• All extensions/de
• Extensions used on Wikimedia/de
• Extensions included in Canasta/de
• Extensions included in Fandom/de
• Extensions included in Miraheze/de
• Extensions included in MyWikis/de
• Extensions included in ProWiki/de
• Extensions included in Telepedia/de
• Extensions included in Weird Gloop/de
• Extensions included in wiki.gg/de
• Syntax highlighting extensions/de