Querdenkender Webworker mit WordPress-Affinität

scGeSHi – Sourcen mittels Shortcode darstellen

Plugins, die Quelltext in Posts darstellen, sind keine Seltenheit. Insofern ist scGeSHi nicht außergewöhnlicher als andere WordPress-Plugins dieser Gruppe. Ein großer Teil bedient sich der Funktionalitäten, die der GeSHi – Generic Syntax Highlighter bietet. Auch da macht das Plugin keine Ausnahme. Allerdings mach scGeSHi einige Dinge eben doch etwas anders.

WordPress schenkt dem Entwickler schon zahlreiche Funktionalitäten. Neben der reinen Aufgabe, Sourcen zu parsen und dann angenehm zu präsentieren, gibt es einige Arbeitsschritte, die durch das CMS-System so vereinfacht werden, dass der reine Plugin-Code angenehm schlank bleiben kann und man das Rad nicht immer wieder neu erfinden muss.

scGeSHi gebraucht im Wesentlichen die Shortcode API, die HTTP API und die Transients API. Das Ergebnis ist eine einfache aber wirkungsvolle Funktionalität, die das Einbinden von Quelltexten erlaubt, die sich auch auf entfernten Servern befinden können. Die Quellen werden von WordPress zudem intern zwischengespeichert, was auch bei hoher Last noch für eine schnelle Ausführung sorgen sollte.

Installation

Nach dem Download vom WordPress.org Plugin Directory muss der Inhalt des Zip-Archives entpackt und danach in das Plugin-Verzeichnis der WordPress-Installation kopiert werden. Üblicherweise ist das Verzeichnis vom Hauptverzeichnis des Webservers aus unter /wp-content/plugins zu finden. Danach muss das Plugin in der Administrationsoberfläche aktiviert werden.

Einrichtung

Nach der Installation wird das Plugin bereits seine Arbeit verrichten. Möglicherweise soll noch die Ausgabe etwas angepasst werden. Dafür gibt es im Verzeichnis des Plugin eine Datei namens scGeSHi.css, deren Inhalt in die style.css des verwendeten Themes kopiert und dann an die eigenen Bedürfnisse angepasst werden kann. Wer das Plugin Code Snippet kennt, dem werden die Styles sehr bekannt vorkommen.

Benutzung

Die Ausgabe der Quelltexte wird mittels Shortcodes realisiert. scGeSHi stellt nur Files dar. Ob diese nun auf dem lokalen Server oder auf einem entfernten Server liegen, ist dabei unerheblich. Wichtig ist aber in jedem Fall, auch wenn es naheliegend erscheint, dass beispielsweise PHP-Files entweder als Text herausgegeben werden oder mit einer entsprechenden Dateiendung (*.phps) abgespeichert werden, damit sie nicht vor der Auslieferung schon interpretiert werden.

Beispiele

Die mitgelieferte GeSHi-Bibliothek unterstützt bereits eine riesige Anzahl von Programmier- und Markup-Sprachen. Im Zweifelsfall lohnt sich ein Blick auf die lange Liste, die auf der verlinkten Website zu finden ist. Für die gebräuchlichsten Fälle (und zu Testzwecken) habe ich hier eine Liste von Beispielen zusammengestellt. Ein kleiner Tipp noch: Wenn man mit der Maus über den Code fährt, erkennt man, dass sich einige Anweisungen auch anklicken lassen.

PHP

<!DOCTYPE html>
<html lang=en>
  <meta charset=utf-8>
  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
  <title>Error 404 (Not Found)!!1</title>
  <style>
    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:[email protected] screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:[email protected] only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) [email protected] only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
 </style>
  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
  <p><b>404.</b> <ins>That’s an error.</ins>
  <p>The requested URL <code>/svn/trunk/examples/redirect.php</code> was not found on this server.  <ins>That’s all we know.</ins>

HTML

<!DOCTYPE html>
<html lang=en>
  <meta charset=utf-8>
  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
  <title>Error 404 (Not Found)!!1</title>
  <style>
    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:[email protected] screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:[email protected] only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) [email protected] only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
  </style>
  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
  <p><b>404.</b> <ins>That’s an error.</ins>
  <p>The requested URL <code>/svn/trunk/examples/example.html</code> was not found on this server.  <ins>That’s all we know.</ins>

CSS

<!DOCTYPE html>
<html lang=en>
  <meta charset=utf-8>
  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
  <title>Error 404 (Not Found)!!1</title>
  <style>
    *{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:[email protected] only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) [email protected] only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
  </style>
  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
  <p><b>404.</b> <ins>That’s an error.</ins>
  <p>The requested URL <code>/svn/trunk/examples/scGeSHi.css</code> was not found on this server.  <ins>That’s all we know.</ins>

Mitmachen

Ich bin dankbar für jeden, der das Plugin testet und mir die Probleme mitteilt, die bei der Benutzung von scGeSHi bestehen.

Spenden

Wer sich bemüßigt fühlt, mir für meine Arbeit danken zu wollen, kann dies auf vielerlei Art und Weise tun. Mir persönlich würde es gefallen, wenn ihr über das Plugin schreibt, verlinkt oder Vorschläge einbringt, die das ganze Projekt weiterbringen. Falls sich jemand nicht davon abhalten lassen will, Geld bezahlen zu wollen, schlage ich vor, bei Greenpeace zu spenden. Ansonsten gibt es auch noch meinen Wunschzettel bei Amazon.

Lizenz

scGeSHi steht wird unter der GNU General Public License Version 2 vertrieben, was bedeutet, dass die Software privat und kommerziell frei benutzt werden kann. Gleichzeitig bietet diese Lizenz auch einen Schutz für den Entwickler, weil sich keine Garantien ableiten lassen und keine Ansprüche wegen Fehlern geltend gemacht werden können, die durch die Installation oder die Nutzung der Software verursacht werden könnten.