Source Code in WordPress posten und Probleme mit dem TinyMCE-Editor eliminieren
Ziel:
- Source Code in WordPress posten
- Syntax Highlighting soll verfügbar sein
- WYSIWIG-Editing mit TinyMCE soll weiter verfügbar sein
Lesen Sie wie welchen Workarrounds dieses Ziel bei WordPress 2.3.2 ereicht werden kann:
Syntax Highlighting: Plugin WP-Syntax installieren
Das Plugin wrappt den Code standardmäßig in ein HTML-Tag dieser Art:
<pre lang=”LANGUAGE” line=”1″> Dein Programmcode </pre>
Folgende Probleme treten nun auf:
TinyMCE ersetzt in HTML/XML-Code wichtige Zeichen, wie z.B. eckige Klammern gnadenlos durch HTML-Entitäten. Dies passiert auch innerhalb von <pre> </pre> Blöcken. Die Internet-Browser zeigen dann aber die HTML-Entitäten im Klartext an, nicht als das Zeichen für das sie stehen. Der Code wird als unlesbar.
Workarround: man bringt den Syntax-Highliter GeSHi dazu div- statt pre-Tags zu verwenden.
Neues Problem: Dummerweise ersetzt TinyMCE nun die div-Tags gnadenlos durch a-Tags.
So lassen sich die Probleme lösen:
1) TinyMCE dazu bringen die div-Tags in Frieden zu lassen
Datei wordpress_webroot/wp-includes/js/tinymce/tiny_mce_config.php patchen
Zeile 25 alt:
Zeile 25 neu:
2) wp-syntax / GesHi dazu bringen mit DIV-Headern zu arbeiten
Analog wie von Felho beschrieben modifizieren um GeSHi auf die Verwendung von div-Tags umzuschalten
http://blog.felho.hu/posting-source-code-in-wordpress-escaping-and-syntax-highlighting-the-inserted-code.html
Zeilen 74/75:
$geshi->enable_keyword_links(false);
ersetzen durch:
$geshi = new GeSHi(htmlspecialchars_decode($code), $language);
$geshi->enable_keyword_links(false);
$geshi->set_header_type(GESHI_HEADER_DIV);
$geshi->set_tab_width(4);
Hinweis: Bei php4 die Funktion htmlspecialchars_decode weglassen!
3) In den Code-Editor d eine neue Schaltfläche “Source-Code” einfügen,
die es auf elegante Weise erlaubt den eingefügten Code in ein Steuertag für das
Plugin WP-Syntax einzufügen
wordpress_webroot/wp-includes/js/quicktags.js
modifizieren, wie Felho dies in seinem Blog beschrieben hat:
http://blog.felho.hu/posting-source-code-in-wordpress-escaping-and-syntax-highlighting-the-inserted-code.html