User:Remember the dot/Syntax highlighter/de
Dieses Skript hebt im Quelltextfenster die Syntax farbig hervor. Im Gegensatz zu anderen Syntax-Highlighter-Skripten wie wikEd, AceWikiEditor und CodeMirror, dieses:
- Aktualisiert die Hervorhebung automatisch, so wie man schreibt.
- Unterbricht nicht die Undo- und Redo-Funktion.
- Unterbricht nicht die Rechtschreibprüfung.
- Ist kompatibel mit den meisten anderen Skripten, die das Bearbeitungsfeld beeinflussen.
Installation
[edit]Bitte achte darauf, im unteren Abschnitt der Installations-Anweisung, den Abschnitt "#Bekannte Probleme" zu lesen.
Für Endbenutzer, wenn auf dem Wiki installiert
[edit]Wenn der Syntax-Highlighter als Gadget auf deinem Wiki verfügbar ist, gehe zu deinen Einstellungen und aktiviere es.
Für Endbenutzer, wenn nicht auf dem Wiki installiert
[edit]Wenn die Installation als Gadget nicht verfügbar ist, füge diese Zeilen zu deiner common.js-Seite:
//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
Zum Beispiel, wenn die deutsche Wikipedia den Syntax-Highlighter nicht als Gadget anbieten würde, würdest du es zu dieser Seite einfügen: https://de.wikipedia.org/wiki/Benutzer:Dein_Benutzername/common.js
Für Administratoren von Wikimedia-Webseiten
[edit]Auf deinem eigenen Wiki erstelle die Seite MediaWiki:Gadget-DotsSyntaxHighlighter.js mit dem Code: :
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
Dann füge auf der Seite MediaWiki: Gadgets-Definition eine neue Zeile ein:
*DotsSyntaxHighlighter[ResourceLoader]|DotsSyntaxHighlighter.js
und erstelle die Seite MediaWiki: Gadget-DotsSyntaxHighlighter mit dem Text:
[[mw:User:Remember the dot/Syntax highlighter|Dot's Syntax Highlighter]]: – hebt im Bearbeitenfeld die Syntax farblich hervor.
Für Administratoren von Nicht-Wikimedia-Webseiten
[edit]Erstelle auf deinem Wiki die Seite MediaWiki: Gadget-DotsSyntaxHighlighter.js und kopiere den Quelltext aus User:Remember the dot/Syntax highlighter.js hinein. Dann füge auf der Seite MediaWiki: Gadgets-Definition eine neue Zeile ein:
*DotsSyntaxHighlighter[ResourceLoader]|DotsSyntaxHighlighter.js
und erstelle die Seite MediaWiki: Gadget-DotsSyntaxHighlighter mit dem Text:
[[mw:User:Remember the dot/Syntax highlighter|Dot's Syntax Highlighter]]: – hebt im Bearbeitenfeld die Syntax farblich hervor.
MediaWiki 1.22 oder höher erforderlich.
Bekannte Probleme
[edit]Kompatibilität
[edit]- Der Highlighter funktioniert am besten in der aktuellen Version von Firefox.
- Der Highlighter funktioniert fast immer mit den neuesten Versionen von Chrome, Safari und Opera, aber funktioniert nicht richtig mit Text in bestimmten Scripts geschrieben, vor allem Thai und Tibetisch.
- Der Highlighter funktioniert nicht im Internet Explorer (die Fehler sind zu schwer). Der Highlighter versucht nicht einmal zu starten, wenn der Internet Explorer erkannt wird.
- Der Highlighter ist nicht kompatibel mit bestimmten Skripten, die das Bearbeitungsfeld beeinflussen.
Syntaxanalyse (Parsing)
[edit]- Aus Performance-Gründen benötigt der Highlighter alle Tags im validen XML. Zum Beispiel, stelle sicher, dass, wenn ein
<p>-Tag startet auch mit einem</p>geschlossen ist, und verwende<br/>anstelle von<br>. - Aus Performance-Gründen, kann der Syntax-Highlighter keine
'''apostrophe italic''oder''italic apostrophe'''behandeln – für ihn ist es invalide Syntax. Ich empfehle stattdessen'<i>apostrophe italic</i>und<i>italic apostrophe'. <pre>-Tags, die mit einem Leerzeichen am Anfang einer Zeile erzeugt wurden, werden nicht hervorgehoben. Dies liegt daran, dass der Highlighter nicht intelligent genug ist zu sagen, ob am Anfang einer Zeile ein Freiraum, innerhalb einer Vorlage oder einfach Leerzeichen ist.- Behavior switches such as
__NOTOC__are not highlighted. - Externe Links erstellt mit
{{fullurl:}}oder Vorlagen werden nicht hervorgehoben. You will see[{{fullurl:My page}} external link]instead of[{{fullurl:My page}} external link].
Diverses
[edit]- Der Highlighter ist nicht gut, wenn größere Artikel bearbeitet werden und abschalten sich automatisch ab, wenn er sich mehr als 50 ms verzögert. Wenn dies geschieht, erscheint eine erklärende Meldung was passierte ist und was weist darauf hin, wie dies umgangen werden kann oder das Timeout zu erhöhen.
- Der Highlighter wird nicht ausgeführt beim Hochladen von Dateien.
- Der Highlighter kann unter Umständen deine Benutzer-Stile im Zusammenhang mit der Bearbeitungs-Textbox außer Kraft setzen.
Customizing
[edit]Farben
[edit]Es ist einfach den Highlighter zu ändern um andere Farben zu verwenden oder bestimmte Syntaxen nicht zu markieren. Die folgenden Farbanpassungen stehen zur Verfügung:
| defaultColor | für bekannte Syntaxelemente, die keine bestimmte Farbe definiert haben |
| boldOrItalicColor | '''bold''' ''italic''
|
| wikilinkColor | [[wikilink]]
|
| externalLinkColor | [http:// named external link], [http://numbered-external-link.com], http://bare-external-link.com
|
| headingColor | ==Heading==, ;Small heading
|
| listOrIndentColor | * unordered list, # ordered list, : indent
|
| signatureColor | ~~~~
|
| tableColor | {| table |}
|
| templateColor | {{template}}
|
| parameterColor | {{{template parameter}}}
|
| hrColor | ----
|
| tagColor | <tag>...</tag>, <tag/>
|
| commentColor | <!-- comment -->
|
| entityColor | &entity;
|
Zum Beispiel um WikiLinks Cyan und externe Links Orange zu machen, setze die folgenden Befehle in deine common.js (wenn der Highlighter als Gadget installiert ist, lasse die ersten beiden Zeilen weg):
//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
externalLinkColor: "#FFCC66", //orange
wikilinkColor: "#E6FFFF", //cyan
}
Um eine Syntax nicht hervorzuheben, setze die Farbe auf "" . Zum Beispiel um Hervorhebung externer Links zu deaktivieren:
//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
externalLinkColor: "",
}
Um keine Syntax, mit Ausnahme derjenigen die du explizit hervorheben möchtest, setze defaultColor auf "" und setze die Farbe jeder Syntax einzeln, die hervorgehoben werden möchte. Wenn du nur die übliche Farbe wünschst, setze sie auf "normal" . Zum Beispiel, um nur Tags hervorzuheben:
//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
defaultColor: "",
tagColor: "normal",
}
Zeitüberschreitung
[edit]Du kannst einen persönlichen timeout angeben, welcher den Standard von 20 ms Timeout ersetzt. Zum Beispiel, wenn eine gewisse Trägheit für dich OK ist beim Schreiben und du die Hervorhebung nur deaktivieren möchtest, wenn es mehr als 30 ms dauert, setze folgendes in deine common.js:
//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
timeout: 30,
}
Wenn der Highlighter als Gadget installiert ist, lasse die ersten beiden Zeilen weg.
Non-Wikitext-Tags
[edit]Verschiedene Tags wie <math> und <source>, verwenden keinen Wikitext, folglich wird keine Syntax innerhalb dieser Tags hervorgehoben. Du kannst eine Reihe von source-ähnlichen Tags anpassen, indem du den Einstellwert sourceTags mit einer Liste (array) von Tag-Namen setzt. Zum Beispiel, um die Syntax-Hervorhebung innerhalb eines hypothetischen <foo>-Tags zu deaktivieren, zusätzlich zu den Standardeinstellungen, setze folgendes in deine common.js:
//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
sourceTags: ["math", "syntaxhighlight", "source", "timeline", "hiero", "foo"],
}
Andere Tags wie <pre> und <nowiki> , verwenden keine Wikitext aber verarbeiten Entitäten ( zum Beispiel). Die Liste der nowiki-like – Tags wird durch die kontrollierte nowikiTags Eigenschaft. Zum Beispiel kann nur Zeichen Einheiten innerhalb der zu markieren <abbr> -Tag, setzen Sie die folgenden in Ihrem common.js:
//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');
syntaxHighlighterConfig = {
nowikiTags: ["nowiki", "pre", "abbr"],
}
In beiden Beispielen, wenn der Highlighter als Gadget installiert ist, lasse die ersten beiden Zeilen weg.
Seiten-Standardwerte
[edit]Alle Objekte, die in der angegeben werden kann syntaxHighlighterConfig Variable kann auch in der angegeben werden syntaxHighlighterSiteConfig Variable. syntaxHighlighterSiteConfig für Website Vorgaben und soll syntaxHighlighterConfig für Benutzereinstellungen. Eigenschaften von syntaxHighlighterConfig haben Vorrang über Eigenschaften von syntaxHighlighterSiteConfig und Eigenschaften von syntaxHighlighterSiteConfig Vorrang vor builtin Standardwerte übernehmen.
Zum Beispiel, wenn Ihre Website hat keine MediaWiki Erweiterungen installiert, können Sie die Unterstützung für Quelle-like-Tags zu entfernen. Dazu fügen Sie folgendes zu Ende MediaWiki: Gadget-DotsSyntaxHighlighter:
syntaxHighlighterSiteConfig = {
sourceTags: [],
}
Bugs melden
[edit]- Hinweis: Denke daran zu überprüfen, ob der Bug, den du melden möchtest, bereits ein bekanntes Problem ist.
When reporting bugs to me, please include:
- A detailed description of the problem.
- A link to a page where the bug is visible, or a sample of wikitext that triggers the problem.
- Your browser's User-Agent information.
- The MediaWiki skin you use.
- A list of gadgets you have enabled.
- A list of any custom JavaScript or CSS you have enabled.
- A list of any browser extensions you have enabled.
Quellcode
[edit]To reduce download time and because the ResourceLoader does not automatically minify scripts imported from other wikis, MediaWiki:Gadget-DotsSyntaxHighlighter.js itself is kept in minified form. Die eigentliche Quellcode ist verfügbar unter User:Remember the dot/Syntax highlighter.js .
Overview of approach
[edit]This script creates a background div, named wpTextbox0, that is inserted behind wpTextbox1, the editing textbox. wpTextbox0 and wpTextbox1 are synchronized in style, and the background of wpTextbox1 is made transparent so that wpTextbox0 shows through. Then, blocks of text are added to wpTextbox0 as span elements. The text on the blocks is transparent, but the backgrounds of the blocks are colored. By using the same text in wpTextbox0 as wpTextbox1, any positioning anomalies from dynamically composed characters are eliminated. Because wpTextbox0 and wpTextbox1 are (theoretically) perfectly synchronized, the colored backgrounds appear to the user as though they have been added directly to wpTextbox1.
The text in wpTextbox0 is not actually added to the textContents of the span elements. Instead, it is added to the :before and :after pseudo-elements of each span using a dynamically generated CSS stylesheet. This avoids problems when trying to use the browser's find-in-page feature, because if textContent were used instead of CSS content, the browser would perceive both the real text in wpTextbox1 and the transparent text in wpTextbox0 to be on the page.