WordPress Geshi Plugin <-> WordPress iG Syntax Hiliter

… oder besser wie kombiniere ich beide

Als ich heute am späteren Abend auf gerrit’s tagebuch vorbeigeschaut habe, ist mir der Syntax Highlighter ins Auge gestochen, welcher dort benutzt wird.

“Ui – sieht das gut aus” – hab ich mir gedacht. Das will ich auch haben

Gesagt – Getan – Gerrit gefragt – es ist der IG Syntax Highlighter

Die Aufgabe war sofort klar: den bestehenden Geshi Syntax Based Highlighter ablösen und durch IG Syntax Highlighter ersetzen. Als ich gerade dabei war, viel mir auf, dass beide ja auf Geshi aufsetzen und ich bereits eine Geshi-Version auf dem Server installiert hatte – mhhh – dann kann ich doch evtl. die bereits vorhandene nutzen?? Ich wollte also beide vergleichen und musste feststellen, dass sie mitnichten gleich sind. Die auf dem Server bestehende Version war wesentlich umfangreicher – sie unterstützte viel mehr Sprachen. Zusammen mt Gerrit’s Hinweis kam mir dann die Idee – hey – lass doch einfach die bestehende Bibliothek auf dem Server und füge nur das Plugin hinzu – mit etwas Glück stehen ja sofort alle Sprachen zur Verfügung…. und dann kam die Ernüchterung

Als ich mir den Quelltext vom IG Syntax Highlighter angesehen habe, habe ich sofort verstanden warum dies nicht funktionieren kann…

Ein kleiner Auszug…

function doJAVA($mTxt, $sNum=1) {
..........
}	// END doJAVA

Naja – davon gibt es pro Sprache eine Methode und die sehen alle sehr sehr ähnlich aus – mhhhh – da kann ich schon verstehen warum nicht sooooo viele Sprachen unterstützt werden *uuups* ich hoffe man nimmt mir diese Kritik nicht übel. Im Gegensatz dazu vielleicht ein Auszug aus dem Geshi Syntax Based Highlighter, welcher bei neuer Geshi-Bibliothek ohne Änderung sofort einsatzfähig ist…

function GeshiSyntaxColorer($text) {

    $codes = array();
    $str = uniqid('');
    $i=0;

    while (preg_match("hier-steht-eine regexp-die-sich-nicht-mit-den-tags-veträgt", $text, $matches)) {
        $i++;
        $codes[$i]['lang'] = $matches[1];
        $codes[$i]['code'] = $matches[2];
        $text = preg_replace("hier-steht-eine regexp-die-sich-nicht-mit-den-tags-veträgt", $str.$i, $text, 1);
    }

    $i=0;

    while (preg_match("#".$str."([0-9]+)#", $text, $matches)) {
        $i++;
        $geshi = new GeSHi($codes[$i]['code'], $codes[$i]['lang'], ABSPATH.'/wp-content/plugins/geshi/');

        $code = $geshi->parse_code();

        $text = preg_replace("#".$str."([0-9]+)#", $code, $text, 1);
    }

    return $text;
}

Diese Methode fackelt somit völlig allgemeingültig alle möglichen Sprachvarianten ab – ja – es gibt nur diese eine.
Aber ohne den schönen Style

Ok – also müssen beide kombiniert werden – ganz klar.

Die Änderungen die ich vornehmen musste waren wirklich wenige – ich hoffe ich habe sie einigermaßen allgemeigültig abbilden können – an einer Stelle leider nicht, vielleicht habt ihr Verbesserungsvorschläge – sagt Bescheid.

Zuesrt habe ich in der oben genannten function GeshiSyntaxColore folgende Zeile

$code = $geshi->parse_code();

durch diese ersetzt

$code = "<div class="geshi_frame"><div class="geshi_lang">" . $codes[$i]['lang'] . ":</div><br /><div id="" . $codes[$i]['lang'] . "-" . $i . "">n" . $geshi->parse_code() . "n</div></div>";

Somit kann ich über definierte Style-Klassen von aussen das Aussehen steuern – einen Rahmen zeichnen und die QullcodeArt angeben – gemäß IG Syntax Highlighter
Um die Style-Klassen mit Leben zu füllen, habe ich mich an den wp_header Hook gehängt und rufe eine function auf, welche den Stylesheet einbindet:

add_action('wp_head', 'AddGeshiStyle');

und die Funktion dazu:

$url = get_settings('siteurl');

function AddGeshiStyle()
{
    global $url;
    echo "<style type="text/css">@import url( " . $url . "/wp-content/plugins/geshi.css.php );</style>";
}

Ich habe keine normale css-Datei gewählt, sondern eine php-Datei um an den Stylesheet evtl. Image-Referenzen bzw. Pfade zu übergeben – damit dieser zwar mit absoluten Pfaden, aber an Hand der Tagebuch-URL arbeitet.
Ich hoffe dies ist nachvollziehbar?!

Zu guter Letzt also noch die Datei geshi.css.php angelegt und mit folgendem Leben gefüllt:

header("content-type: text/css");

.geshi_frame
{
    padding: 3px 3px 10px 8px;
    border: 1px solid #8A3207;
    background-color: #FEFEFE;
    font-size: 13px;
    font-family: 'Courier New', Courier, monospace;
    overflow: auto;
    white-space: nowrap;
}

.geshi_lang
{
    font-weight: bold;
}

Fertig ist die Mixtur aus den beiden Syntax-Highlightern… und die Styles sind einigermaßen ‘customizeable’

Ach – ja – da war doch eine Sache die mir nicht so ganz gefiel. Ich habe noch folgenden Code in der while-Schleife der GeshiSyntaxColor-Funktion eingebaut:

    $geshi->set_header_type(GESHI_HEADER_DIV);
    $geshi->set_line_style('color: #29303B;', 'color: #8A3207;' , false);
    $geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS,  2);

Hier sieht man, dass ich feste Farbangaben an Geshi übergeben musste – mhh – leider ist mir hier keine bessere Lösung eingefallen. Aber vielleicht wisst ihr ja Rat….

Schlagwörter:blog, php, plugin, wordpress