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.
Funktionalität
[Quelltext bearbeiten]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
/
- 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.
Nachteile
[Quelltext bearbeiten]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 hervorheben
[Quelltext bearbeiten]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
[Quelltext bearbeiten]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.
Markup
[Quelltext bearbeiten]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]] |
| 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 | |
Persönliche Konfiguration
[Quelltext bearbeiten]Alle Dekorationen können nach privaten Vorstellungen umdefiniert werden.
Syntaxfehler
[Quelltext bearbeiten]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
[Quelltext bearbeiten]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
[Quelltext bearbeiten]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 Benutzerskripte
[Quelltext bearbeiten]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 */
}
Ausblick
[Quelltext bearbeiten]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
[Quelltext bearbeiten]Extern
- codemirror.net (englisch)
- User manual and reference guide
- Language modes – Andere Programmiersprachen usw.