Benutzer:Schnark/js/syntaxhighlight

Dieses Skript wird nicht mehr gepflegt. Wenn du es verwenden willst, kannst du dies tun, solange es noch funktioniert, danach musst du es entweder selbst weiterpflegen oder einen anderen dafür finden.

Dieses Skript bietet eine Syntaxhervorhebung beim Bearbeiten, vor allem für Wikitext, aber auch für JavaScript, CSS und Lua. Die Syntaxhervorhebung kann unter dem Bearbeiten-Feld aktiviert und deaktiviert werden. Das Skript beruht auf einer genialen Idee von en:User:Remember the dot und seinem Skript mw:User:Remember the dot/Syntax highlighter.js.

So sieht’s aus

Eigenschaften

Im Wikitext werden hervorgehoben:

• Wikilinks und Bildeinbindungen
• externe Links mit und ohne eckigen Klammern
• Überschriften
• fett und kursiv
• Listen
• Vorlagen, Vorlagenparameter
• Tabellen
• Kommentare
• HTML-Tags, Einzelnachweise, <nowiki>, etc.
• HTML-Entitäten (  etc.)
• mit Leerzeichen formatierte <pre>-Bereiche
• horizontale Linien
• magische Worte
• Unterschrift aus Tilden

Die Syntaxhervorhebung für CSS umfasst:

• IDs und Klassen (inklusive Attributselektoren und Pseudoklassen)
• Deklarationen
• Werte innerhalb von Deklarationen
• Strings
• !important
• Kommentare

Bei JavaScript werden hervorgehoben:

• Strings
• reguläre Ausdrücke (keine perfekte Erkennung)
• Arrays
• Kommentare
• Schlüsselworte
• standardmäßig vorhandene globale Werte
• häufig verwendete Funktionen (sehr unvollständig)

Bei in Lua geschriebenen Modulen:

• Strings
• Tabellen
• Kommentare
• Schlüsselworte
• häufig verwendete Funktionen (sehr unvollständig)

Steht der Cursor bei einer Klammer, so wird das Gegenstück hervorgehoben. Für JavaScript, CSS und Lua werden außerdem Ein- und Ausrückungen mittels der Tabulator-Taste ermöglicht. Dabei kann zwischen der Hervorhebung durch den CodeEditor und durch das Skript gewechselt werden, bei Bedarf lässt sich auch eine der beiden Hervorhebungen komplett deaktivieren. Ferner ist es möglich, bestimmte Wörter festzulegen, die immer hervorgehoben werden sollen.

Einschränkungen

• Das Skript setzt einen perfekt standardkonformen Browser voraus, der einen <div> und eine <textarea> mit gleichem Inhalt und gleichem Stil exakt gleich (zumindest was die Positionierung des Textes angeht) darstellt, oder Abweichungen zumindest so klar dokumentiert, dass ein Workaround möglich ist.
  • Firefox wird von mir regelmäßig in verschiedenen Versionen getestet, dort funktioniert das Skript am besten.
  • Google Chrome hat anscheinend Probleme mit exotischen Schriften wie Thai und Tibetisch, wird von mir nicht regelmäßig getestet, sollte aber davon abgesehen funktionieren.
  • Opera ist ungetestet, sollte sich aber in Blink-basierten Versionen wie Google Chrome verhalten. In älteren Versionen deaktiviert sich das Skript selbstständig.
  • Im Internet Explorer ist die Darstellung katastrophal, das Skript deaktiviert sich daher selbstständig.
  • Wer experimentieren will, kann mit dem URL-Parameter ignoreBlacklist=true das Skript auch in eigentlich ausgeschlossenen Browsern starten. Außerdem kann mit debugSyntaxhighlight=true der Debug-Modus aktiviert werden. Hierbei sollte eigentlich nur eine weiße Fläche sichtbar sein, wenn Text und Syntaxhervorhebung exakt übereinander positioniert werden, in der Praxis ist auch ein leichter Grauschleier ein sehr gutes Ergebnis. Ein weiterer Parameter ist logTime, wenn man die Performance testen will.
• Das Skript ist mit einigen, vor allem älteren, Skripts nicht kompatibel. Insbesondere kann es nicht verwendet werden, wenn andere Skripte mit addOnloadHook DOM-Operationen an der Edit-Box durchführen.
• Bei längeren Artikeln kann das Skript langsam werden.
• Es ist nur möglich die Hintergrundfarbe (und evt. Unterstreichungen) zur Hervorhebung zu verwenden.
• Für JavaScript, CSS und Lua muss das Skript mit dem CodeEditor zusammenarbeiten, was leider nicht immer problemlos klappt.

Einbindung

Falls du meine Skriptsammlung Fliegelflagel verwendest, ist das Skript in der Standardkonfiguration bereits aktiv.

Andere Benutzer können das Skript durch folgende Zeile in der eigenen common.js einbinden:

//[[Benutzer:Schnark/js/syntaxhighlight.js]]
mw.loader.load('https://de.wikipedia.org/w/index.php?title=Benutzer:Schnark/js/syntaxhighlight.js&action=raw&ctype=text/javascript');

Konfiguration

Falls du für Lua (oder auch JavaScript/CSS) lieber ausschließlich den vorhandenen CodeEditor verwenden willst, kannst du bestimmte Formate ausschließen, etwa indem du vor der Einbindung folgenden Code angibst:

mw.user.options.set('schnark-syntaxhighlight-exclude', {lua: true, js: true});

Dies deaktiviert das Skript für Lua und JavaScript.

Um bestimmte Wörter immer hervorzuheben, ergänzt du folgenden Code:

mw.user.options.set('schnark-syntaxhighlight-additional', {'Wort': '#eeeeee', 'mehrere Wörter': '#ffffcc'});

Du gibst einfach die Wörter exakt so an, wie sie auftauchen müssen um hervorgehoben zu werden, und die gewünschte Hintergrundfarbe.

Wenn du das Skript auch mit dem neuen Wikitext-Editor verwenden willst (experimentell), dann kannst du dies in der Fliegelflagel-Konfiguration oder über folgenden Code tun:

mw.user.options.set('userjs-schnark-syntaxhighlight-nwe', true);

Alternativen

• wikEd bietet neben einigen teils verbuggten Features auch eine Syntaxhervorhebung, die allerdings nicht direkt beim Eintippen aktualisiert wird. Außerdem ist dieses Skript mit einigen anderen Skripten inkompatibel.
• AceWikiEditor bietet eine sehr schnelle, aber teilweise fehlerhafte Syntaxhervorhebung direkt beim Eintippen. Das Skript ist ebenfalls nicht kompatibel mit einigen anderen Skripten.
• mw:User:Remember the dot/Syntax highlighter ist von der Idee mit meinem Skript identisch. Es wurde zwar in mehr Browsern getestet, hat aber inzwischen wohl eine schlechtere Browserunterstützung als mein Skript. Zudem ist der Umfang der unterstützten Syntax deutlich kleiner. Auch im Quelltextmodus des VisualEditors funktioniert es nicht.

Code

Der Javascript-Code befindet sich unter Benutzer:Schnark/js/syntaxhighlight.js, QUnit-Tests unter Benutzer:Schnark/js/syntaxhighlight.js/test.js.