GeSHi-Darstellung in Serendipity ändern

Quick'n'Dirty Weg

In der Datei serendipity_event_geshi/serendipity_event_geshi.php findet man eine Funktion:

function geshicallback($matches) 
         $geshi = new GeSHi($matches[3], $geshilang, $pathtogeshi);
         $geshi->set_header_type(GESHI_HEADER_DIV);
         if ($showln)
             $geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS);
         // Have to get rid of newlines.
         // Left align per suggestion from Norbert Mocsnik
         $geshi->set_overall_style('text-align: left;');
         $geshi->set_overall_class('geshi');
         return str_replace("\n", '', $geshi->parse_code());
     }
}

Die Zeile mit dem Aufruf von "set_overall_style()" kann mit eigenen Style-Attributen versehen werden. In meinem Fall:

$geshi->set_overall_style('text-align: left; background-color: #bbb; color: #333; 
border: dashed; border-width: thin; border-color: grey;');

Das wär's.

Update: Lösung mit CSS bzw. Zuweisung mehrerer CSS-Klassen

Eigentlich gibt es einen empfehlenswerteren Weg für das Vorhaben und zwar über CSS. GeSHi Plugin generiert für jeden Codeblock eine HTML-Struktur, die etwa so aussieht:

<div class="language geshi">Der Code</div>

Dabei wird "language" je nach gewählter Sprache ersetzt.

Hier kommen nun die CSS Basiseigenschaften, die mir damals fehlten um GeSHi-Ausehen über CSS zu ändern. Wenn ein class-Atribut aus zwei (oder mehreren) Wörtern besteht, dann bedeutet dies, dass dem Element mehrere CSS-Klassen zugeordnet werden.

Das bedeutet, um allen GeSHi-Blöcken bestimmte Style-Attribute zuzuweisen, muss man eine einzige GeSHi-Klasse, z.B. in der style.css (Stylesheet des s9y-Themes) erstellen. In meinem Fall wäre dies

 .geshi{
    background-color: #bbb; 
    color: #333; 
    border: dashed; 
    border-width: thin; 
    border-color: grey;
}

Möchte man nun weitere weitere Änderungen des Aussehens nur für spezielle Sprachen hinzufügen, erstellt man für jede Sprache eine weitere CSS-Regel nach dem .geshi{}-Block und füllt diese mit Eigenschaften. Für PHP z.B. - ".php{}". Weiteres über Verwendung mehrerer Klassen in einem Element findet man hier.

Änderungen an globalen s9y/themes Stylesheets vermeiden

Möchte man nicht an den Theme Stylesheets (wegen möglichen Problemen beim Upgrade) vermeiden, erstellt man eine eigene CSS-Datei und fügt in diese die gewünschten CSS-Regeln ein. Um diese dann einzubinden ohne dass man wiederrum an s9y-Quellcode rumoperiert, habe ich das Plugin für HTML-Head Nuggets verwendet. Vorgehensweise in Kürze:

• CSS-Datei auf Dateiebene anlegen, mit Regeln füllen und Benutzer/Rechte entsprechend setzen
• Head-Nugget Plugin installieren und aktivieren
• Im Backend via Plugin CSS einbinden, in meinem Fall

  <link href="http://www.fail2fail.com/custom_user.css" type="text/css" rel="stylesheet"/>

Es gibt nur einen Nachteil: Die CSS-Datei wird nur im Frontend eingebunden. CSS Eigenschaften, die über Head-Nugget eingebunden werden, sind nicht in der Artikelvorschau im Backend sichtbar.

Thanks to David for the hint about CSS way.