Μόλις εγκαταστήσαμε το Prism.js και το λειτουργήσαμε.
Σε αυτό το screencast βρίσκουμε ένα θέμα που ονομάζεται «Tomorrow Theme» και ενσωματώνουμε τα χρώματα του στην επισήμανση της σύνταξης. Κάνουμε ένα μικρό πλήκτρο χρώματος στην κορυφή του αρχείου για γρήγορη αναφορά. Κάνουμε επίσης κάποιες εικασίες για το τι είναι, τουλάχιστον για να ξεκινήσω. Αυτό που καταλήγουμε, με χρώμα, είναι εντάξει αλλά όχι θεαματικό. Αν περιηγηθείτε στον ιστότοπο σήμερα, θα παρατηρήσετε ότι το θέμα χρώματος μοιάζει περισσότερο με το Twilight, το οποίο μου άρεσε πολύ στο TextMate και αυτή τη στιγμή αγαπώ στο Sublime Text 2.
Τελειώνουμε προσθέτοντας τις γραμμές κεφαλίδας στα αποσπάσματα κώδικα. Δεν έχουμε πραγματική σήμανση να το κάνουμε αυτό (το οποίο πιθανότατα είναι καλό, είναι κυρίως διακοσμητικό) το προσθέτουμε χρησιμοποιώντας ένα ψευδο στοιχείο και δημιουργήσαμε περιεχόμενο μέσω του relχαρακτηριστικού στον κώδικα. Το μεγαλύτερο μέρος του υπάρχοντος κώδικα στο CSS-Tricks έχει αυτό το χαρακτηριστικό. Αν όχι, δεν είναι μεγάλη υπόθεση. Δεν χρησιμοποιούμε relμε τον σωστό τρόπο εδώ, αλλά δεν ανησυχώ υπερβολικά για αυτό.
pre(rel):before ( content: attr(rel); )Αντιμετωπίζουμε ένα μικρό πρόβλημα με το να κάνουμε αυτό το ψευδο στοιχείο πλάτος 100% με επένδυση. Αποδεικνύεται η δήλωση μεγέθους κουτιού στον επιλογέα * δεν επηρεάζει τα ψευδο στοιχεία (κάπως νόημα), επομένως ενημερώνουμε το Normalize για να το συμπεριλάβουμε.