Από όσο θυμάμαι, χρησιμοποίησα το Google Code Prettify για να εφαρμόσω την επισήμανση σύνταξης στο μπλοκ κώδικα στα CSS-Tricks. Ξέρετε, πού σε μια γραμμή όπως test , το μέρος είναι διαφορετικό χρώμα από το testμέρος. Αυτό είναι πολύ χρήσιμο για την αναγνωσιμότητα του κώδικα. Βοηθά επίσης τους αναγνώστες να κατανοήσουν άμεσα αυτό που βλέπουν είναι ένα μπλοκ κώδικα (οι άνθρωποι θέλουν να σαρώσουν άρθρα, δεν ξέρετε)
Σε αυτό το νέο σχέδιο, αποφασίζουμε να ακολουθήσουμε το πρόσφατα κυκλοφορούμενο Prism.js. Είναι λίγο ελαφρύτερο και γρηγορότερο. Είναι επίσης προσαρμοσμένο να λειτουργεί μόνο με HTML, CSS και JavaScript, το οποίο είναι το 95% του κώδικα στα CSS-Tricks. Μου αρέσει επίσης πολύ ο τρόπος με τον οποίο λογικά ονομάζονται τα ονόματα τάξεων που χρησιμοποιούνται για χρωματισμό.
Αρχίζουμε να καταλαβαίνουμε πώς ακριβώς να το χρησιμοποιήσουμε. Πρώτα απ 'όλα, λέμε στο CodeKit να συνενώσει αυτήν τη βιβλιοθήκη στο παγκόσμιο αρχείο JavaScript (το οποίο είναι κενό μέχρι τώρα, αλλά θα γράψουμε κώδικα εκεί αργότερα). Συνδέουμε το συμπιεσμένο αρχείο JavaScript στο μέρος που περιλαμβάνεται στο υποσέλιδο.
Μας παίρνει ένα λεπτό για να καταλάβουμε ότι δεν υπάρχει τίποτα που «καλείτε», απλά λειτουργεί υποθέτοντας ότι έχετε τα σωστά ονόματα τάξεων. Τελειώνουμε παίζοντας λίγο με το CSS και κάνοντας τον κώδικα να μοιάζει περισσότερο όπως πάντα στα CSS-Tricks.