Wir haben gerade Prism.js installiert und es funktioniert.
In diesem Screencast finden wir ein Thema namens "Tomorrow Theme" und fügen seine Farben in die Syntaxhervorhebung ein. Wir machen einen kleinen Farbschlüssel oben in der Datei als Kurzreferenz. Wir raten auch, was was ist, zumindest um zu beginnen. Was wir farblich erhalten, ist in Ordnung, aber nicht spektakulär. Wenn Sie heute auf der Website stöbern, werden Sie feststellen, dass das Farbthema eher Twilight ähnelt, das ich in TextMate und derzeit in Sublime Text 2 geliebt habe.
Zum Abschluss fügen wir die Kopfleisten zu Codefragmenten hinzu. Wir haben kein tatsächliches Markup, um dies zu tun (was wahrscheinlich gut ist, es ist meistens nur ein Dekorateur). Wir fügen es hinzu, indem wir ein Pseudoelement verwenden und Inhalte über das relAttribut im Code generieren. Der größte Teil des vorhandenen Codes in CSS-Tricks hat dieses Attribut. Wenn nicht, keine große Sache. Wir verwenden hier nicht wirklich relrichtig, aber ich mache mir darüber keine allzu großen Sorgen.
pre(rel):before ( content: attr(rel); )Wir haben ein kleines Problem damit, dieses Pseudoelement mit Polsterung 100% breit zu machen. Es stellt sich heraus, dass unsere Box-Sizing-Deklaration auf dem * Selektor keine Auswirkungen auf Pseudoelemente hat (was irgendwie sinnvoll ist), daher aktualisieren wir unsere Normalisierung, um dies einzuschließen.