Syntax Highlighting in Joomla: Endlich eine Lösung ohne Plugin-Ballast!
Wer Code auf seiner Webseite teilen möchte, steht oft vor einem Dilemma: Entweder man nutzt ein mächtiges Plugin, das die Ladezeiten der Seite in die Knie zwingt, oder der Code sieht einfach unschön aus. Ich war lange auf der Suche nach einer ganz einfachen Lösung, die ohne externe Bibliotheken oder schwere Plugins auskommt und habe schlichtweg nichts gefunden, was wirklich schlank und funktional zugleich war. Die meisten Lösungen sind für kleine Bastelprojekte völlig überdimensioniert. Deshalb habe ich mir ein eigenes System gebaut: Ein simpler, "unkaputtbarer" Code-Block, der direkt im Joomla-Editor funktioniert, absolut sicher ist und die Performance deiner Seite nicht beeinträchtigt.
So funktioniert das "Plug-in-freie" Code-Fenster
Hinter diesem System steckt kein kompliziertes Framework, sondern eine clevere Kombination aus drei Standard-Webtechnologien:
- Die textarea (Das Fundament): Das Herzstück ist ein einfaches Textfeld. Der Clou dabei: Eine textarea interpretiert den Inhalt nicht als HTML. Das bedeutet, dass kritische Zeichen wie die spitzen Klammern in deinem Arduino-Code (<SPI.h>) einfach als Text angezeigt werden, anstatt das Layout deiner Seite zu zerstören.
- Modernes CSS (Das Design): Über Inline-Styles geben wir dem Fenster den typischen "Dark-Mode"-Look. Wir begrenzen die Höhe auf etwa 10 bis 15 Zeilen (height: 16em;) und aktivieren einen Scrollbalken. So bleibt dein Artikel übersichtlich, auch wenn der gezeigte Sketch mehrere hundert Zeilen lang ist.
- Minimales JavaScript (Die Funktion): Ein winziges Skript im Hintergrund kümmert sich um den "Kopieren"-Button. Es markiert den Text im Fenster und legt ihn direkt in die Zwischenablage des Besuchers. Ein kurzes visuelles Feedback ("✓ Kopiert") zeigt dem Nutzer sofort, dass es geklappt hat.
Das Ergebnis siehst du unten: Du hast die volle Kontrolle, keine Abhängigkeiten von Drittanbietern und eine Webseite, die trotz Code-Beispielen blitzschnell bleibt. Es ist die perfekte Lösung für alle, die ihre Projekte im Netz so sauber präsentieren wollen, wie sie ihren Code schreiben.
Hier der Code zum einfügen, das meiste ist "ausgeklammert", weil ich keinen ausführbaren Code in einem Code einfügen kann. Wenn es funktioniert nutze einfach den Link unten, hier bekommst du den nicht "auskommentierte" Code als .txt.
Notwendige Einstellungen in Joomla
Damit dein Code beim Speichern nicht von Joomla oder dem Editor "zerfressen" wird, müssen zwei Bereiche angepasst werden:
1. JCE Editor-Profil (Das Werkzeug)
Standardmäßig filtert der JCE alles heraus, was nach Programmierung aussieht. Das musst du explizit erlauben:
- Gehe zu Komponenten -> JCE Editor -> Profile.
- Klicke auf dein Profil (meist Default).
- Unter Editor-Parameter -> Erweitert stellst du folgende Punkte auf "Ja":
- JavaScript erlauben
- PHP erlauben
- XHTML-Inline-Scripts erlauben
2. Joomla Textfilter (Die Türsteher)
Joomla selbst hat globale Filter, die Scripte blockieren.
- Gehe zu System -> Konfiguration -> Textfilter.
- Suche die Gruppe Super Benutzer und stelle sie auf "Keine Filterung".
- Nur so darfst du als Admin den benötigten <script>-Teil für den Kopieren-Button speichern.
Sicherheitshinweis: Frontend vs. Backend
Es ist extrem wichtig, zwischen der Sicherheit deiner Besucher und der Sicherheit deines Redaktionssystems zu unterscheiden:
- Im Frontend (Sicher): Für deine Webseitenbesucher besteht keine Gefahr. Die Lösung nutzt eine textarea, die Text nur anzeigt, aber nicht ausführt. Das JavaScript für den Button läuft nur lokal im Browser des Nutzers ab. Es gibt keine Verbindung zur Datenbank und keine Möglichkeit für Besucher, von außen Code einzuschleusen.
- Im Backend (Vorsicht bei mehreren Autoren): Das Risiko liegt rein auf der administrativen Ebene. Wenn du die oben genannten Filter deaktivierst, öffnest du die Tür für ausführbaren Code im Editor.
- Wenn du alleiniger Admin bist: Absolut unbedenklich. Du weißt, was du tust.
- Wenn viele Leute mitschreiben: Falls du Autoren oder Redakteuren Zugriff gibst, könnten diese (absichtlich oder versehentlich) schädliche Skripte in Beiträge einbauen, die dann z. B. andere Admins ausspionieren könnten.
Mein Rat: Aktiviere die Option "Keine Filterung" nur für den Super-Benutzer. Alle anderen Nutzergruppen sollten weiterhin streng gefiltert werden. So bleibt dein Backend eine Festung, während du im Frontend die volle Freiheit genießt.
