Dienstag, 23. Juni 2009

Java, HTML und Javascript Quellcode schön im Blog darstellen?

Beim Bloggen über Themen der Programmierung kommt man schnell dazu viele Quellcode(c) H. Brune Häppchen zeigen zu wollen, damit das Gesagte direkt verdeutlicht werden kann. Ein Copy-and-Paste aus der Lieblingsentwicklungsumgebung funktioniert da leider nicht, übrig bleibt meist nur ein wirrer Worthaufen, der manuell mühselig wieder aufbereitet werden muss.

Aber es gibt Lösungen, mit denen man (fast) die Einfachheit eines Copy-and-Paste erreicht:

Google Code Prettifier

Mit dem Google Code Prettifier werden Bloginhalte mit Quellcode, sofern sie in ein bestimmtes Tag eingeschlossen werden, durch von Google geliefertes Javascript aufgehübscht. Eine Beschreibung in Deutsch findet sich im Google Watch Blog, dort wird die Menge der unterstützten Sprachen so definiert:

Unterstützt werden zur Zeit die Sprachen bash, C, C++, Java, JavaScript, Perl, Python, XML, HTML, HTMLXmp, WhiteSpace und misc1 - damit fast alle wichtigen.

Auch CSS gehört inzwischen offenbar zum Funktionsumfang dazu. Man hat also alles um z. B. eine GWT Programmierung schön zu zeigen.

Wie funktionierts

Als Vorbereitung lädt man die CSS und JS Dateien von der Prettify-Webseite. Diese Dateien muss man auf dem eigenen Webserver verfügbar machen. Es gibt dabei für die unterschiedlichen Sprachen eigene JS Dateien, vermutlich kann man die, von denen man annimmt sie nie zu brauchen, weglassen. Danach bindet man CSS Datei und die Hauptjavascriptdatei in sein Blog ein und ergänzt im body Tag ein

<body onload="prettyPrint()">

Damit sind die Vorbereitungen abgeschlossen. Um nun Quellcode zu formatieren wird der entsprechende Codeblock einfach mit einem

<pre class="prettyprint">...</pre>

umgeben. Es ist dabei möglich die Sprache mit anzugeben, wenn man dies nicht tut, so ‘rät’ der Prettifier. Beispiel:

<pre class="prettyprint lang-java">...</pre>

Links:

Homepage Google Code Prettify: Mit Download der notwendigen Dateien und Doku

Open Tutorial: Hier gibt es ergänzende Hinweise in Deutsch zur Einbindung von HTML/XML

Beispiel

Und so sieht es dann aus:

	/**
* Kleine Hilfsmethode zum Test auf leere Strings.
*
* @param to_test
* Zu testender String
* @return Wenn der String null oder leer oder nur mit
* Leerzeichen gefüllt ist kommt true, sonst false.
*
*/
public static boolean isEmptyString(String to_test) {
return to_test == null || to_test.trim().length() == 0;
}

Keine Kommentare: