Joomla: Code-Syntax-Highlighting in Beiträgen (Content-Plugin + Editor-Button "SyntaxHighlighterGhsvs")

Artikel ist obsolet/antiquiert!

Syntax-Hervorhebung oder -Highlighting meint, bestimmte Wörter und Variablen-Arten eines Programm-Codes je nach Bedeutung in verschiedenen Farben lesbarer darzustellen. Viele Editoren, die Programmierer nutzen, unterstützen Code-Hervorhebung und variieren die Darstellung je nach Programmier-Sprache. Das Plugin SyntaxHighlighterGhsvs hilft beim Anzeigen von "gehighlightetem Code" in Joomla-Beiträgen.

Ich habe die Weiterentwicklung dieses Plugins beendet. Ich glaube nicht, dass es unter Joomla 4 läuft, aber ???. Ich persönlich verwende als Ersatz das Plugin PLG_CONTENT_PRISMHIGHLIGHTERGHSVS und den zugehörigen Editor-Button PLG_EDITORS-XTD_PRISMHIGHLIGHTERGHSVS.

Zugegebenermaßen verwendet das Plugin namens Content - Syntax Highlighter by GHSVS.de (PLG_CONTENT_SYNTAXHIGHLIGHTERGHSVS) als Basis einen JavaScript-Dinosaurier, nämlich die Syntaxhighlighter-Bibliothek von Alex Gorbatchev in Version 3.0.90, aber ich wollte unbedingt folgende Features im Plugin für meine eigene Seite haben:

  • Zeilennummern vor den Zeilen, da ich mich in meinen codeschnipsel-begleitenden Texten gerne auf Zeilennummern beziehe.
  • Hervorhebung/Akzentuierung einzelner Zeilen, um Lesern das Suchen und Finden von Schlüsselzeilen zu erleichtern.

Diese Dinge sind mir wichtiger als um jede Millisekunde beim Laden meiner Webseite zu feilschen.

Voraussetzungen/Einschränkungen

Das Content-Plugin und das zugehörige Editor-Button-Plugin erwarten, dass diese beiden Ordner für PHP bzw. Joomla beschreibbar sind, um dort Hilfsdateien abzulegen:

  • /media/plg_content_syntaxhighlighterghsvs/js/_combiByPlugin/
  • /media/plg_editors-xtd_syntaxhighlighterghsvs/html/

Bei einer "stinknormalen" Joomla-Installation ist das der Fall und man kann sich beruhigt zurücklehnen. Die Ordner werden bei Installation der Erweiterungen angelegt.

Das Editor-Button-Plugin funktioniert nur im Backend. Oder anders: Da ich Frontend-Editing "nicht mag" und keine meiner Joomla-Installationen das aktiviert hat, habe ich den Button dort nie getestet. Wenn wer Interesse hat und das ausprobieren möchte, bin ich gern bereit, ein Installationspaket bereitzustellen, das diese Backend-Restriktion nicht hat. Wenn's erfolgreich getestet wurde, übernehme ich das Frontend-Feature auch gerne in's nächste, offizielle Release.

Terminologie

Damit man die Begriffe Brush und Alias mal gehört hat. Braucht man nicht wirklich wissen, wenn man sich den Editor-Button installiert. Hier geht's zum Download: plg_editors-xtd_syntaxhighlighterghsvs

Brushes und Aliase

Brushes

Wie oben schon gesagt, heben Highlighter-Funktionalitäten je nach dargestellter Programmiersprache bestimmte Bestandteile anders hervor. Dafür benötigt das Plugin unterschiedliche JavaScript-Dateien, die diese Formatierungsanweisungen enthalten. Das sind die so genannten Brushes oder Brushdateien. Diese kann man sich bei Interesse hier anschauen (die Dateien, die mit shBrush beginnen).

Aliase

Jetzt muss man dem Plugin aber noch mitteilen, welches Brush es für einen formatiert anzuzeigenden Code laden soll. Dafür gibt es die Aliase, die man dem PRE-Tag, der den zu "highlightenden" Code umschließt im class-Attribut mitgibt. Beispiel:

<pre class="brush: js">
    HIER DANN DER ZU HIGHLIGHTENDE CODE
</pre>

Die Magie im Beispiel ist das class="brush:js" in Zeile 1, das das Alias js verwendet. Das führt dazu, dass der Code innerhalb des PRE-Tags als JavaScript-Code formatiert wird und dafür von meinem Plugin die Brush-Datei shBrushJScript.js geladen wird.

