BITespresso

Kleine praktische IT-Tipps für WordPress, Windows, iOS und Co.

Hilfslinien für SyntaxHighlighter 3.x

| 1 Kommentar

WordPress SyntaxHighlighterBei der Suche nach einem guten Tool zur Syntaxhervorhebung bei Quelltexten stößt man sehr schnell auf den SyntaxHighlighter von Alex Gorbatchev, für den ich mich auch für meinen Blog entschieden habe. Den SyntaxHighlighter gibt es praktischerweise auch als WordPress Plugin SyntaxHighlighter Evolved von Alex Mills.

Das WordPress Plugin bietet sowohl die ältere Version 2.x als auch die aktuelle Version 3.x des SyntaxHighlighter an. Ein wesentlicher Unterschied zwischen den beiden Versionen ist, dass man bei der Version 3.x nicht mehr auf Adobe Flash angewiesen ist, um den Quelltext bequem aus der Webseite in die Zwischenablage zu kopieren, stattdessen kann man mit der Version 3.x einfach den Quelltext per Doppelklick markieren und Strg-C kopieren. Bei der Version 2.x scheitert dieses Vorgehen daran, dass man auf diese Weise ungewollt die Zeilennummern mit in die Zwischenablage kopiert.

Erst mal ohne …

Wer jedoch, wie ich, die Hervorhebung jeder zweiten Zeile durch Hilfslinien auf dem „Papier“ haben möchte, wird bei Version 3.x erst einmal enttäuscht sein, da dies nicht mehr automatisch geschieht. So sieht dann mit dem Standard Farbschema ein Quelltext zunächst so aus:

Original CSS-Datei für das Standard Farbschema

Original CSS-Datei für das Standard Farbschema

Abhilfe

Glücklicherweise ist jedoch weiterhin jede zweite Quelltextzeile mit einer eigenen CSS-Klasse versehen, so dass mit einer kleinen Änderung der CSS-Datei des jeweiligen Farbschemas die Darstellung von Hilfslinien wieder erreicht werden kann. Für das Standard Farbschema sind die CSS-Klassen in der Datei shThemeDefault.css im Verzeichnis plugins/syntaxhighlighter/syntaxhighlighter3/styles enthalten. Mit einer Anpassung des Farbwerts in der Zeile 21 erreicht man die von SyntaxHighlighter Version 2.x gewohnte Darstellung:

Mit dieser Änderung erhält jede zweite Zeile einen hellgrauen Hintergrund

Mit dieser Änderung erhält jede zweite Zeile einen hellgrauen Hintergrund

Die gezeigten Ausschnitte der CSS-Datei stammen aus der derzeit aktuellen Version 3.0.83 des SyntaxHighlighters. Bei neueren Versionen kann sich dies natürlich ändern. Den korrekten Farbwert für die Hintergrundfarbe der Zeilen besorgt man sich am besten aus der entsprechenden CSS-Datei des jeweiligen Farbschemas von Version 2.x aus dem Verzeichnis plugins/syntaxhighlighter/syntaxhighlighter2/styles.

Noch eine Kleinigkeit

Wer jetzt genau hinschaut, wird merken, dass die Zeilennummern der „hervorgehobenen“ Zeilen (oben die Zeile 21) bei Version 3.x weiß sind, während diese bei Version 2.x noch schwarz waren. Wer dies ebenfalls anpassen möchte, muss noch in der Zeile 43 die Farbe auf Schwarz ändern:

Schwarze Zeilennummern für hervorgehobene Zeilen

Schwarze Zeilennummern für hervorgehobene Zeilen

Beachten solltet ihr, dass diese Änderungen an der CSS-Datei bei einem Update des Plugins wieder überschrieben werden.

Viel Spaß beim Anpassen!

Ein Kommentar

  1. Sehr schön, Michael!
    Gratuliere zum ersten Beitrag — und gleich wieder was gelernt. So soll es sein!
    Viele Dank auch für Deine gelungene Eindeutschung des Plugins! 🙂
    Guten Rutsch!! 😉

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.