Wikipedia:Technik/Text/Edit/CodeMirror

WP Bearbeitung Texteditor Syntax Syntaxhervorhebung von Wikitext im Editor

CodeMirror – Syntaxhervorhebung für Wiki-Seiten

---

CodeMirror ist eine Möglichkeit, bei der klassischen Bearbeitung von Wikitext eine Syntaxhervorhebung einzuschalten; ebenso für Lua, CSS, JavaScript sowie JSON.

Das ist einsetzbar sowohl bei:

• Einfacher, reiner Quelltextbearbeitung,
• kombiniert mit VisualEditor-Quelltextbearbeitung.

Seit August 2017 wurde dies als Beta-Funktion angeboten, seit Mitte Juni 2018 wird es für alle Bearbeiter bereitgestellt. Im April 2026 wurde eine neue Version aktiviert (phab:T419332).

Solltest du bereits ein anderes Skript aktiviert haben, das die Syntax hervorhebt, wie beispielsweise Benutzer:Schnark/js/syntaxhighlight, dieses bitte deaktivieren, da es zu unschönen Darstellungsfehlern innerhalb des Bearbeitungsfensters bis hin zur Verdoppelung oder Unsichtbarkeit des Fensterinhalts führen kann.

Funktionalität

Der Text im Bearbeitungsfeld wird bei der Bearbeitung mit entsprechendem Markup dargestellt.

• In die gängigen Werkzeugleisten für die Quelltextbearbeitung (einschließlich VisualEditor) wird ein Button eingefügt, der es erlaubt, den Modus ab- und wieder einzuschalten.
• Es handelt sich um ein diagonal nach links unten zeigendes Markierstiftsymbol; CodeMirror abgeschaltet = schwarz Syntax und CodeMirror aktiv = blau Syntax ; auch: /
• Der letzte Status wirkt sich auch auf alle parallel geöffneten Fenster aus, sobald die Seite neu aufgebaut wird.

Tastendrücke, Einfügen, Löschen wird wie gewohnt an der Cursorposition wirksam; Kopieren und Einfügen ist möglich.

Im April 2026 wurde eine spezielle Fehleranalyse für den Quelltext aktiviert, siehe dazu die Unterseite Lint.

Nachteile

Je nach Größe der Seite, Leistungsfähigkeit des Rechners und möglicherweise Art des Browsers können die Reaktionen sehr träge ausfallen; womöglich ganz ausbleiben.

Es gibt folgende Einschränkungen gegenüber der regulären Quelltext-Bearbeitung:

• Kein „Rückgängig“ (Undo) per Kontextmenü (Strg+Z funktioniert)
• keine Rechtschreibprüfung
• kein Wechsel zwischen den Elementen des Gesamtformulars mittels Tab

Klammerpaare hervorheben

Animiertes Beispiel

Bei aktivierter Syntaxhervorhebung können seit Ende Januar 2021 bei der Bearbeitung des Wikitextes zusammengehörende Klammerpaare gefunden werden. Dafür wird der Cursor direkt hinter einer Klammer positioniert. Dies kann hinter der öffnenden oder schließenden Klammer geschehen. Angezeigt werden die zugehörigen Klammerelemente durch eine hellgraue Hinterlegung. Dies erleichtert die Suche nach fehlenden Klammern, beispielsweise bei der Erstellung von Vorlagensyntax, es kann auch ein zugehöriges Tabellenende gefunden werden. Hier muss der Cursor lediglich in der selben Zeile stehen, in der sich die öffnende {| class="wikitable" oder schließende |} Syntax befindet.

Beispiele:

