Veröffentlicht am 02.06.2013

Syntax-Highlighting in Joomla

Ich habe eine ganze Zeit lang dafür gebraucht, eine komfortable und nicht allzu hässliche Syntax-Highlighting-Funktion in meine Joomla-Beiträge einzubauen. Hier präsentiere ich, für alle die sich mit dem selben Problem auseinander setzen müssen, eine funktionierende Variante.

Noch kurz etwas zu den technischen Grunddaten: Ich arbeite momentan mit der aktuellsten Version Joomla 3.1.1 und werde das Plugin GeShi sowie als Editor den integrierten TinyMCE-Editor verwenden.

Schritt 1: GeShi installieren

In den älteren Joomla-Versionen gab es das Syntax-Highlighting-Plugin "GeShi" schon direkt von Haus aus mitgeliefert. In den neueren Versionen (ab 3.1) ist es aus dem Plugin-Verzeichnis verschwunden. Kein Wunder. Da es nur mäßig gut ins System integriert wurde konnte es ohne eigene Anpassungen kaum sinnvoll betrieben werden. Das GeShi-Plugin gibt es zum Download hier . Auch wenn ihr Geshi aus einer älteren Joomla-Version noch übernommen haben solltet, empfehle ich das Paket trotzdem zu installieren, da es sich hier um eine neuere Version handelt. Installiert wird ganz normal über den Menüpunkt "Erweiterungen"->"Hochladen&Installieren". Anschließend dürft ihr nicht vergessen, das Plugin auch zu aktivieren! Geht dazu ins Plugin-Verzeichnis im Menü "Erweiterungen", und sucht nach dem Plugin "Inhalt - Codehervorhebung (GeSHi)". Wenn neben dem Titel noch ein rotes X steht bedeutet das, dass das Plugin noch deaktiviert ist. In diesem Fall müsst ihr nur einmal auf das besagte X klicken. Wenn ein grüner Haken angezeigt wird, hat alles geklappt.

Schritt 2: TinyMCE konfigurieren

TinyMCE zickt bei der Benutzung der GeShi-Syntax ein wenig rum. Der Editor filtert die <pre> - Tags, die für GeShi notwendig sind, einfach heraus. Um das zu verhindern, verwende ich das codehighlighting-Plugin, zum Download hier. Die zip-Datei muss zuerst einmal entpackt werden. Bevor wir uns ans Hochladen machen, muss im Ordner /js noch der Inhalt der Datei codehighlighting.js mit folgendem Inhalt überschrieben werden:

function Save_Button_onclick() {
  var lang = document.getElementById("ProgrammingLangauges").value;
  var code =  WrapCode(lang);
  code = code + escapeHtml(document.getElementById("CodeArea").value);
  code = code + "</pre> ";
  if (document.getElementById("CodeArea").value == ''){
    tinyMCEPopup.close();
    return false;
  }
  tinyMCEPopup.execCommand('mceInsertContent', false, code);
  tinyMCEPopup.close();
}

function  WrapCode(lang){
  var options = "";
  if (document.getElementById("nogutter").checked == true)
    options = ":nogutter";
  if (document.getElementById("collapse").checked == true)
    options = options + ":collapse";
  if (document.getElementById("nocontrols").checked == true)
    options = options + ":nocontrols";
  if (document.getElementById("showcolumns").checked == true)
    options = options + ":showcolumns";
  return "<pre name='code' xml:lang='"+lang+options+"' >";
}

function Cancel_Button_onclick(){
  tinyMCEPopup.close();
  return false;
}

function escapeHtml(unsafe) {
  return unsafe
  .replace(/&amp;/g, "&amp;amp;")
  .replace(/</g, "&amp;lt;")
  .replace(/>/g, "&amp;gt;")
  .replace(/"/g, "&amp;quot;")
  .replace(/'/g, "&amp;#039;");
}

Der gesamte codehighlighting-Ordner muss dann in TinyMCE's - Plugin-Ordner hochgeladen werden, zu finden in eurem Joomla-Installationsordner unter / media/editors/tinymce/jscripts/tiny_mce/plugins . Hier gehört der eben entpackte codehighlighting-Ordner hinein. Im TinyMCE-Editor sollte jetzt ein "Insert code"-Button hinzugekommen sein. Funktionieren sollte das Ganze auch schon. Nur ist es halt noch ein wenig hässlich... Das Design, das in diesem Artikel vorgestellt wird, gefällt mir schon viel besser. Im nächsten Schritt fasse ich das Vorgehen aus dem Artikel zusammen.

Schritt 3: GeShi verschönern

Als erstes passen wir die Ausgabe des GeShi-Plugins so an, dass als Überschrift ein markanter Balken mit der verwendeten Programmiersprache angezeigt wird. Bearbeitet werden muss die Datei "geshi.php", beheimatet im Joomla-Verzeichnis unter /plugins/content/geshi/geshi/geshi.php . Sie muss mit einem Editor eurer Wahl geöffnet und an zwei Stellen erweitert werden. Um den Namen der verwendeten Programmiersprache in der Kopfzeile anzuzeigen, muss die Zeile

var $header_content = '';

durch folgenden Inhalt ersetzt werden:

var $header_content = '{LANGUAGE} Code:';

Für den CSS-Style kann die Zeile

var $header_content_style = '';

durch diesen Inhalt ersetzt werden:

var $header_content_style = 'background: none repeat scroll 0 0 #C95000;border-bottom: 3px solid #FEA104;color:#fff;font-size: 1.3em;padding-left: 3px;text-transform: uppercase;';

Fertig. Jetzt schlage ich noch vor, das einheitliche Grau des Inhaltsbereiches in abwechselnd blaue und weiße Zeilen zu verwandeln. Dazu muss im verwendeten Template im Head-Bereich der index.php dieser JavaScript-Code hinzugefügt werden:

<script type="text/javascript">// <![CDATA[
  ( function($) {
    $(document).ready(function(){
      $('.php li:nth-child(odd)').addClass('odListItem');
      $('.php li:nth-child(even)').addClass('evenListItem');
      $('.html4strict li:nth-child(odd)').addClass('odListItem');
      $('.html4strict li:nth-child(even)').addClass('evenListItem');
      $('.css li:nth-child(odd)').addClass('odListItem');
      $('.css li:nth-child(even)').addClass('evenListItem');   
      $('.javascript li:nth-child(odd)').addClass('odListItem');
      $('.javascript li:nth-child(even)').addClass('evenListItem');       
    });
  } ) ( jQuery );
// ]]></script>

Außerdem fehlen noch ein paar CSS-Angaben, die in einer CSS-Datei in eurem Template definiert werden müssen:

pre{ 
background: none repeat scroll 0 0 #F1F1F1; 
border: 1px dotted #D3D3D3; 
margin-bottom:10px; 
white-space: pre-wrap; /* css-3 */ 
white-space: -moz-pre-wrap; /* Mozilla */ 
white-space: -pre-wrap; /* Opera 4-6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
word-wrap: break-word; /* Internet Explorer 5.5+ */ 
} 

pre ol li{ 
margin: 0 0 0 20px !important; 
padding: 4px; 
} 

pre ol { 
margin: 0 0 0 10px !important; 
} 

.odListItem{ 
background:#fff 
} 

.evenListItem{ 
background:#EFFEFF 
}

 

Fertig! Ich hoffe ich konnte euch damit ein wenig Arbeit ersparen...

Programmierung Webentwicklung Joomla TinyMCE

Kommentar schreiben