Die Aliase werden immer in Kleinschreibung angegeben.

Viele der Brushes können durch mehrere, unterschiedliche Aliase angefordert werden. Hier eine Liste:

Liste von Brushes versus Aliase

Notwendiges Plugin ist nicht aktiviert oder installiert. Inhalt kann nicht angezeigt werden

Plugin-Konfiguration

Das Plugin bietet nicht alle Konfigurationsmöglichkeiten, die die Bibliothek von Alex Gorbatchev anbietet. Fragen Sie mich auf der GitHub-Projektseite meines Plugins oder per Kontaktformular, wenn Sie wissen wollen, wie sie weitere verwenden können oder händisch von Code-Block zu Code-Block globale Einstellungen überschreiben können.

Tabulator `Syntaxhighlighter Config`

CSS Stylesheet

Beeinflusst das Aussehen des dargestellten Codes, also z.B. schwarzer Hintergrund, weißer Hintergrund usw. Spielen Sie einfach rum. Siehe hierzu auch unten Überschrift Tabulator "Custom CSS".

Combine needed brushes in single file

Empfohlen: JA.

Auf ein und der selben Seite können diverse Brushes zum Einsatz kommen, z.B. ein Code-Block der PHP-Code anzeigt, ein weiterer, der JavaScript zeigt, ein weiterer für HTML.

Das führt dazu, dass neben den zwei Basis-Javascripten, die der Codehighlighter immer benötigt, drei weitere Brushes geladen werden müssen. Das Plugin fasst diese fünf JavaScript-Dateien in eine einzelne zusammen und speichert diese im Ordner /media/plg_content_syntaxhighlighterghsvs/js/_combiByPlugin/, um sie bei Bedarf wiederverwenden zu können. Das spart später Leistung, da die Einzeldateien nicht erneut zusammengesucht werden müssen.

Sie können den Ordner per FTP löschen, wenn Sie den Inhalt erneuern lassen wollen. Einen Knopf gibt es dafür nicht.

Active For Robots

Empfohlen: NEIN.

Im Normalfall ist es Quatsch das Plugin laufen zu lassen, wenn Suchmaschinen oder andere Bots die Seite besuchen. Die können mit dem formatierten Code eh nichts anfangen. In 2019 gibt es allerdings Gerüchte, dass Google irgendwann auch mal "JavaScript kann". Gibt's halt im Plugin diese Einstellung. Wozu auch immer gut ;-)

Strip end BR tags?

Voreingestellt: NEIN.

Staht sie auf JA, werden <br />-Tags am Ende der Zeilen entfernt. Ob auch "modernes" <br> entfernt wird, weiß ich nicht.

Tag Name

Ist unveränderlich eingestellt auf pre-Tags. Gemeint ist der den Code umgebende Block <pre class="brush:js">...</pre>.

[auto-links] (Clickable Links)

Empfohlen: NEIN.

Hat man A-Tags, also Links in seinem formatierten Code, möchte man die normalerweise nicht aktiv, also klickbar in der Code-Darstellung haben.

[quick-code] (Select by double click)

Durch Doppelklick auf einen Codeblock, kann der Besucher den ganzen Code "in einem Rutsch" markieren und so leichter rauskopieren.

[class-name]

Der den Code umgebende DIV-Container, der vom JavaScript on-the-fly erstellt wird, bekommt diese zusätzliche CSS-Klasse.

[gutter] (line numbers)

Zeilen-Nummerierung an/ausschalten. Ausgeschaltet wird man vermutlich eigenes CSS "nachschnitzen" müssen, weil der Code links "anklebt". Z.B. den Rahmen entfernen, der im Tabulator "Custom CSS" in einer der Regeln gesetzt wird, weil ich das hübscher finde ;-) Oder links ein Padding?

Tabulator `Custom CSS`

Hier findet man einige CSS-Regeln, die man eigentlich auch in seiner Lieblings-CSS-Datei unterbringen kann. Man kann voreingestellte Regeln deaktivieren, ergänzen, löschen oder eigene, neue erstellen. Es hängt einfach vom verwendeten Template, Bootstrap-Version etc. ab, welche man brauchen kann oder zusätzlich benötigt. Ausprobieren! Dafür gibt es die Active-Einstellung pro CSS-Regel.

Beachten Sie, falls Sie neue Regeln setzen, um das aktuell gewählte CSS StyleSheet zu überschreiben, häufig !important verwenden müssen, egal, ob Sie das mit den Plugin-Einstellungen versuchen oder in einer eigenen CSS-Datei..