SyntaxHighlighter Evolved vs. manuelle Umsetzung von Codes in Beiträgen

Syntax Highlightning

Um Codes in meinen Beiträgen hervor zu heben, verwende ich schon seit einiger Zeit das Plugin SyntaxHighlighter Evolved. Zusammen mit dem SyntaxHighlighter TinyMCE Button ist es zudem superkomfortabel, php-, html- oder css-Codes in Beiträgen einzufügen.
Nun bin ich immer auf der Suche nach Möglichkeiten, Plugins durch manuelle Umsetzungen zu ersetzen. Und so bin ich auf einen schönen Beitrag von Hecht MediaArts gestoßen, in dem wunderbar erklärt wird, wie Codes in Beiträgen nicht nur manuell umgesetzt sondern auch schön dargestellt werden können.

Ich hatte es umgesetzt, für gut befunden und trotzdem bin ich wieder zu dem Plugin SyntaxHighlighter Evolved zurückgekehrt. Warum?

Ich würde wohl doch eher die manuelle Methode verwenden, wenn ich nur hin und wieder einfache Codes in meinen Beiträgen darstellen würde. SHE ist schon ein mächtiges Plugin und wenn ich mir meinen Seitenquelltext anschaue, werden eine Menge an JavaScripten geladen. Auch eine Überprüfung bei PingdomTools ergab, dass die Seite schneller lud, als ich das Plugin entfernt hatte. Andererseits schwanken dort die Ergebnisse oftmals sehr.

Wie ich es umgesetzt hatte, möchte ich ein wenig beschreiben, denn es ist wirklich eine tolle Alternative.

Umsetzung der Funktion

Toolbox FunktionenDen Eintrag in der functions.php habe ich genauso wie im Beitrag beschrieben übernommen. Das heißt, eigentlich habe ich diese Funktion als Modul in dem Plugin Toolbox von Sergej Müller angelegt.

Dieses Plugin bietet den Vorteil, dass einerseits die functions.php nicht unendlich lang und unübersichtlich wird. Außerdem brauche ich nur das entsprechende Modul einfach deaktivieren, falls ich eine Funktion nicht verwenden möchte. Ich muss das entsprechende Script dann nicht umständlich in der functions.php suchen und herauslöschen.

Das Modulscript sieht dann so aus:

<?php
/*
Module Name: Codedarstellung
Description: Stellt Code im Beitrag dar [Frontend]
Author: Sergej Müller
Author URI: 
*/

/* Sicherheitsabfrage */
if ( !class_exists('Toolbox') ) {
	header('Status: 403 Forbidden');
	header('HTTP/1.1 403 Forbidden');
	exit();
}

function pre_esc_html($content) {
  return preg_replace_callback(
    '#(<pre.*?>)(.*?)(</pre>)#imsu',
    create_function(
      '$i',
      'return $i[1].esc_html($i[2]).$i[3];'
    ),
    $content
  );
}

add_filter(
  'the_content',
  'pre_esc_html'
);

Dieses Script – ich habe es mal code_darstellung.php genannt –  habe ich dann in dem Verzeichnis modules des Plugins toolbox abgespeichert. Die entsprechende Funktion erscheint dann automatisch unter den Einstellungen zu diesem Plugin.

Umsetzung per CSS

In dem Beitrag von Hecht MediaArts wurde auch schon ein Code vorgestellt, der in die style.css des Themes eingefügt werden kann. Gefiel mir auch schon ganz gut, aber dadurch wurde das Element mit schlichtem grauen Hintergrund dargestellt. Ich wollte aber einen Hintergrund mit weiß-hellgrauen Streifen und damit ein wenig den Hintergrund von SyntaxHighlighter-Plugins simulieren.

Dafür habe ich den Stripe Generator verwendet, mit dem ich ganz einfach einen entsprechenden Hintergrund erstellen und als png-Datei herunterladen konnte.

Den css-Code habe ich für Beiträge und Kommentare unterschiedlich angelegt. Für die font-size– und line-height-Befehle habe ich deswegen em-Werte bis zu drei Stellen hinter dem Komma ausgewählt, damit die Codezeilen in etwa auf dem gestreiften Hintergrund angepasst dargestellt werden.

CSS für Beiträge

pre {
background:url("http://www.extern.sylvis-blog.de/images/grey_white2.png") repeat scroll left top;
padding:15px 0px 15px 5px;
border: 3px ridge #5F5F5F;
overflow: auto;
margin: 0 0 15px 0;
width: 590px;
font-family: Courier, Monospace;
line-height:1.353em;
font-size:0.9em;
}

Darstellung in BeiträgenUnd sieht dann so aus:

Die Werte sorgen unter anderem dafür, dass bei längeren Codezeilen ein Scrollbalken erscheint.

 

CSS für Kommentare

.commentmet_text pre {
background:url("http://www.extern.sylvis-blog.de/images/grey_white2.png") repeat scroll left top;
padding:1px 0 11px 5px;
border: 3px ridge #5F5F5F;
overflow:auto;
width:400px;
font-family: Courier, Monospace;
line-height:1.39em;
white-space:pre-wrap;
}

Und sieht dann z. B. so aus:Darstellung in Kommentaren

Ich habe hier eine geringere Breite für die Darstellung gewählt. Außerdem soll die Codezeile am Ende umbrochen werden. Den Tipp habe ich übrigens von Tanja aus ihrem Beitrag Code in WordPress Artikel einfügen und richtig darstellen. ;-)

Nach der Umsetzung

Als ich alles manuell umgesetzt hatte, fielen mir dann doch einige Nachteile dieser Methode auf. Einige Codes werden einfach nicht richtig dargestellt.

Hier mal zwei Beispiele:

In meinem Beitrag Jetzt gefällt mir auch der valide “gefällt-mir”-Button wird der mit SyntaxHighligther Evolved korrekt angezeigte Code bei der manuell umgesetzten Methode nicht als Code umgesetzt sondern direkt ausgeführt. Aus

<iframe width="320" height="240" style="overflow: hidden; width: 380px; height: 80px;" src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink();?>&t=<?php the_title();?>&send=false" frameborder="0" scrolling="no"></iframe>

1. Darstellung bei manueller Umsetzung

wurde plötzlich.

Während ich diesen Beitrag schreibe, probiere ich in meinem Testblog weiter aus, diesen Code einzufügen und siehe da …

Zweiter Test bei manueller Umsetzung

… plötzlich funktioniert es. Anfangs dachte ich, ich spinne. Warum wird der Code nun richtig dargestellt?

Und dann fiel es mir ein. Ich hatte bei dem oberen Screenshot genau den Code per copy & paste aus dem Originalbeitrag kopiert und in den pre-Code eingefügt.

Bei der unteren Variante hatte ich den Code aus dem Testblog verwendet, der noch mit allen Sonderzeichen dargestellt wurde – also statt “<” war ein “&lt;” im Code enthalten.

Aber mal ganz ehrlich, das finde ich dann doch zu umständlich, für eine korrekte Darstellung sämtliche Sonderzeichen für Klammern und Leerschritte herauszusuchen. Ich beherrsche sie leider nicht aus dem effeff.

Ein weiteres Beispiel, bei dem ein Code nicht korrekt dargestellt wurde und zwar hier:

Aus                                                                          wird

  • Bild - richtige Darstellungrichtige Darstellung per Plugin
  • Bild - falsche Darstellungfalsche Darstellung - manuell

Zur Not könnte ich Codes zwar auch in eckigen Klammern darstellen und eine Erklärung mitliefern, aber schön ist das natürlich nicht.

Fazit

