Codeschnippsel sauber anzeigen mit SyntaxHighlighter

Wenn man dem Leser hilfreiche Tipps zum Thema Webdesign geben möchte, kommt man um die Integration von Codeschnippseln nicht herum. Wenn es also darum ging HTML ordentlich im Editor darzustellen, verwendete ich bisher den Code Converter von Frank.

Nach den beiden neuen Beiträgen, “Error 404 – Not Found – Seite individuell gestallten” und “Suchformular mit Innentext” ist mir aber ein hässlicher Fehler aufgefallen. Der Code wurde zuweit auseinander, und je nach länge, gar nicht mehr angezeigt dargestellt.

Ein alternative musste her. Nach einigem Suchen wurde ich dann bei wordpress.org fündig.

SyntaxHighlighter ist ein JavaScript mit dem man auf seiner Seite die Möglichkeit hat Quellcode wie z.B. HTML, CSS oder PHP im HTML Format darzustellen und grafisch hervorzuheben. Insgesamt unterstützt es 18 Quellcodes.

Passend dazu gibt es für WordPress das Plugin “SyntaxHighlighter“.
Die Installation erklärt sich von selbst, und nach aktivieren ist es sofort einsetzbar.
Alles was man nur noch machen muss ist den Code:
[sourcecode language='quellcode']code here[/sourcecode] im HTML-Editor einzufügen.

An der Stelle, wo quellcode steht, kommt dann der jeweilige Code hinein. Fertig.
Heraus kommt ein sauberer schöner Code.

Man hat nun die Möglichkeiten, eine einfache Ansicht (view plain) zu bekommen. Das ganze in die Zwischenablage (copy to clipboard) zu kopieren. Oder aber den ganzen Code auszudrucken (print).

Mittlerweile gibt es das Plugin auch in der Version 2 und plus. Auch diese beiden Versionen liefen einwandfrei unter WP 2.7.

Einzige Unterschiede zu der ersten Version waren.

• Das aussehen der Codeliste kann nach Farben verändert werden.
• Anstatt Textlinks, sind Symbolbuttons hinzugekommen.
• Die verschiebbare Leiste unten ist verschwunden, dafür erscheint nun bei einer zusammenhängenden Zeile das Wrapping- Symbol.

Ich für mein Teil fand das aussehen mit dem Drucker, Papier, und dem Fragezeichensymbolen in einigen Bereichen zu erdrückend. Daher habe ich mich für den ersten Teil entschieden.

1 Kommentar

• Dentaku
  17. März 2009 / 09:52

  Interessant. Ich habe mich das bisher immer mit vim beholfen. Dessen eingebautes Syntax-Highlighting hat nämlich die überaus nützliche Funktion “Konvertieren nach HTML” (bei gvim einfach aus dem Menü auswählen, im Textmodus

  :runtime! syntax/2html.vim

  ). Den erzeugten HTML-Quelltext kann man in die Quelltextansicht des Editors kopieren.

  “Diesen Beitrag zitieren”

  
  

Jetzt Kommentieren!