[UPDATE] Drupal: Code-Snippets mit Syntax-Highlighting für Fckeditor

Puh, was für eine Tortur! Ging doch wirklich der ganze Tag dafür drauf, ein Code-Snippet Plugin für den Fckeditor zu finden. Auf den ersten Blick sah das sehr einfach aus, mit dem Geshi-Filter bekommt man auch sehr schnell schöne Ergebnisse. Nur steckt der Teufel leider wieder im Detail. So muss man mit nassen Augen mit ansehen, wie plötzlich das Code-Snippet bis auf die erste Zeile verschwindet, sobald man den entsprechenden Artikel editiert.
Der Grund ist, dass die WYSIWYG-Editoren wohl mit den Zeilenumbrüchen nichts anfangen können. Da hat es auch nichts genutzt, den "\n nach <br />"-Filter auszuschalten. Eine Möglichkeit wäre, das Code-Snippet einzufügen und vom Editor alle Sonderzeichen umwandeln zu lassen. Wenn man diese Stelle markiert, dann könnte der Code clientseitig per Javascript geparsed werden (weil klar ist, wie das Format aussieht). Und genau das machen wir jetzt!

Um es nicht zu spannend zu machen, das brauchen wir alles:

• ein Plugin für den Fckeditor (das einzig funktionierende hier gefunden)
• das Drupalmodul syntaxhighlighter
• und zu guter Letzt das eigentliche Herzstück: die Javascript-Bibliothek SyntaxHighlighter in der neuesten Version 

Zuerst installieren wir das Fckeditor-Plugin wie auf der Plugin-Website beschrieben.
[Update] Anstatt der fckconfig.js wie in der Installationsanleitung angegeben, verwenden wir die fckeditor.config.js im Modulordner. Nicht vergessen den Browser- und Drupalcache zu leeren! Der richtige Ordner ist "modules/fckeditor/plugins".

Das Drupalmodul können wir wie üblich nach "sites/all/modules/" entpacken.
Als letzter Schritt will die SyntaxHighlighter lib nach "sites/all/modules/syntaxhighlighter/" entpackt werden. In "modules/syntax.../syntaxhighlighter/" befinden sich dann die Ordner "scripts, src und styles".

Damit können wir das Drupalmodul aktivieren und konfigurieren. Es ist zu empfehlen nur die nötigsten Brushes zu laden (also nur die Programmier-/Skriptsprachen deren Code wir posten möchten). Damit lässt sich der Traffic einschränken.

Im Editor finden wir nun den Button. Darüber können wir jetzt unseren Code einfügen. TATA! Geschafft!
Oder nicht? Darauf achten, dass als Eingabeformat "Full HTML" ausgewählt ist, sonst werden die Tags gleich wieder beschnitten. Auf der Projektseite des Moduls steht zwar, dass es auch mit "Filtered HTML" funktioniert, das tut es aber nur, wenn man den Code mit {\syntaxhighlighter OPTIONS } (ohne Backslash) kennzeichnet, was der FCKEditor-Button aber leider nicht kann. Es wäre sicher möglich etwas JS des Buttons anzupassen um das hinzubekommen. Da ich hier aber der einzige User bin und ich mir vertraue, spare ich mir das ;)

Und jetzt raus mit euren Quellcodes!

Beispiel:

/**
 * Receive postcard from someones holiday.
 */
function dosser_highscore_report_holiday_js($version, $name, $script_version) {
  if ($script_version == variable_get('dosser_highscore_holiday_script_version', '1.0.3')) {
    $versions = unserialize(variable_get('dosser_highscore_versions', 'a:0:{}'));
    if (array_key_exists($version, $versions)) {
      watchdog('dosser_highscore_holiday', '@dosser (@version) is in holiday', array('@dosser' => $name, '@version' => $version), WATCHDOG_NOTICE);
      db_query('UPDATE {dosser_highscore_'. $version .'} SET holiday = holiday+1 WHERE name = \'%s\'', $name);
      drupal_json(array('status' => TRUE, 'msg' => t('A postcard from @names holiday was successfully send to @url. Thank you!', array('@name' => $name, '@url' => url('<front>', array('absolute' => TRUE))))));
    }
    else {
      watchdog('dosser_highscore_holiday', 'Wrong version received: @version', array('@version' => $version), WATCHDOG_NOTICE);
      drupal_json(array('status' => FALSE, 'errmsg' => t('Dossergame version not recognized. Please use the holiday report script provided at @url.', array('@url' => url('<front>', array('absolute' => TRUE))))));
    }
  }
  else {
    drupal_json(array('status' => FALSE, 'errmsg' => t('Your holiday report script version is outdated. Please take a look at @url for a new one.', array('@url' => url('<front>', array('absolute' => TRUE))))));
  }
  exit;
}