kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Syntax Highlighting mit Prism

Prism Syntax Highlighter

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ß.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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 Syntax Highlighter
Screenshot der Prism-Website.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Florian

    Verfasst am 7. August 2012 um 15:46 Uhr.

    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…)

  2. platzh1rsch

    Verfasst am 17. August 2012 um 9:23 Uhr.

    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.

  3. Nico

    Verfasst am 20. August 2012 um 17:47 Uhr.

    Danke für die Empfelung. Bisher habe ich noch keinen Highlighter gefunden, welcher CSS3 erkennt und so einfach zu implementieren ist.

  4. Bernd Kleinschroth

    Verfasst am 7. März 2017 um 16:17 Uhr.

    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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.