Aktuelles

Quelltext in Joomla

Techniker und Designer sind zwei gänzlich verschiedene Typen. Man muss neidlos anerkennen, dass Produkte von Apple einer einfachen aber klaren Linie folgen. Mit wenig Schnörkel dafür aber von einer seltenen Art von Eleganz, die zu beeindrucken weiß. Da müsste man doch meinen, dass man selber wenigstens die wenigen Grundlagen für einen einfachen Blog beherrschen sollte. Oder auch nicht.

Nachdem ich mich endlich mit dem TinyMCE Editor von Joomla angefreundet habe, steht die nächste Herausforderung an. Als Schreiber eines technischen Blogs möchte man von Zeit zu Zeit Quelltext Schnipsel posten. Als präformatierter Text mittels <pre></pre> Tags geht das ganz gut, sieht aber aus wie in den 80ern. Screenshots sind für die Copy&Paste Generation ein Graus und gerade das sind die Personen, die man ansprechen möchte. Eine langwierige Recherche später gibt es genau zwei Optionen für ordentliches Syntax Highlighting.

  • Javascript basiert am Frontend. In den meisten Fällen nur für wenige Sprachtypen.
  • Im Backend mittels GeSHI (generic Syntax Highligher)

Zweitere Variante klingt für mich runder. Leider bin ich ein paar Monate zu spät. GeSHI war früher Bestandteil von Joomla wurde aber inzwischen entfernt - Glück muss man haben. Zudem wird das Tool normalerweise nicht als Joomla Plugin sondern als natives Paket angeboten. Von den wenigen Seiten, die ich zu dem Thema finde scheint mir diese Installationsanleitung am saubersten zu sein. Sie verweist auf diesen Download, der ein fertiges Addon enthält . Nach der Installation in Joomla aktivieren und los geht es. Ein Test im Editor mittels <pre xml:lang="php">print $var;</pre> sieht vielversprechend aus. Leider passt die Formatierung noch nicht.

Zeilennummern brauchen wir nicht unbedingt, da man ab und zu auch Ausgaben an der Linux Kommandozeile darstellen möchte. Damit würde die Ansicht schwerfällig. Also in /plugins/content/geshi/geshi.php abklemmen mit

$geshi = new GeSHi($text, $lang);
  $geshi->enable_line_numbers(GESHI_NO_LINE_NUMBERS,90);
  $geshi->start_line_numbers_at(1);

Ohne Zeilnnummern wird leider der Hintergrund für den Quelltext nicht eingefärbt. Damit wird das im Blog unlesbar. Also auch hier nachschärfen und ein eigenes Design in der Datei /plugins/content/geshi/geshi/geshi.php hinterlegen.

var $code_style = 'font: normal normal 1em/1.2em monospace; background-color: #f7f788; border-width: 1px; border-color: #888822; border-style: solid; padding: 5px;';

Ein Test für die Linux Kommandozeile.

colj02:~ > df
Filesystem                        1K-blocks        Used  Available Use% Mounted on
/dev/sda1                          20641404    10271820    9321064  53% /
udev                                8166004         156    8165848   1% /dev
tmpfs                              19922944          72   19922872   1% /dev/shmpre>

Zum Vergleich SQL Syntax.

SQL> select Count(*) from sapsr3.bratwurst;
Column Value
------ -----
1 X
2 Y

Fazit: Vieles was so simple einfach und klar aussieht, erfordert hinter den Kulissen Gehirnschmalz. Insbesondere wenn man kein Designer ist und das nicht täglich macht. Hoffentlich kann man sich demnächst mehr auf die Inhalte als auf das Design konzentrieren.