Daher habe ich mich doch erst einmal dafür entschieden, weiterhin das Plugin zu verwenden. Hier noch einmal die Punkte die dafür sprechen:

  1. Alle Arten von Codes werden richtig dargestellt.
  2. Darstellung der Codes kann individuell und einfach angepasst werden.
  3. Schöne unterschiedliche Farbdarstellung der jeweiligen Werte.
  4. Mit dem Zusatzbutton im TinyMCE Advanced-Editor ist das Einfügen eines Codes auch in der WYSIWYG-Ansicht kinderleicht zu bewerkstelligen.
  5. Besonders gut gefällt mir das Hervorheben bestimmter Zeilen – gerade dann, wenn ich die Unterschiede zweier Codes dokumentieren möchte.
  6. Auch die Zeilennummerierung kann individuell angepasst werden.
  7. Sehr besucherfreundlich, wenn die Toolbar aktiviert ist, um Codes zu kopieren.

Ihr seht, da sprechen schon einige und für mich sehr wichtige Punkte dafür, dass ich SyntaxHighlighter Evolved weiterhin verwenden möchte. Ich habe einige “Konkurrenten” ausprobiert, aber ich halte es nach dem derzeitigen Stand einfach für unschlagbar.

Und wem es darin ein Zuviel an Scripten ist, kann diese ja gegebenenfalls noch ein wenig reduzieren. :-)

Edit 17.01.2018

Mittlerweile ist seit ein paar Jahren das Plugin Crayon Syntax Highlighter im Einsatz. Es beinhaltet ebenfalls etliche Funktionen und der Code wird mit ihm auch schön dargestellt. Außerdem hat bis heute keine Probleme bereitet.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

