Syntax Highlighting mit Prism
Plugins und Scripte zum farbigen Strukturieren von Quellcode gibt es einige. Mit Prism ist ein weiteres Script erschienen, das im Vergleich zu den anderen mir bekannten Methoden einige Vorteile bietet. Ihr müsst beispielsweise keinen für das Plugin angepassten Quellcode verwenden, sondern werdet vielmehr gezwungen semantisch korrektes HTML5-Markup zu schreiben. Das Script lässt sich darüber hinaus kinderleicht anpassen, kommt in drei Designs daher und ist gerade einmal 1.5KB groß.
Wenn Ihr Prism verwenden möchtet müsst ihr lediglich das JavaScript- und das CSS-File im head einbinden. Anschließend definiert ihr die Sprache des jeweiligen Code-Snippets über das HTML5-Language-Attribut.
<pre><code class="language-css">p { color: red }</code></pre>
- Prism
- Introducing Prism – lea.verou.me
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
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
[…] 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 […]
Danke für die Empfelung. Bisher habe ich noch keinen Highlighter gefunden, welcher CSS3 erkennt und so einfach zu implementieren ist.
Wiedermal ein sehr interessanter Post, habe bisher ganz einfach gist (gist.github.com) benutzt für Code Beispiele, ist allerdings etwas umständlich. Prism scheint mir da etwas simpler zu sein.
[…] 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 […]
Danke für den Hinweis auf dieses tolle Plugin, das werde ich gleich mal in meinen Blog einbauen. (Mein jetziger Highlighter reagiert leider nicht auf CSS3…)