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ß.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
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 Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
Feedback & Ergänzungen – 6 Kommentare
Kommentar zu dieser Seite
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
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…)