Suche
  • kre8tiv - benjamin jopen
  • Politik. Kampagnen. Kommunikation.
Suche Menü

WordPress: Code darstellen und hervorheben

Bloggt man über Webdesign, so muss man auch ab und an verschiedene Code-Beispiele oder Snippets posten. Dabei spielt erstmal keine Rolle ob es sich um xHTML, PHP, Java oder CSS handelt. Mit dem sogenannten SyntaxHighlighting kann man den Code für den Besucher entsprechend komfortabel darstellen.

Such man nach einer passenden Erweiterung für WordPress wird man erschlagen mit einer Vielzahl an möglichen Plugins, die nicht alle die gewünschten Ergebnisse liefern. Außerdem will ich mir als Autor auch das Leben nicht unnötig schwer machen – heißt: Ich will keinen kryptischen Code auswendig lernen müssen, um Code-Beispiele zu posten und auch nicht nur im HTML-Modus schreiben.

Deshalb wältze ich mich grade durch so einige Plugins und bin am Ende doch fündig geworden: SyntaxHighlighter Evolved (offizielle Projektseite bei WordPress.org) erfüllt alle Vorgaben.

Die Vorteile

  • Das Plugin wird noch aktiv weiterentwickelt, dass letzte Update stammt aus dem September
  • Die Plugin-Website ist noch erreichbar (das ist leider bei vielen der Konkurrenten nicht der Fall, weshalb ich es gerne nochmal erwähne)
  • Man kann bequem im HTML-Modus schreiben
  • Die Toolbox stört nicht die Codeausgabe, sondern wird erst beim Hovern eingeblendet (beim SyntaxHighlighter Plus wird immer der Code in den ersten Zeilen teilweise verdeckt)
  • Der Code wird ganz einfach phpBB-Code mäßig eingerahmt, z.B. mit [ php ] Codebeispiel [ /php ] (natürlich ohne die Leerzeichen).
  • Nur ein Plugin regelt alles Nötige, es werden nicht mehrere Plugins für die Umwandlung des Codes und die Darstellung gebraucht.
  • Es können auf Wunsch einzelne Zeilen hervorgehoben werden.

Beispielhafte Funktionsweise

Um Nutzen und Funktion einmal zu illustrieren, hänge ich diesem Beitrag ein Code-Beispiel an. So sieht der Code im Editor aus:

Wie ihr seht, ist auch der „visuelle Modus“ aktiv. Ein ganz normaler Absatz, der Code wird einfach eingefügt wie er ist. Und so sieht das Resultat aus, wenn man mit der Maus darüber geht öffnen sich weitere Optionen (in die Zwischenablage kopieren, drucken, etc.).

<?php comment_reply_link(array_merge( $args, array('reply_text' => __('Antworten'), 'add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>

1 Kommentar Schreibe einen Kommentar

  1. Hi, muss ich meinen wordpress blog dafür selber hosten? möchte nämlich code darstellen und sehe bei wordpress nicht wies geht^^ cheers

    Antworten

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.