Wordpress Plugin: Colored Coding

For an english description read the readme.md on github.

Hier größere Codeabschnitte zu Bloggen hat mich schon lange genervt, denn der TinyMCE und einige Filter auf dem WP-Content verhindern das zuverlässig. Die Idee, einzelne Codeblöcke aus dem eigentlichen Inhalt heraus zu nehmen und in eigene Felder zu packen, hatte ich schon lange. Auch ein eigener Post-Type kam mir in den Sinn, war aber doch zu unübersichtlich. So lag die Idee nun brach, denn ich wusste nicht so recht wie ich denn das Syntax-Highlighting angehen sollte. Initiale Motivation war dann die Entdeckung des ober-coolen Javascripts Rainbow.js von Craig Campbell, der das Syntax-Bemalung dahin verfrachtet, wo sie hingehört: ins Frontend.

WP Colored Coding als .zip-Archiv herunterladen

Die Entwicklung kann auf Github verfolgt und unterstützt werden. Z.B. in dem Fehler direkt als Issue gemeldet werden. (Wer kein Gihub-Account hat, kann das natürlich auch hier tun.)

Handbuch für Anwender

Für jeden Artikel, oder jede Seite lassen sich beliebig viele Code-Blöcke anlegen, die dann mit Shortcodes im laufenden Text eingebunden werden. Dazu kann man global das Syntax-Highlighting komplett deaktivieren oder aus den Themes, die Rainbow.js bereit stellt wählen. Um nicht nur Code, sondern auch live-Beispiele einzufügen, hat jeder Block die Option, den Inhalt ungefiltert ins Frontend zu transportieren. Eine Option, die mir bei einem öffentlichen Plugin etwas Kopf zerbrechen bereitet, daher muss diese Möglichkeit zuerst einmal global aktiviert werden. Der Nutzen überwiegt für mich aber z.B. für die Darstellung von Gists über ein Javascript oder für direkte Live-Beispiele. Ersteres würde TinyMCE komplett fressen und letzteres wäre enorm umständlich.

Globale Einstellungen finden sich unter Einstellungen -> Schreiben. Die Codeschnipsel finden sich als Metabox unter dem Texteditor und verhalten sich ähnlich wie Benutzerdefinierte Felder. D.h. beim Speichern des Arikels werden alle Änderungen übernommen (und als ein Postmeta gespeichert), um einzelne Schnipsel zu aktualisieren existiert jeweils ein Button. Um einen einzelnen Codeblock zu löschen entfernt man einfach den Code aus dem Eingabefeld (Strg+A → Entf) und aktualisiert.

Die Benennung der Code-Abschnitte erfolgt automatisch, wenn das Feld 'Bezeichner' (Name) frei gelassen wird, darum muss man sich also nicht kümmern. Daraus resultierende Shortcodes können über den TinyMCE-Button (CC) an Ort und Stelle eingefügt werden. Der Shortcode kann aber auch als Text umschließender Shortcode verwendet werden, um kleine Codeabschnitte zu highlighten. Anstatt des name-Attributes verwendet man dann das lang-Attribut. Alle unterstützten Sprachen werden ebenfalls im Dialog des CC-Buttons angeboten.

Aus

[cc lang="javascript"]
alert( 'Hallo Welt' );
[/cc]

im Editor wird ein

alert( 'Hallo Welt' );

im Frontend werden. Damit das funktioniert, ändert dieses Plugin für den eigenen Shortcode die Reihenfolge der Filter-Funktionen auf 'the_content'. Vor allem die Funktion wpautop() wird damit erst nach dem Shortcode-Parsing aktiv. Da sie <pre>-Elemente ignoriert zerstört sie den Code nicht mehr. Dennoch ist das lediglich für Einzeiler zu empfehlen, da auch TinyMCE zwischen Absätzen und Zeilenumbrüchen unterscheidet.

API Für Entwickler

Dreh- und Angelpunkt ist Rainbow.js. Das Plugin kommt mit der aktuellen, komprimierten Variante. Rainbow wird aber im Moment stetig weiter entwickelt und ist selbst auch leicht erweiterbar. Um eine weitere Sprachunterstützung zu nutzen, kann man die Filter wp_cc_rainbow_scripts, bzw. wp_cc_rainbow_languages verwenden. Mit ersterem kann man man das interne Rainbow-Script auch komplett ersetzen. Für eigene Themes ist der Filter wp_cc_rainbow_themes gedacht. Alle drei Filter werden in php/class-Rainbow_API.php angewendet. Unterstützung für weitere Sprachen kann wie folgt nachgerüstet werden:

/**
 * @param array $scripts
 * @return array
 */
function my_new_rainbow_script( $scripts ) {
    $scripts[ 'my_new_lang' ] = array(
        'src'       => '', # absolute URI des Skripts
        'depth'     => array( 'rainbow' ),
        'lang'      => 'my_new_lang', # Bezeichner für die Sprache
        'in_footer' => TRUE 
    );

    return $scripts;
}
add_filter( 'wp_cc_rainbow_scripts', 'my_new_rainbow_script' );

/**
 * @param array $langs
 * @return array
 */
function my_new_lang( $langs ) {
	# der selbe Bezeichner, wie oben!
    $langs[ 'my_new_lang' ] = 'My new lang';

    return $langs;
}
add_filter( 'wp_cc_rainbow_languages', 'my_new_lang' );

Ein eigenes Theme ist etwas einfacher zu verwenden:

/**
 * @param array $themes
 * @return array
 */
function my_new_rainbow_theme( $themes ) {
    $themes[ 'my_theme' ] = array(
        'src'  => '', # absolute URI des Stylesheets
        'name' => 'My Theme'
    );

    return $themes;
}
add_filter( 'wp_cc_rainbow_themes', 'my_new_rainbow_theme' );

Sonstiges

Das Plugin ist Multi-Site kompatibel auch wenn es noch keine globale Einstellungen z.B. für das Theme gibt. Bei der Deinstallation (Löschung) wird aber ggf. das komplette Netzwerk von Optionen und von sämtlichen Codeschnipseln befreit.

Der Einfachheit halber habe ich die Apache 2.0 Lizenz gewählt, da auch Rainbow.js diese verwendet. Sie ist nicht ganz so kurz wie z.B. die MIT Lizenz, aber noch einigermaßen verständlich. Außerdem ist sie offenbar GPL 3.0 kompatibel und dürfte damit auch in der Wordpress Plugin-Sammlung akzeptiert werden.

Kommentare

Es wurden noch keine Kommentarte zu diesem Artikel geschrieben.

Fragen, Ideen oder Kritik? – Hier ist Platz dafür!

Dein Kommentar

Um ein Kommentar abzugeben, reicht der Text im Kommentarfeld. Die Angabe eines Namens wäre nett, ist aber nicht erforderlich.

Du darfst folgenden HTML-Code verwenden, musst aber nicht:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>