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

Geschrieben von Jonas

Benutzerbild

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.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Bernd Kleinschroth
    schrieb am 07.03.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

    Antworten
  2. Prism Syntax Highlightning
    schrieb am 07.04.2013 um 19:43 Uhr:

    […] 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 […]

    Antworten
  3. Nico
    schrieb am 20.08.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.

    Antworten
  4. platzh1rsch
    schrieb am 17.08.2012 um 09: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.

    Antworten
  5. Prism Syntax Highlightning | Webdesign Florian Brinkmann Blog
    schrieb am 09.08.2012 um 12:04 Uhr:

    […] 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 […]

    Antworten
  6. Florian
    schrieb am 07.08.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…)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

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 →