Wir haben gerade Prism.js installiert und zum Laufen gebracht.
In diesem Screencast finden wir ein Theme namens Tomorrow Theme und integrieren dessen Farben in die Syntaxhervorhebung. Wir erstellen oben in der Datei einen kleinen Farbschlüssel zum schnellen Nachschlagen. Wir machen auch einige Vermutungen, was was ist, zumindest am Anfang. Was wir farblich erreichen, ist in Ordnung, aber nicht spektakulär. Wenn Sie sich heute auf der Website umsehen, werden Sie feststellen, dass das Farbschema eher dem von Twilight ähnelt, das ich früher in TextMate liebte und derzeit in Sublime Text 2 liebe.
Wir beenden den Vorgang, indem wir die Kopfzeilen zu Code-Schnipseln hinzufügen. Wir haben keine tatsächliche Markup-Struktur, um dies zu tun (was wahrscheinlich gut ist, es ist meist nur ein Dekorationsmerkmal), wir fügen es über ein Pseudo-Element und generierten Inhalt über das Attribut rel auf dem Code hinzu. Der größte Teil des vorhandenen Codes auf CSS-Tricks hat dieses Attribut. Wenn nicht, ist das keine große Sache. Wir verwenden rel hier nicht wirklich auf die richtige Weise, aber ich mache mir darüber keine großen Sorgen.
pre[rel]:before {
content: attr(rel);
}Wir stoßen auf ein kleines Problem, wenn wir dieses Pseudo-Element mit Padding zu 100% breit machen. Es stellt sich heraus, dass unsere `box-sizing`-Deklaration für den `*`-Selektor keine Pseudo-Elemente beeinflusst (was irgendwie Sinn ergibt), also aktualisieren wir unser Normalize, um dies einzuschließen.
Ich bin mir ziemlich sicher, dass ich das auf deinem Blog gelesen habe… war das Problem nicht, dass der Universalselektor, den du verwendet hast, um `box-sizing` anzuwenden, nicht für `::before` und `::after` gilt, es sei denn, du machst `*::before` und `*::after` ??
Richtig! Also fügen wir das hinzu und beheben es =)
Wird das auf css-tricks noch verwendet? Und gibt es eine Möglichkeit, das Theme von hier zu bekommen?