Auf dem kulturbanause Blog bin ich vorgestern auf diesen Beitrag über Prism — ein kleines Highlight Plugin für Code — gestoßen: Syntax Highlightning mit Prism.
Ein gutes Highlightning ist meiner Meinung nach sehr wichtig in einem Blog, in dem öfter Codeschnipsel gepostet werden. Vorher habe ich Crayon genutzt und da schon über ein kleines Problem mit der Codedarstellung im RSS Feed berichtet. Auch diesem Problem und der Umständlichkeit der Lösung wollte ich mit Prism begegnen.
Ein weiterer Vorteil gegenüber direkten WP-Plugins ist, dass man problemlos die Einbindung der Dateien selber festlegen kann, also den JS-Code mit in eine andere Datei, die sowieso genutzt wird, kopieren und das gleiche mit dem CSS Code tun.
Das oben angesprochene Problem mit dem Feed besteht hier bei mir nicht mehr, wenn man in der Visuellen Ansicht Code eingibt. Das ist auch notwendig, da bspw. HTML Code nicht als Code angezeigt wird, wenn man ihn in der HTML Ansicht eintippt.
Beispiel
So lässt sich ein Kasten mit CSS Code Darstellen:
<pre class="language-css"><code class="language-css">.prism{ transition:all 1s ease 0s; }</code></pre>Code-Sprache: HTML, XML (xml)Inline
Auch inline-Code ist möglich, indem der pre-Tag weggelassen wird.
Fazit
Ein tolles kleines und schlankes Plugin, das einfach und ohne komplizierte Plugin-spezifische Tags einzusetzen ist und in drei Designs daher kommt, die leicht anzupassen sind. Zeilen Hervorhebung und unter Anderem Verlinkung in dem Code Beispiel lässt sich zusätzlich auswählen.
Hi, ich würde für meinen künftigen Blog gerne auch einen anständigen Syntax-Highlighter verwenden und Prism ist mit Abstand mein Favorit. Ich habe in WordPress nur das Problem, dass a) PHP von WordPress nicht akzeptiert wird und daher nicht angezeigt werden kann und b) z.B beim Wechseln der Ansicht von Text auf Visuell der Code verloren geht.
Wie habt ihr dieses Problem gelöst?
Lg Bernd
Hi Bernd,
du musst den Code vor dem Einfügen escapen, also Zeichen wie
<und>in die entsprechenden HTML-Entitys umwandeln, damit WordPress den Code im Beitrag darstellt. Ich nutze dafür freeformatter.com. Einfach den Code einfügen, escape drücken und das Ergebnis in die Textansicht des WordPress-Editors einfügen.Viele Grüße
Florian
Hi Florian,
danke für den Tipp! Das ist eine sehr gute Lösung. Vorallem springt das beim Wechseln der Ansicht nicht wieder um 🙂
Sieht im Code nur leider immer etwas durcheinander aus aber ich wüsste ansonsten keinen anderen Weg.
Vielen Dank!