13 Kommentare

  • Ich persönlich habe mich für eine Mischung deiner beiden Möglichkeiten entschieden und schreibe, wenn ich Artikel mit Code schreibe diese mit dem Windows Live Writer. Für diesen gibt es ein Syntax Highlighting Plugin welches den Text endsprechend mit CSS versieht. Damit spare ich mir irgendwelche Javascript-Module die immer erst nachgeladen und ausgeführt werden müssen. Dieses Plugin kann nicht nur den einfachen Hintergrund wie ich ihn bevorzuge sondern auch gestreift. Auch Zeilennummern sind bei Bedarf ein oder ausschaltbar.

    • Hallo Marmel,

      das wäre wirklich noch eine Alternative für mich, die Du da ansprichst. Der Windows Live Writer ist installiert, allerdings habe ich nur am Rande mitbekommen, welches Potential – eben auch durch entsprechende Plugins – in ihm steckt.
      Komisch, als ich noch den Windows Live Space (jetzt der SpaceBlog) besaß, habe ich fast ausschließlich die Beiträge über den WLW geschrieben.

      Ich schaue mir den glatt mal in nächster Zeit an.

      Gruß Sylvi

  • Um Code posten zu können würde ich mir nie ein oder mehrere Plugins installieren. Ich poste ja nicht wenig davon, aber das geht so einfach mit den richtigen HTML Codes (pre und code) und den entsprechenden CSS Formatierungen. Das einzige auf das man noch aufpassen muss sind die eckigen Klammern, die WordPress verschluckt. Aber mit der Zeit gewöhnt man sich an die HTML Codierung dieser zwei Zeichen.

  • ICh mach es mir ganz einfach! Ich erstelle eine .TXT und füge den ganzen Code ein. Gebe in als Download an und schön kann ihn auch jeder lesen! Nicht so schön aufbereitet aber simple!

  • @Tanja

    Okay, wenn es lediglich an den beiden Spitzklammern und nicht noch an anderen Zeichen hapert, würde ich das auch noch hinbekommen. Die manuelle Methode habe ich auch noch nicht ganz beiseite geschoben.

    @Daniel

    Das mag für Deinen Blog okay sein, aber in meinen Beiträgen dokumentiere ich gerne anhand des “sichtbaren” Codes, wie ich – insbesondere bei Problemlösungen – vorgegangen bin.

    Schön finde ich eben an dem Plugin, dass ich sowohl die Zeilennummerierung einstellen kann, damit Leser die entsprechenden Codezeilen besser finden können und bestimmte Zeilen farblich markieren kann, um Veränderungen hervorzuheben wie z. B. in dem Beitrag 2 Probleme nach Joomla-Update Version 1.7 beheben.

    • Danke auch für die Verlinkung. Hatte die zuerst gar nicht gesehen, erst nach meinem Kommentar über den Pingback bemerkt *peinlich*.

      Die Zeilennummern finde ich persönlich etwas problematisch. Ist zwar schön damit was zu erklären, doch wenn jemand den Code kopieren will, sind, außer wenn man die Javascript Funktion nutzt, immer die Zeilennummern mit dabei und die muss man dann manuell wieder rauslöschen. Da habe ich mich schon oft krumm geärgert. Die Javascript Funktion zum kopieren sehe ich heute übrigens zum ersten Mal.

      • Lach … kein Problem. Ich hätte es einfach doof gefunden, den “wrap”-Wert aus Deinem Beitrag zu verwenden, ohne darauf hinzuweisen. ;-)

        Du hast recht, das ist mir auch schon passiert, dass ich plötzlich die Nummern mitkopiert hatte und diese herauslöschen musste – sehr ärgerlich. Da ist es wiederum einfacher, den Code per Markieren zu kopieren, wenn die Anzeige manuell wie in Deinem Blog ohne Nummerierung umgesetzt wurde. Allerdings habe ich dabei schon einmal versehentlich ein Zeichen (meist am Ende) nicht mitkopiert. Aber das ist eben eigene Schusseligkeit. :-)

        Ich hatte etliche Plugins ausprobiert und die Copy & Paste-Funktion in der Toolbar ist natürlich ein kleiner Luxus für meine Besucher.

        Naja, ist letztendlich auch eine “Glaubensfrage” ähnlich wie mit der Editierfunktion … möchte man diesen Komfort zu Lasten der Performance verwenden oder nicht?
        Nur letztendlich habe nicht den Eindruck, dass meine Seite durch den Einsatz dieser Plugins extrem in die Knie geht.

  • Bin auch nicht der große Fan davon für alles immer gleich ein Plugin zu verwenden, aber beim Code-Highlighting setze ich auch auf SyntaxHighlighter Evolved. Habe auch andere Highlighter-Plugins für WordPress ausprobiert, aber SHE gefällt mir noch am besten, weil relativ viele Programiersprachen unterstützt werden. Finde bei längeren Code-Listings ist es leserfreundlicher & übersichtlicher, wenn die jeweiligen Keywords farblich hervorgehoben werden. Da kann ich auch die zusätzlich geladenen JavaScript-Dateien verschmerzen ;)

    • Hallo Stephan,

      habe glatt mal bei Dir gespickt und musste feststellen, dass Deine Seite – trotz des Plugins ;-) – rasend schnell lädt. Du fügst ja in Deinen Beiträgen sehr häufig Codes ein und ich finde es genau so wie Du einfach übersichtlicher durch die farbliche Unterscheidung der Werte.

      Gruß Sylvi

      • Hallo Sylvi,

        das nehme ich jetzt einfach mal als Kompliment :)! Habe auch wirklich versucht darauf zu achten, dass mein Blog einigermaßen schnell lädt – und wenn du es sogar als “rasend” empfindest umso besser :). Ein Punkt dabei ist, nicht so viele performancebremsende Plugins einzusetzen, aber an SHE bzw. einem Highlighter-Plugin ging einfach kein Weg vorbei :P.

        Gruß Stephan

        • Hej Stephan,

          lach … schön, dass Du das genauso siehst. :-D Auch ich versuche immer wieder Plugins durch manuelle Lösungen zu ersetzen. Aber wenn ich den Eindruck habe, dass ein Plugin einfach mehr bietet und auf meine Bedürfnisse zugeschnitten ist, dann höre ich irgendwann auf, nach Alternativen zu suchen.

          Lieben Gruß
          Sylvi