• [http://example.org/ Text]
• {{Literatur|Titel={{lang|fr|J’accuse…!}}}}
• {{{foo|bar}}} – {{{foo|bar}}} – {{{foo|bar}}}
• (Text in einfachen Klammern)

Zeilennummerierung

Wikitexteditor 2017 auf Basis des Visual Editors

Texteditor mit aktivierten CodeMirror

Insbesondere bei der Vorlagenerstellung kann es vorteilhaft sein, die Inhalte einzelner Zeilen besser erkennen zu können. Der CodeMirror bietet seit Mitte April 2021 daher bei der Bearbeitung einer Seite am linken Rand eine Zeilennummerierung an. Besteht eine Seite aus mehreren Abschnitten und es wird nur ein einzelner Abschnitt bearbeitet, so beginnt die Zählung immer mit 1, es erfolgt dann also keine fortlaufende Zählung der Gesamtzeilen.

Es sollte beachtet werden, dass die in einem Difflink angezeigte Zeilennummer erheblich von der Nummerierung im aktuellen Bearbeitungsfeld abweichen kann.

Simulation

Zeilennummer in der Vergleichsansicht
Aktuelle Version		Dein Text
Zeile 115:		Zeile 115:
	Unveränderter Text		Unveränderter Text
-	* [http://www.igs-ff.de/ Website der Integrierten Gesamtschule Franzsches Feld] igs-ff.de.de	+	* [http://www.igsff.de/ Website der Integrierten Gesamtschule Franzsches Feld] igsff.de.de
	Unveränderter Text		Unveränderter Text
Nummerierung im Bearbeitungsfenster
Syntax Erweitert Sonderzeichen Hilfe  Vorschau   001 == Weblinks == 002 Unveränderter Text 003 * [http://www.igsff.de/ Website der Integrierten Gesamtschule Franzsches Feld] igsff.de.de 004 Unveränderter Text 005

Die Nummerierung ist an das Werkzeug gekoppelt und steht nicht für andere Editoren zur Verfügung.

Markup

Die nachstehend aufgelisteten Farben, Hervorhebungen und sonstigen Dekorationen werden zur Unterscheidung verwendet.

• Sie sind einzeln konfigurierbar.

Element	CodeMirror
Elementar
Festes Format (Leerzeichen am Zeilenbeginn)	foo bar
Aufzählung (Sternchen * oder # am Zeilenbeginn)	* foo bar # foo bar
Signatur	∼∼∼∼ ----
Trennlinie
Einrückung (Doppelpunkte)	::: foo bar
HTML-Entity	&
HTML-Kommentar	<-- Kommentar -->
Fettschrift	'''Fett''' ''Kursiv''
Kursivschrift
Überschriften
Überschrift 1	= Überschrift 1=
Überschrift 2	== Überschrift 2 ==
Überschrift 3	=== Überschrift 3 ===
Überschrift 4	==== Überschrift 4 ====
Überschrift 5	===== Überschrift 5 =====
Überschrift 6	====== Überschrift 6 ======
Gleichheitszeichen	==
Vorlageneinbindung
Komplexes Beispiel	{{Literatur|Titel=Das Leben, das Universum und der ganze Rest}}
Name der Vorlage	Literatur
Parametername	Titel=
Sonstige Inhalte	Das Leben, das Universum und der ganze Rest
Pipe-Symbol	|
öffnende / schließende Klammern	{{ }}
Verschachtelte Vorlagen (Stile sind mit Nummer der Verschachtelungstiefe separat adressierbar)	{{Literatur|Titel={{lang|fr|J’accuse…!}}}}
Vorlagenparameter
Komplexes Beispiel	{{{foo|bar}}}
Parametername	foo
Rückfallwert	bar
öffnende / schließende Klammern	{{{ }}}
Pipe-Symbol	|
Parserfunktionen
Komplexes Beispiel	{{#invoke:Wlink|failsafe}}
Funktionsname	#invoke PAGENAME
Funktionsparameter	Wlink failsafe
öffnende / schließende Klammern	{{ }}
Trennzeichen	:
MediaWiki-Erweiterungen
Elemente der MediaWiki-Erweiterungen können eigene Stile definieren und verwenden. Der Inhalt von <ref>-Elementen wird wieder als Wikitext aufgefasst.
Komplexes Beispiel	<poem style="padding: 1em;">Zeichenkette Ganze Zeile Zeichenkette</poem>
Vollständige (feste) Zeile zwischen Tags	Ganze Zeile
Text zwischen Tags	Zeichenkette … Zeichenkette
Name des Tags	poem
öffnende / schließende Klammern	< >
Attributzuweisung (vollständig)	style="padding: 1em;"
Vorformatierter Text	<pre>foo bar</pre>
nowiki-Text	<nowiki>foo bar</nowiki>
Tags für HTML
Komplexes Beispiel	<span style="foo">foo bar</span>
Name des HTML-Tags	span
öffnende / schließende Klammern	< >
Attributzuweisung (vollständig)	style="foo"
Wikilinks
Komplexe Beispiele	[[foo bar]] [[foo#Abschnitt|Beschriftung]]
Verlinkte Wikiseiten	foo bar
Anklickbare Wikilinks	foo bar
#	#
Fragmentbezeichner (nach #)	Abschnitt
öffnende / schließende Klammern	[[ ]]
Pipe-Symbol	|
Linktext	Beschriftung
Externe Links
Komplexe Beispiele	http://example.org/ [https://www.example.org/] [https://www.example.org/ Beschriftung]
Protokoll einer offenen URL	http://
Protokoll eines geklammerten Weblinks	https://
Host, Pfad usw. einer offenen URL	example.org/
Host, Pfad usw. eines geklammerten Weblinks	www.example.org/
Linktext	Beschriftung
öffnende / schließende Klammern	[ ]
Tabellen
Komplexes Beispiel	{| class="wikitable" |- ! Überschrift !! Überschrift |- | Zelle || Zelle |}
öffnende / schließende Klammern mit Pipe-Symbol	{| |}
Trennung von Zeilen und Spalten	| |- !
Attributzuweisung (vollständig)	class="wikitable"
Spalten- bzw. Zeilen-Überschrift	! Überschrift
Sonstige
Magische Wörter	__TOC__
<math> (behandelt wie Erweiterungen)	<math>\sum_{i=0}^\infty 2^{-i}</math>
<syntaxhighlight> (behandelt wie Erweiterungen)	<syntaxhighlight>...</syntaxhighlight>
Kategorie (behandelt als Wikilink)	[[Kategorie:foo bar]]
Medieneinbindung (behandelt als Wikilink)	[[Datei:OOjs UI icon bold-f.svg]]
Mehrdeutige Zeichenanzeige (nbsp thinsp ndash mdash minus etc.)	&nbsp; &minus;
(bislang keine individuellen Selektoren definiert)
; am Zeilenbeginn (Definitionsterm)	;
Farbwerte in Attributen

Persönliche Konfiguration

Es gibt für angemeldete Konten drei Möglichkeiten, die Darstellung an eigene Wünsche anzupassen:

1. Das CSS aller Dekorationen kann nach privaten Vorstellungen umdefiniert werden; siehe folgenden Abschnitt.
2. In den allgeminen Einstellungen kann ausgewählt werden, für welche Inhaltsmodelle CodeMirror aktiviert werden soll, also für Wikitext und für andere Codes gesondert.
3. Im Einstellungsmenü werden unterschiedliche Optionen angeboten, die für dieses Konto dauerhaft hinterlegt werden.

CSS-Konfiguration

Das CSS aller Dekorationen kann nach privaten Vorstellungen umdefiniert werden. In den nachstehenden Abschnitten werden hierzu Beispiele aufgeführt.

Syntaxfehler

Fehler wie etwa ein unerwartetes schließendes Tag werden in roter Schriftfarbe angezeigt. Nachstehend etwas knalliger: Gelbe Fettschrift auf rotem Grund.

.cm-error {
   color:             #FFFF00 ! important;
   background-color:  #FF0000 ! important;
   font-weight:       bold;
}

Die Zuweisung muss ggf. nach allen anderen privaten erfolgen, damit die Hintergrundfarbe wirksam wird. Gleichwohl wird die spezielle CSS-Definition des Werkzeugs womöglich erst nachträglich geladen, und überschreibt dann teilweise wieder die private Spezifikation.

Ausgewählter Bereich

Die vorgegebene Markierung der Selektierung ist recht unscheinbar aufgefallen. Nachstehend beispielsweise in weißer Schrift auf blauem Grund.

.CodeMirror-selected {
   background-color: #0099EE ! important;
   color:            #FFFFFF ! important;
}

Die Zuweisung muss ggf. nach allen anderen privaten erfolgen, damit die Hintergrundfarbe wirksam wird. Gleichwohl wird die spezielle CSS-Definition des Werkzeugs womöglich erst nachträglich geladen, und überschreibt dann teilweise wieder die private Spezifikation.

Verschachtelte Vorlagen

Um bei ineinander verschachtelten Vorlagen die Zuordnung geschweifter Klammern und verschiedener Bereiche besser überblicken zu können, kann mit nachstehenden CSS-Definitionen für bis zu acht Ebenen an Vorlageneinbindungen der Wirkungsbereich in kontrastierenden Farben hinterlegt werden.

Wikipedia:Technik/Text/Edit/CodeMirror/templateNestingWikipedia:Technik/Text/Edit/CodeMirror/templateNestingWikipedia:Technik/Text/Edit/CodeMirror/templateNestingWikipedia:Technik/Text/Edit/CodeMirror/templateNestingWikipedia:Technik/Text/Edit/CodeMirror/templateNestingWikipedia:Technik/Text/Edit/CodeMirror/templateNestingWikipedia:Technik/Text/Edit/CodeMirror/templateNestingWikipedia:Technik/Text/Edit/CodeMirror/templateNesting

1	2	3	4	5	6	7	8

[[:Wikipedia:Technik/Text/Edit/CodeMirror/templateNesting]]
[[:Wikipedia:Technik/Text/Edit/CodeMirror/templateNesting]]
[[:Wikipedia:Technik/Text/Edit/CodeMirror/templateNesting]]
[[:Wikipedia:Technik/Text/Edit/CodeMirror/templateNesting]]
[[:Wikipedia:Technik/Text/Edit/CodeMirror/templateNesting]]
[[:Wikipedia:Technik/Text/Edit/CodeMirror/templateNesting]]
[[:Wikipedia:Technik/Text/Edit/CodeMirror/templateNesting]]
[[:Wikipedia:Technik/Text/Edit/CodeMirror/templateNesting]]

Die Hinterlegung führt allerdings auch dazu, dass die Markierung ausgewählter Bereiche nicht mehr sichtbar ist; diese müsste ggf. nachträglich in der Kaskade erneut vereinbart werden.

Alternativ kann statt mit der Hintergrundfarbe background-color: # die Rahmenfarbe gesetzt werden, wodurch Hintergrundfarben besser durchscheinen, die dafür weniger auffallend sind und mehrzeilig wenig geglückt wirken: border: 1px solid #Farbwert. Statt des vollen Rahmens kann auch die Unterstreichung (was mit dem Namen der Vorlage kollidiert) oder Überstreichung deklariert werden.

Anpassung an bisherige Benutzerskripte

Wer zuvor bereits an die Farbgebung der Benutzerskripte

• Schnarks Syntaxhighlighter oder
• Rememberthedots Syntaxhighlighter

gewöhnt war, kann über diese Konfiguration die Farben anpassen.

.cm-mw-pagename {                              /* Seitenname */
	font-weight: normal; }                     /* nicht fett */

.cm-mw-skipformatting {                         /* Leerzeichen am Zeilenanfang, vorformatierter Text */
	background-color: #E8E8E8;
}
.cm-mw-list,                                    /* Listenelemente Aufzählungszeichen (*) und (#) */
.cm-mw-indenting,                               /* Einrückung (:) */
.cm-mw-mnemonic,                                /* HTML-Code &   ... */
.cm-mw-comment {                                /* Auskommentierter Text <!-- ... --> */
	background-color:#E6FFE6; color:#000000;    /* Hintergrund hellgrün, Textfarbe schwarz **/
}
.cm-mw-signature {                              /* Kürzel für Signatur und Zeitangabe */
	background-color:#FFCC66; color:#000000;    /* Hintergrund gelborange, Textfarbe schwarz */
}
.cm-mw-hr,                                      /* Kürzel für horizontele Linie */
.cm-mw-apostrophes-bold,                        /* Fettschriftformat ''' */
.cm-mw-apostrophes-italic {                     /* Kursivschriftformat '' */
	background-color:#E5E5E5; color:#000000; font-weight: normal; font-style: normal;  /* Nur für die Zeichen nicht der Inhalt // Hintergrund hellgrau, Textfarbe schwarz */
}

pre.cm-mw-section-1,                            /* Überschriftenebenen 1 bis 6 */
pre.cm-mw-section-2,
pre.cm-mw-section-3,
pre.cm-mw-section-4,
pre.cm-mw-section-5,
pre.cm-mw-section-6 {                           /* nicht fett, nicht unterstrichen und nicht groß */
	font-size: 1em; line-height:1.1em; font-weight: normal; background-color:#E5E5E5; text-decoration: none;
}

.cm-mw-section-header {                         /* Überschriftenkürzel (==) */
	background-color:#E5E5E5; color:#000000;    /* Hintergrund hellgrau, Textfarbe schwarz */
}
.cm-mw-template,                                /* Vorlageninhalt */
.cm-mw-template-name,                           /* Vorlagenname */
.cm-mw-template-argument-name,                  /* Parametername */
.cm-mw-template-delimiter,                      /* Trennzeichen (|) */
.cm-mw-template-bracket {                       /* Vorlagenklammern {{…}} */
   color:#000000; font-weight:normal; text-decoration: none; /* nicht fett, nicht unterstrichen, Textfarbe schwarz */
}

.cm-mw-template-ground,                         /* Hintergrundfarbe Ebene 1 */
.cm-mw-template-ext-ground,                     /* Eingebettete Vorlage Ebene 1 */
.cm-mw-template-ext2-ground,                    /* Eingebettete Vorlage Ebene 2 */
.cm-mw-template-ext3-ground {                   /* Eingebettete Vorlage Ebene 3 */
   background-color: #FFFFCC;                   /* hellgelb */
}

.cm-mw-templatevariable,                        /* Variableninhalt */
.cm-mw-templatevariable-name,                   /* Variablenname */
.cm-mw-templatevariable-bracket,                /* Variablenklapper {{{…}}} */
.cm-mw-templatevariable-delimiter {             /* Variablentrenner Pipe (|) */
	background-color:#FFCC66; color:#000000; font-weight: normal; /* Hintergrund gelborange, Textfarbe schwarz, nicht fett */
}

.cm-mw-parserfunction,                          /* Parserfunktionen */
.cm-mw-parserfunction-name,                     /* Funktionsbezeichnung (#…) */
.cm-mw-parserfunction-bracket,                  /* Klammern {{…}} */
.cm-mw-parserfunction-delimiter {               /* Trennzeichen (:) */
	background-color:#FFFFCC; color:#000000; font-weight:normal; /* Hintergrund hellgelb, Textfarbe schwarz, nicht fett */
}

pre.cm-mw-tag-pre,                              /* pre, nowiki und ref Tags wie exttag behandeln */
pre.cm-mw-tag-nowiki,
pre.cm-mw-tag-ref,
.cm-mw-tag-pre,
.cm-mw-tag-nowiki,
.cm-mw-tag-ref,
pre.cm-mw-exttag,
.cm-mw-exttag,                                  /* Inhaltsbereich zwischen den Erweiterungstags */
.cm-mw-exttag-name,                             /* Tagname, wie poem, math, gallery */
.cm-mw-exttag-bracket,                          /* Klammer für Tags (<>) */
.cm-mw-exttag-attribute {                       /* Attribute class und style-Zuweisungen */
	background-color:#FFE6FF; color:#000000; font-weight:normal; /* Hintergrund rosarot, Textfarbe schwarz, nicht fett */
}

pre.cm-mw-htmltag,
.cm-mw-htmltag,                                 /* Inhaltsbereich html-Tags */
.cm-mw-htmltag-name,                            /* Tagname, wie div, span, small, code */
.cm-mw-htmltag-bracket,                         /* Klammer für Tags (<>) */
.cm-mw-htmltag-attribute {                      /* Attribute class und style-Zuweisungen */
	background-color:#FFE6FF; color:#000000; font-weight:normal; text-decoration: none; /* Hintergrund rosarot (funktioniert noch nicht für den Inhalt), Textfarbe schwarz, nicht fett */
}

.cm-mw-link,                                    /* Inhalt Link */
.cm-mw-link-pagename,                           /* Zielseitenname */
.cm-mw-link-tosection,                          /* Abschnittslinkbezeichnung */
.cm-mw-link-bracket,                            /* Klammer für interne Links [[…]] */
.cm-mw-link-text,                               /* sichtbarer Linktext */
.cm-mw-link-ground,                             /* Hintergrundfarbe Link */
.cm-mw-link-delimiter {                         /* Trennzeichen Pipe (|) */ 
	background-color:#E6E6FF; color:#000000; font-weight:normal; text-decoration: none;
}

.cm-mw-extlink,                                  /* Externer Link www.… */
.cm-mw-free-extlink,
.cm-mw-extlink-protocol,                         /* http */
.cm-mw-free-extlink-protocol,
.cm-mw-extlink-text,                             /* sichtbarer Linktext */
.cm-mw-extlink-bracket {                         /* Klammer für externe Links […] */
	background-color:#E6FFFF; color:#000000; font-weight:normal; text-decoration: none; /* Hintergrund hellblau, Textfarbe schwarz */
}

.cm-mw-table-bracket,                            /* Tabellensyntax Beginn und Ende {| |} */
pre.cm-mw-table-definition,
.cm-mw-table-definition,                         /* Tabellenzuweisung class style */
pre.cm-mw-table-caption,
.cm-mw-table-caption {                           /* Tabellenüberschrift */
	background-color:#FFFFCC; color:#000000; font-weight:normal; text-decoration: none; /* Hintergrund hellgelb, Textfarbe schwarz, nicht fett */
}
pre.cm-mw-table-delimiter,
.cm-mw-table-delimiter {                         /* Trennzeichen Pipe (|) und (!) */ 
	background-color:#FFCC66; color:#000000; font-weight:normal; /* Hintergrund hellgelb, Zeichenfarbe schwarz, nicht fett */
}

Ausblick

Dieses Verzeichnis legt nahe, dass auch andere formale Sprachen analog CodeEditor unterstützt werden könnten, wobei dort aber auch weitere Analysen und dynamische Funktionen hinzukommen.

Weitere Informationen

Meta-Wiki: Wikitext editor syntax highlighting – Technische Informationen (englisch)

MediaWiki: Extension:CodeMirror – Freie Wikisoftware (englisch)

Phabricator – Workboard: #mediawiki-extensions-Codemirror – Fehlermeldungen und Funktionswünsche (englisch)

• ECMI/*
  • Stildefinitionen
• Wikipedia:Technische Wünsche/Topwünsche/Syntaxhervorhebung

Extern

• codemirror.net (englisch)
  • User manual and reference guide
  • Language modes – Andere Programmiersprachen usw.