Bunter Code

„Bunter Code“ ist für Nutzende eine hilfreiche Sache. Er erleichtert das Lesen. Mein minimalistischer Ansatz, der Betrieb meiner Seiten ohne dicke Bibliotheken von externen Servern, stand „schicken“ Lösungen bisher entgegen.

Verfügbaren externen Bibliotheken haben sich wegen „extern“ selbst aus dem Rennen genommen. Meine Behelfslösung mittels PHP-Funktion highlight_string für gelegentlich mal einfärben hat die Seiten mit niedrigschwelligen Formatanweisungen im Quellcode geflutet. Die Darstellung konnte nur eingeschränkt kontrolliert werden. Vor allem ist diese Funktion für PHP-Code gedacht. Alle anderen Programmiersprachen werden zwar durchaus ansprechend, doch keineswegs immer einer dort geltenden Logik folgend, eingefärbt.

Für „Programmcode bunt machen“ gibt es schon recht lange den „Generic Syntax Highlighter“, kurz »GeSHi«. Den hatte ich mir vor Jahren im Kontext mit einem anderen CMS angesehen. Dort wäre eine Einbindung ausgesprochen komplex geworden, weshalb die Integration verworfen wurde. Im Hinterkopf blieb – fälschlicherweise – GeSHi als Grund des Scheiterns. Andere sporadisch untersuchten Ansätze, z.B. Javascripte mit imposantem Codevolumen, erwiesen sich alle für die eigenen Wünsche als unzureichend. Deshalb geriet vor wenigen Tagen GeSHI erneut in den Fokus. Könnte ja besser geworden sein. Schnell war klar: „Damals“ lag es keinesfalls an GeSHi…

Das ist vergleichbar geradeaus wie das Webseiten-Erzeugen mit OffSiteEdit. Auf einer „HTTP:“-Seite — vor der moderne Browser eindringliche Gefahrenwarnungen schalten — findet sich eine umfangreiche Dokumentation, mit der eine Implementation hier bei BUOA1 in wenigen Minuten integrieren ließ. Der (relevante) SRC-Ordner von GitHUB enthält die augenscheinlich gepflegtesten Daten, in denen gemeldete Fehler beseitigt wurden.

Eine Beispiel-Implementation bei CMS-Simple war der Schlüssel für die Verwendung. Damit war das Erstellen von zwei OffSiteEdit-Modulen ein „Klacks“. Das eine kann mit ein paar Markdown-Erweiterungen des Werkzeugs aus der Markdown-Datei direkt „Code bunt machen“, die andere lädt dafür eine Datei. Sie ersetzen kompatibel die bisherige highlight_string-Variante. Einen großen Teil der Seiten mit Code hier bei BUOA sind bereits darauf umgestellt.

Besonders angenehm ist die Verwendung von Stylesheets, die statt zugeordneter Farbbefehle verwendet werden können. Das macht den Code für die Code-Darstellung signifikant schlanker. Die erforderliche Ergänzung im Stylesheet ist übersichtlich:

/* Geshi stylesheet */
.geshi {
  border: none;
  font-size:0.7em;
  font-family:Courier,sans-serif,system-ui;
  line-height:1.1em;
}
.geshi .li1{background:#252525;}
.geshi .li2{background:#272727;}
.geshi .br0{color:#CC3366;} /* Klammern */
.geshi .co0,.geshi .co1,.geshi .coMULTI{color:#99CC99;}  /* Kommentare */
.geshi .st0,.geshi .st_h{color: #ff4444;}
.geshi .me0,.geshi .me1{color: #FF6600;}
.geshi .me2{color:#ffcc66;}
.geshi .kw1{color:#003399;}  /* Schlüsselworte 1 */
.geshi .kw2{color:#0033CC;}  /* Schlüsselworte 2 */
.geshi .kw3{color:#3333CC;}  /* Schlüsselworte 3 */
.geshi .kw4{color:#333399;}  /* Schlüsselworte 4 */
.geshi .sy0{color:#6600FF;}  /* Symbole */
.geshi .nu0{color:#ff2288;}  /* Zahlen */ 
.geshi .re0{color:#FF9900;}  /* Frei 1… */ 
.geshi .re1{color:#CC9933;}
.geshi .re2{color:#FF9933;}
.geshi .re3{color:#CC6666;}
.geshi .re4{color:#FF6633;}
.geshi .re5{color:#FF3333;}

Die momentan verwendeten Farben sind aus dem Bauch heraus gewählt. Das wird absehbar iterative Verfeinerungen erfahren, was mit der zentralen Steuerung im Stylesheet einen vernachlässigbaren Aufwand verursacht.

Fazit

1. GeSHi ist eine PHP-Datei, die sich mühelos in einer (PHP-)Webseite integrieren lässt.
2. Die vorhandenen Sprachdateien können rückwirkungsfrei auf die eigenen Anforderungen reduziert werden.
3. Es werden keine externen Bibliotheken angefordert, der Code selbst wird – bei entsprechender Verwendung – nur aufgerufen, wenn er benötigt wird und bleibt auf dem Server2.

Der eigene minimalistische Ansatz, sowie die „warnfreie“ Seite (keine Cookies, keine externen Links beim Seitenaufruf) sind damit problemlos umsetzbar3.