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:
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).
Der Text im Bearbeitungsfeld wird bei der Bearbeitung mit entsprechendem Markup dargestellt.
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.
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:

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:


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 | ||||||||||||||||
| ||||||||||||||||
Die Nummerierung ist an das Werkzeug gekoppelt und steht nicht für andere Editoren zur Verfügung.
Die nachstehend aufgelisteten Farben, Hervorhebungen und sonstigen Dekorationen werden zur Unterscheidung verwendet.
| 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]] |
| 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/ |
| 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" |
| ö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.) |
− |
| (bislang keine individuellen Selektoren definiert) | |
; am Zeilenbeginn(Definitionsterm) |
; |
| Farbwerte in Attributen | |
Es gibt für angemeldete Konten drei Möglichkeiten, die Darstellung an eigene Wünsche anzupassen:
Öffne eine Seite zur Bearbeitung und wähle in der Werkzeugleiste die Schaltfläche aus, falls diese nicht bereits aktiviert
Syntax ist.
Syntax ![]()
Klicke das
Zahnrad an. Alternativ können die Einstellungen auch über die Tastenkombination Ctrl + Shift + , aufgerufen werden. Es wird nun ein Dialogfeld mit mehreren Optionen zur Auswahl angeboten.
Erscheinungsbild
Editor-Design
| Standard |
Kompakte Suchfelder verwenden
Zeilen
Zeilennummern anzeigen Zeilen umbrechen
Aktive Zeile hervorheben
Zeichen
Sonderzeichen anzeigen Leerzeichen hervorheben
Nachfolgende Leerzeichen hervorheben
Code-Unterstützung
Autovervollständigung aktivieren Code-Faltung aktivieren
Klammernübereinstimmung aktivieren
Automatisch schließende Klammern aktivieren
Automatisches Schließen von HTML-Tags aktivieren
Lint auf den Code anwenden
Einzelnachweise
Den Inhalt von <ref>-Tags markieren
Alle <ref>-Tags standardmäßig einklappen
Andere
Den Fokus zunächst auf den Editor legen
Öffnen von Links per Hilfstaste + Klick
Das CSS aller Dekorationen kann nach privaten Vorstellungen umdefiniert werden. In den nachstehenden Abschnitten werden hierzu Beispiele aufgeführt.
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.
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.
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.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|
| #D8FFD8 | #FFFFD0 | #B0FFFF | #FFE4E1 | #ADFF2F | #F5DEB3 | #FFB0FF | #B0FFB0 |
.cm-mw-template-ground,
.cm-mw-template-ext-ground,
.cm-mw-template-ext2-ground,
.cm-mw-template-ext3-ground {
background-color: #D8FFD8;
}
.cm-mw-template2-ground,
.cm-mw-template2-ext-ground,
.cm-mw-template2-ext2-ground,
.cm-mw-template2-ext3-ground {
background-color: #FFFFD0;
}
.cm-mw-template3-ground,
.cm-mw-template3-ext-ground,
.cm-mw-template3-ext2-ground,
.cm-mw-template3-ext3-ground {
background-color: #B0FFFF;
}
.cm-mw-template4-ground,
.cm-mw-template4-ext-ground,
.cm-mw-template4-ext2-ground,
.cm-mw-template4-ext3-ground {
background-color: #FFE4E1;
}
.cm-mw-template5-ground,
.cm-mw-template5-ext-ground,
.cm-mw-template5-ext2-ground,
.cm-mw-template5-ext3-ground {
background-color: #ADFF2F;
}
.cm-mw-template6-ground,
.cm-mw-template6-ext-ground,
.cm-mw-template6-ext2-ground,
.cm-mw-template6-ext3-ground {
background-color: #F5DEB3;
}
.cm-mw-template7-ground,
.cm-mw-template7-ext-ground,
.cm-mw-template7-ext2-ground,
.cm-mw-template7-ext3-ground {
background-color: #FFB0FF;
}
.cm-mw-template8-ground,
.cm-mw-template8-ext-ground,
.cm-mw-template8-ext2-ground,
.cm-mw-template8-ext3-ground {
background-color: #B0FFB0;
}
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.
Wer zuvor bereits an die Farbgebung der Benutzerskripte
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 */
}
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.
Extern