Wer in seinen Beiträgen Codeschnipsel posten will, der wird ziemlich schnell vor ein paar Problemen stehen. Der HTML-Standard hat für die Code-Ausgabe zwar die zwei Tags “PRE” und “CODE” vorgesehen, aber die bringen nur bedingt Erfolge.
Das PRE-Tag gibt den eingegebenen Code samt Einrückungen genau so aus und mit dem CODE-Tag kann man den eingeben Code noch zusätzlich per CSS stylen. Kling mal recht gut, bringt nur leider in der Praxis jede Menge Probleme mit sich wie z.B.:
- Der Code sprengt das Layout, weil keine Zeilenumbrüche erkannt werden (soll ab CSS3 gelöst sein).
- Der Benutzer kann sich den Code nicht so leicht kopieren, ausdrucken und unformatiert anzeigen lassen.
Im Wordpress-Plugin-Verzeichnis geistern unzählige Plugins rund um den Bereich Code und Syntax-Highlighting herum, aber das Meiste davon ist schlicht unbrauchbar. Bei dem Plugin “WP-Codebox” dachte ich es sei perfekt, bis sich herausstellte, dass es Probleme mit den HTML-Entities hat. Die Zeichen <> werden als < und > ausgegeben und nicht umgewandelt. Man könnte zwar in Wordpress im HTML-Bereich die Zeichen uncodiert eintragen nur dann würde der Text einfach raus gelöscht, sobald man wieder in den Grafik-Modus wechselt.
Nach langem Suchen kam ich auf das Plugin “SyntaxHighlighter Evolved” welches endlich alle Funktionen erfüllt und darüber hinaus auch bis Wordpress 2.8 kompatibel ist 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Alexs Blog | Mehr als nur bloggen...</title> </head> <body> <div id="container"> <div id="post"> <h1>SyntaxHighlighter Evolved</h1> <?php echo 'Ein super Plugin für die CODE-Ausgabe!' ?></div> </div> </body> </html>
Ist ein Interessantes Thema.
Sehr Hilfreich Danke!
Hallo Alex,
über Guru 2.0 – Wordpress-Plugin WP-Codebox bin ich auf Deine Seite gestoßen. die “Evolved”-Version des SyntaxHighlighters kannte ich bisher noch nicht, nutzte nur (außerhalb von WP) die Ausgangsversion: SyntaxHighlighter
Dachte, dass vielleicht diese Evolved-Version das Problem löst, Programmcode übernehmen zu können ohne die 1. Spalte = ohne die Zeilennummern. Doch man muss generell das Fensterchen mit dem unformatierten Code öffnen, damit man was direkt übernehmen muss. Etwas ungeschickt.
Hast du nun eigentlich diese Evolved-Version eingebunden? Wieso erscheint in dem Hilfe-Fenster trotzdem noch der Verweis auf die Ausgangsversion?
Gruß, carlos
Hallo Carlos,
das Plugin “SyntaxHighlighter Evolved” basiert hauptsächlich auf dem Code von SyntaxHighlighter (daher erscheint auch im Hilfe-Fenster SyntaxHighlighter). Zusätzlich wurde das Plugin um einige Code-Stücke von Automattic angereichert, damit es einfacher und besser mit Wordpress funktioniert.
Ich verwende dieses Plugin schon seit langem und kann es absolut empfehlen!
Die Zeilennummern kann man bei Bedarf jederzeit deaktivieren sowie zahlreiche weitere Einstellungen vornehmen. Mehr Details dazu findet man direkt bei den Einstellungen des Plugins.
Ja, das die Evolved-Version darauf basiert, hatte ich auf der Homepage gelesen. Mich trotzdem gewundert, wieso dann nicht auch explizit “Evolved” in dem hilfefenster genannt wird. Darum war ich etwas irritiert.
Dann beziehen sich also diese Neuerungen spez. auf die Arbeit mit WP (was ich, wie gesagt, selbst nicht nutze).
Die Zeilennummern finde ich ja schon geschickt (hmm, obwohl, bei den Codeschnippseln haben sie vielleicht doch keinen sonderlich hohen Zusatzwert, sofern man sich nicht im Text auf einzelne Zeilen beziehen möchte). Nur kann man so halt nicht mal zwei, drei Zeilen auf die Schnelle und ohne Nachbearbeitung (= Entfern der Zeilennummern) per Copy&Paste übernehmen. Dies ist also etwas nachteilig.
Ist aber wohl bei allen Highlightern der Fall, die DIVs statt Tabellen verwenden.
Gruß, Carlos
Hi Carlos,
ein direktes Copy & Paste ohne die Zeilennummern darzustellen ist mit Wordpress möglich. Möchte man beispielsweise PHP-Code einfügen, so gibt man im Textbereich einfach folgendes ein:
[ php gutter="false" ] hier dein code [ / php ]
Die Kennzeichnung “php” teil dem SyntaxHighlighter mit, dass es sich um PHP-Code handelt und “gutter”, dass er die Zeilennummern deaktivieren soll.
Ob das in einem anderen System als Wordpress funktioniert bezweifle ich, da dies extra auf Wordpress mit dem Code von Automattic zugeschnitten wurde…