Wikipedia:Technik/Text/Edit/CodeMirror

CodeMirror – Syntaxhervorhebung für Wikitext


CodeMirror ist eine Möglichkeit, bei der klassischen Bearbeitung von Wikitext eine Syntaxhervorhebung einzuschalten.

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.

Solltest du bereits ein anderes Skript aktiviert haben, dass 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ätBearbeiten

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 = grau   und CodeMirror aktiv = schwarz mit einer Umrandung  ; 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.

NachteileBearbeiten

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[1]
  • kein Wechsel zwischen den Elementen des Gesamtformulars mittels Tab

Klammerpaare hervorhebenBearbeiten

 
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)

ZeilennummerierungBearbeiten

 
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
                  Erweitert   Sonderzeichen   Hilfe       
 Überschrift  
Format                 Einfügen          
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.

MarkupBearbeiten

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]]
[[foo#Abschnitt|Beschriftung]]

Anklickbare Wikilinks foo bar
Externe Links
Komplexe Beispiele

http://example.org/
[https://www.example.org/]
[https://www.example.org/ Beschriftung]

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 KonfigurationBearbeiten

Alle Dekorationen können nach privaten Vorstellungen umdefiniert werden.

SyntaxfehlerBearbeiten

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 BereichBearbeiten

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 VorlagenBearbeiten

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.

Anpassung an bisherige BenutzerskripteBearbeiten

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 &amp; &nbsp; ... */
.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 */
}

AusblickBearbeiten

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 InformationenBearbeiten

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)

Extern

AnmerkungenBearbeiten

  1. phab:T95104