Kami baru saja menginstal Prism.js dan membuatnya berfungsi.
Dalam screencast ini kami menemukan tema yang disebut Tomorrow Theme dan memasukkan warna-warnanya ke dalam penyorotan sintaks. Kami membuat kunci warna kecil di bagian atas file untuk referensi cepat. Kami juga membuat beberapa tebakan tentang apa, setidaknya untuk memulai. Apa yang kita hasilkan, warna bijaksana, tidak masalah tetapi tidak spektakuler. Jika Anda menjelajahi situs hari ini, Anda akan melihat tema warna yang lebih mirip Twilight, yang dulu saya suka di TextMate dan saat ini saya suka di Sublime Text 2.
Kami menyelesaikannya dengan menambahkan bilah header ke cuplikan kode. Kami tidak memiliki markup sebenarnya untuk melakukan ini (yang mungkin bagus, sebagian besar hanya sebagai dekorator) kami menambahkannya dengan menggunakan elemen semu dan membuat konten melalui relatribut pada kode. Sebagian besar kode yang ada di CSS-Tricks memiliki atribut ini. Jika tidak, bukan masalah besar. Kami tidak benar-benar menggunakan reldengan cara yang benar di sini, tetapi saya tidak terlalu khawatir tentang itu.
pre(rel):before ( content: attr(rel); )Kami mengalami sedikit masalah dengan membuat elemen semu itu 100% lebar dengan padding. Ternyata deklarasi ukuran kotak kami pada * selector tidak mempengaruhi elemen pseudo (agak masuk akal), jadi kami memperbarui Normalisasi kami untuk memasukkannya.