crayon

Viele WordPress-Blogs beziehen sich auf Themen rund um Projekte im Bereich des Software-Development oder der Entwicklung von Web-Anwendungen. Nicht selten werden Code-Beispiele benötigt, um die Inhalte anschaulich zu präsentieren. Doch selten existieren in den verwendeten Themes bereits vorgefertigte Formatierungsangaben für die Darstellung der Code-Fragmente. Mit eigenen CSS-Angaben ist es zwar möglich, diese Beispiele zu formatieren, allerdings auch mühsam, vor allen Dingen dann, wenn diese Beispiele sprachübergreifend korrekt dargestellt werden sollen, beispielsweise anteilig für ein Gemisch aus HTML, JavaScript und PHP.

Syntax-Highlighting

Abhilfe schafft hier die WordPress-Erweiterung „crayon“, die ein Syntax-Highlighting für eine Vielzahl unterschiedlicher Sprachen bereitstellt. Eine Auswahl der wohl am häufigsten verwendeten Sprachen, für die eine Markup-Hervorhebung existiert, finden Sie in der nachfolgenden Liste:

C / C# / C++
CoffeeScript
CSS
HTML (XML/XHTML)
Java
JavaScript
PHP
Python
Ruby

Neben den hier aufgeführten Sprachen finden jedoch noch weit mehr Syntaxen Unterstützung durch das Plugin.

Zusätzliche Funktionen

Neben dem reinen Highlighting bietet die WordPress-Erweiterung allerdings noch einige Funktionen mehr, wodurch sie sich von vergleichbaren Plugins qualitativ deutlich abhebt.

So können beispielsweise besonders wichtige Codezeilen einzeln oder als Bereich markiert werden, um die Essenz des Beispiels hervorzuheben, ohne den Gesamtkontext dabei zu vernachlässigen.

Die Nummer der Startzeile der für die Darstellung generierten Ansicht kann ebenfalls manuell festgelegt werden, um den spezifischen Codeabschnitt realistisch nachempfinden zu können.

Ferner kann zudem ein Zeilenumbruch festgelegt werden, der die optional automatisierte Zeilennummerierung berücksichtigt und keine „neue“ Zeile generiert. Dadurch wird das übliche Verhalten eines Code-Editors emuliert.

Diese Emulation kann durch die Auswahl einiger Standard-Templates für das Syntax-Highlighting anhand der gängigen Formatierung bekannter Editoren verstärkt werden. Auf diese Weise erhält man eine Code-Ansicht, wie man sie von dem persönlich favorisierten Texteditor her kennt.

Schließlich kann eine Titelleiste für das nachempfundene „Editorfenster“ nach Belieben beschriftet werden. Diese kann zudem einige weitere Funktionen enthalten, wie das Öffnen des Codes in einem neuen Browserfenster (simulierte Ansicht des „Seitenquelltextes“), Umschalten des Zeilenumbruchs oder dynamisches Ein- und Ausblenden der Zeilennummern.

Eine Vielzahl weiterer Einstellmöglichkeiten rundet dieses Plugin funktional ab.

Das Ergebnis

Als Output erzeugt das Plugin einen vorformatierten Codeblock, der in den Beitragsquelltext eingebettet wird und alle eingestellten Formatierungsangaben enthält:

    <header class="entry-header">
        <?php if ( is_single() ) : ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <?php else : ?>
        <h1 class="entry-title">
            <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
        </h1>
        <?php endif; // is_single() ?>
    </header><!-- .entry-header -->

Das Beste an der Ausgabe ist, dass kein statisches Bild erzeugt wird, sondern eine markierbare Zeichenfolge, die letztlich aus dem Browser kopiert und in den eigenen Editor wieder eingefügt werden kann. Dadurch haben die Leser des Beitrags die Möglichkeit, den präsentierten Codeabschnitt direkt selbst auszuprobieren.

Weitere Quellen

https://wordpress.org/plugins/crayon-syntax-highlighter/

Fazit

Einfacher und komfortabler kann man Codebeispiele nicht in einen WordPress-Artikel integrieren. Aus unserer Sicht ist dieses WordPress-Plugin eins der wertvollsten Tools, die im Web kostenlos verfügbar sind. Wir freuen uns daher, Ihnen als ambitionierter Blogger dieses Werkzeug vorstellen und empfehlen zu können. Wir wünschen Ihnen viel Erfolg bei der Anwendung und ein positives Feedback durch Ihre Leser!

Hat Ihnen dieser Artikel gefallen? Dann bewerten sie den Artikel gerne oder teilen ihn mit Menschen, denen er ebenfalls von Nutzen sein kann – ganz einfach per Twitter oder Facebook oder Google+.

Sind Sie an künftigen Neuigkeiten aus dem Hosting-Bereich interessiert? Dann können Sie die Blogbeiträge bequem per RSS-Feed abonnieren, oder Sie versehen unsere Facebook-Seite ebenfalls mit einem Like.

Die Abo-Funktionalität auf Facebook versorgt Sie zudem jederzeit mit dem aktuellen Blogbeitrag und vielen weiteren Informationen rund um das Hosting im Allgemeinen aber auch zum Thema Host Europe.

Haben Sie Anregungen oder Änderungsvorschläge? Kommentieren Sie unsere Beiträge, wir freuen uns über Ihren Input!

Über
Letzte Artikel

Thomas von Mengden

Ehemaliger Social Media Manager & PR Comms bei Host Europe GmbH

Thomas von Mengden ist ein ehemaliger Autor des Blog & SEO-Teams der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting in Europa.

Letzte Artikel von Thomas von Mengden (Alle anzeigen)