Syntax-Highlighting in WordPress

Als ich meinen ersten Artikel mit Sourcecode veröffentlichen wollte, fehlte mir ein Plugin, welches meinen Sourcecode hervorhebt.

Okay, Syntax-Highlighting hab ich schon in unzähligen WordPress-Blocks gesehen, das kann doch nicht schwer sein…

Aus der auf fünf Minuten geschätzen Aktion wurden zwei Stunden… Zuerst musste ich mich durch die gefühlten 9001 verschiedenen Syntax-Plugins kämpfen. Ich fand zwei Plugins von denen ich glaubte, dass sie meinen Ansprüchen gerecht werden.

  • SyntaxHighlighter Evolved
  • WP-Syntax

Bei SyntaxHighlighter Evolved gab es in den Einstellungen einen Punkt, bei dem ich das Farbschema auswählen konnte, zu meiner Freude tauchte die Option Eclipse auf. Ich prüfte das Highlighting, alles schien perfekt. Doch dann bemerkte ich, dass das Highlighting nur mit aktivem JavaScript funktioniert. Da ich aber ein Freund von NoScript bin und Seiten nur im äußersten Notfall JavaScript ausführen lasse, testete ich WP-Syntax.

Zunächst war ich verärgert, da WP-Syntax keine Einstellung zur Auswahl des Farbschemas anbietet, jedoch funktioniert WP-Syntax auch ohne aktivem JavaScript.

Mit dem Plugin WP-Syntax Colorizer (krasser Name ;-)), kann man sich ein individuelles Farbschema zusammen stellen. Dazu muss die Datei wp-syntax_colorizer.php (Plugins -> WP-Syntax Colorizer -> Bearbeiten) bearbeitet werden. Ich habe versucht ein Farbschema zu erstellen, welches sich so gut es mir möglich war an Eclipse orientiert.

WP-Syntax Beispiel

Hier mein Eintrag in der wp-syntax_colorizer.php.

function my_custom_geshi_styles(&$geshi) {
$geshi->set_overall_style("color: black;", true);

$geshi->set_keyword_group_style(1, „color: #7F0055;“, true);
$geshi->set_keyword_group_style(2, „color: #7F0055;“, true);
$geshi->set_keyword_group_style(3, „color: blue;“, true);
$geshi->set_keyword_group_style(4, „color: #7F0055;“, true);

$geshi->set_symbols_style(„color: black;“, true);
$geshi->set_methods_style(1, „color: black;“, true);
$geshi->set_regexps_style(1, „color: black;“, true);

$geshi->set_strings_style(„color: #2A00FF;“, true);
$geshi->set_numbers_style(„color: #F36E00;“, true);

$geshi->set_comments_style(1, „color: #3F7F5F;“, true);
$geshi->set_comments_style(‚MULTI‘,“color: #3F7F5F;“, true);
}

Dieser Beitrag wurde unter Plugins, Wordpress veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Eine Antwort auf Syntax-Highlighting in WordPress

  1. Hey, danke für den Artikel. Sowohl WP-Syntax als auch WP-Syntax Colorizer werden schon lange nicht mehr gewartet. Ich habe damals WP-GeSHi-Highlight (https://wordpress.org/plugins/wp-geshi-highlight/) als (bessere) drop-in Alternative zu WP-Syntax erschaffen, pflege das Plugin bereits seit 5 Jahren und werde es auch weiterhin tun. WP-GeSHi-Highlight unterstützt zwar keine individuellen Farbschemen, aber ich bin mir auch nicht sicher, ob das das wichtigste Feature eines Highlighters ist :-). WP-GeSHi-Highlight ist auf jeden Fall ein moderner, leichtgewichtiger „back-end only“ Highlighter (benötigt also keinen JavaScript-Code) und schont insb. im Zusammenspiel mit einer Caching-Lösung sowohl Server- als auch Client-Ressourcen. Grüße!

Hinterlasse einen Kommentar zu Jan-Philip Gehrcke Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">