Der Hinweis von macx hat mich dann vor einigen Tagen doch dazu gebracht über den Einsatz eines WordPress-Plugins nachzudenken, die Code-Beispiele nicht nur formatieren sondern auch farblich hervorheben (Syntaxhighlightning).
Ich habe mich gegen so ein Plugin immer etwas gesträubt, weil ich sie erstens nicht für unbedingt notwendig hielt und weil ich mich dunkel erinnern konnte, dass ein Plugin in Verbindung mit Syntaxhervorhebung eine Sicherheitslücke in WordPress aufgerissen gehabt hat. Daher war ich etwas skeptisch.
Dann habe ich mich doch entschieden so ein Plugin (in meinem Fall WP-Syntax) einzusetzen, weil ich aus der neueren Zeit von keinen Problemen etwas lesen konnte und weil mich der Komfort dann doch überzeugt hat, hier ein Beispiel:
div#inhalt {
background: #eee; color:#333;
margin: 1em; padding: .5em;
border: 1px dashed #900;
}
Man muss die Code-Sonderzeichen nicht maskieren, dass übernimmt das Plugin automatisch und dadurch, dass der Code innerhalb von einem <pre>-Element eingefügt wird, werden auch die Einrückungen berücksichtigt. Um die Syntaxhervorhebung auch zu erreichen muss man innerhalb des <pre>-Element ein lang-Attribut einfügen, z. B. <pre lang="php"> für ein PHP-Beispiel. Das ganze basiert auf GeSHi. So weit so gut.
Aber es gibt auch ein paar Punkte die mich stören. So wohl bei den WP-Plugins wie auch bei GeSHi werden die Code Beispiele durch span-Elemente und nicht durch code-Elemente ausgezeichnet. Semantisch ist das nicht richtig, weil eben das code-Element für Code-Beispiele vorgesehen ist.
Wenn ich dann noch die Zeilennummerierung einschalte, dann erstellen mir sowohl WP-Syntax wie WP-CodeBox eine Tabelle anstatt eine nummerierte Liste. Gut, jetzt kann man diskutieren, was in so einem Fall richtiger wäre: eine nummerierte Liste oder eine Tabelle. Ich persönlich finde auch eine Definitionsliste sinnvoll, weil ich einer Zeilennummer eine bestimmte Code-Zeile zuweise.
Auf jeden Fall finde ich keine der Lösungen perfekt und keine kommt an die Qualität eines Code-Beispiels ran, der manuell erstellt wurde. Auf der anderen Seite habe ich ehrlich gesagt auch keine Lust mehr, wie in den drei Teilen meiner WordPress-Serie hunderte von Code-Zeilen händisch einzupflegen. Ein Dilemma.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Ich muss ja schon sagen, dass ich da Glück habe, bisher keinen Code posten zu wollen / müssen. Das soll aber auch noch mal irgendwann kommen und dann stehe ich vor dem gleichen Problem. Aber bevor das losgeht, muss ich mein Blog erst mal wieder wirklich zum Leben erwecken und werde mir den Post hier warmhalten und auf die anderen Kommentare warten 🙂
Ich hatte vor geraumer Zeit auch einmal einige Code Highlighter getestet. Ich bin für mich zu dem Ergebnis gekommen, das ich auf Grund des aufgeblasenen Codes durch span-Elemente und inline-styles darauf verzichte. Beschwehrt hat sich bei mir noch keiner darüber.
Sorry Perun,
aber ich find die Codehervorhebung in deinen Theme Tutorials füchterlich
Wenn ich eine Codezeile kopieren will um sie nicht abtippen zu müssen, dann bekomm ich vor jeder Zeile eine # …
Das kanns doch auch nicht sein oder?
@Jared,
hast du einen besseren Vorschlag für die Zeilennummerierung von Code-Beispielen? Ist keine patzige Bemerkung sondern eine ernstgemeinte Frage.
Hallo,
ich würde den SyntaxHighlighter von Erik Range nutzen.
Dieses Plugin setzt auf dem SyntaxHighlighter von Alex Gorbatchev auf. Umgewandelt wird der Code in eine formatierte TextArea. Code kopieren stellt hier kein Problem dar und es werden auch keine zusätzlichen Spans oder Divs erzeugt.
Leider ist das Plugin nicht unter WordPress Extends gehostet.
Gruß,
m.
@Marcus,
meinst du dieses Plugin hier: SyntaxHighlighter Plus?
Oha…es scheint mir fast, dass es sich dabei um ein ähnliches Plugin handelt bzw eines, das die gleiche Grundlage nutzt. 🙄
Daher sollte auch das Ergebnis das Gleiche sein 😉
Ich würde auf jeden Fall eine OL-Liste nehmen. Bin auch grad bei der Thematik und hab das bisher so aufgesetzt:
http://jowra.com/testdrive/codetest.html
OL-Liste und CODE mit Klassen. Dabei läßt sich der Code wunderbar kopieren. Hintergrund o.ä. kann man per {background} einsetzen.
Ich hatte mir Geshi früher schon mal angeschaut, da sollte man den Output recht einfach anpassen können, oder? Wenn nicht schreib ich selbst eine kleine Routine, zu mal m.E. drei, vier Farben völlig ausreichen, sonst wird es anstatt leserlich einfach nur bunt. 😉
Leider nein 🙁
Aber ich suche auch seit gestern da ich einige Beiträge die Code enthalten umgestellt habe.
Sobald ich was gefunden habe, sag ich bescheid!
@Jowra
Auch bei deinem Test bekomm ich beim kopieren keinen reinen Quellcode.
Es ist einfach extrem mühsam bei z.B. 30 Zeilen Code erst immer die Raute oder die Zahl vor jeder Zeile zu entfernen 🙁
Da will ich dem Besucher keinen Code präsentieren wenn ich ein Tutorial schreibe.
@Jowra,
in meinem WordPress-Tutorial nutze ich auch eine nummerierte Liste, aber das ist das was Jared bemängelt hat, wenn man Copy&Paste macht, dann nimmt man die Listenzeichen mit.
@Jared
Welches Betriebssystem verwendest Du, wie kopierst Du in die Zwischenablage und in welchen Editor? Ich hab weder mit Vladimirs Lösung hier, noch mit meiner die Probleme mit der Raute.
@Perun Die etlichen CODEs mit Klasse in meinem Beispiel sind eigentlich auch Quatsch. Ein PRE-CODE-Block mit SPANs ist vom Markup her gesehen eigentlich die richtige Verfahrensweise. Alternativ würde sich dann nur noch die JavaScript-Lösung anbieten (Starlight von Dean Edwards z.B.) wobei letzten Endes die Frage ist, ob sich der ganze Aufwand für ein paar Code-Zeilen lohnt. Geshi hat immerhin ne Größe von über 100kB. Die PHP-Lösung belastet den Server ganz schön, die JS-Lösung den Browser. Und größere Code-Beispiele sollte man sowieso gezippt zum Download anbieten. 😉
Ich glaub ich lass meinen Code einfarbig. *g*
@Jowra
Ich benutz Windows XP und mit Firefox 2.0.0.14!
Na ja kopieren tu ich wie meisten anderen auch – Text mit der Maus markieren, STRG+C, meinen Phase5 oder Notepad++ öffnen und STRG+V 🙂
Gibt es da denn unterschiedliche Ergebnisse?
@Perun
Ich habe grade noch bissle mit WP-Syntax gespielt und irgendwas muss ich den Einstellungen geändert haben 😕 Wenn ich jetzt bei mir Code markiere und im Editor einfüge dann habe ich weder Zahlen noch Rauten.
Kanns mir nicht erklären
Jared, ich habs vorhin noch mal getestet und es kommt tatsächlich darauf an, wie man kopiert. 😉
Wenn Du den Code-Block von rechts unten nach links oben markierst, aber links nicht bis zu den Zahlen gehst, dann funktioniert es prima. Gehst Du zu weit nach links, werden die Zahlen mitkopiert.
Hi,
das Problem mit den Zeilennummern ist ein Problem mit Firefox, da dieser nummerierte Listen selbstständig mit diesen Extrazeichen ausstattet – da gibt es kaum etwas, was man da als Entwickler eines SyntaxHighlighters (in meinem Fall GeSHi) tun kann. Das Problem ist zudem schon seit Jahren bekannt – eine Lösung ist jedoch ungemein schwerer als es auf den ersten Blick scheint, da die Code-Ausgabe oftmals nicht mehr durch Parsen des Codes, sondern durch Pattern-Matching gemacht wird, um möglichst viel Performance zu erreichen.
Auch bei Mozilla ist im Bugtracker genau eben dieser Fehler seit jahren anhängig (siehe den Bugtracker vom GeSHi, da ist der genaue Bugreport dazu verlinkt, für mehr Details).
Für das Highlighting mit span- statt code-Tags spricht theoretisch nichts, jedoch ist würde dies in vielen Highlightern nicht unerheblichen Aufwand bedeuten, dies nachträglich zu ändern – Patches zum konfigurierbaren Umschalten welcome 😉
Die Idee mit dem formatierten TextArea klingt zwar gut, aber wie soll das in Bezug auf die Zeilennummern da funktionieren – oder verwechsel ich da grad was?
Und grad in Bezug auf die Performance wurde beim GeSHi von jeher schon auf Entwickler und die Webserver geachtet: Beim GeSHi lassen sich (bis auf einige wenige Funktionen) jegliche Highlighting-Funktionen abschalten. Wer also nur Schlüsselwörter markeirt haben will, kann dies haben; er muss es GeSHi nur vorher sagen.
Wer noch weitere Vorschläge und Verbesserungen am GeSHi hat, oder (funktionierende) Vorschläge für die Lösung der oben genannten Probleme hat, darf diese gern als Vorschläge bei SF für den GeSHi melden – ich würd mich auf jeden Fall freuen.
Mit freundlichen Grüßen,
B. Bauman AKA BenBE
Syntaxhighlighting bereits auf der Webseite mit dem Codesnippet finde ich recht überflüssig, zumal es die bereits oben angesprochenen Probleme bereitet. Zum Arbeiten im Editor möchte ich die Farbigkeit auch nicht mehr missen, aber im Rahmen einer Webseite? Da sehe ich mir den Code auch selten länger an, da es oft Darstellungsprobleme gibt (extrem viele Zeilenumbrüche aufgrund schmaler Contentbereiche oder Scrollbalken zum Beispiel), sondern kopiere mir ihn in den Editor und schaue ihn mir dort in Ruhe in einer komfortableren Umgebung an.
ich weiß gar nicht was ihr alle habt.
ich kann peuns code oben im artikel z.B. ohne probleme kopieren und habe keine raute oder sonstige zahlen vor meinem code.
ich werde wp-syntax 0.7 mal ausprobieren. auch wenn einige meinen, der code sei nicht semantisch genug, naja mein gott, um mal hier und da paar zeilen code zu präsentieren sollte das doch mehr als zu 100% genügen. wenn jemand eine page betreibt, die nur quellcodes beinhaltet, der hat eben vorerst einmal pech gehabt.
gruß
damian
Niemand, wirklich niemand braucht Zeilennummern in Codebeispielen in Blogs. Man kann Texte auch so schreiben, dass man ohne Zeilennummer Bezug nehmen kann. Zudem kann man Codebeispiele mit Zeilennummern nicht per Copy und Paste einfach so kopieren.
Und ich setze noch eines drauf: Ein Blog ist keine IDE, und nur bei der IDE machen Zeilennummern Sinn.