# 028: Penyorotan Sintaksis Kod, Bahagian 2 - Trik CSS

Anonim

Kami baru sahaja memasang Prism.js dan berjaya.

Dalam screencast ini, kami menjumpai tema yang disebut Tema Esok dan menyatukan warnanya ke dalam sorotan sintaks. Kami membuat sedikit kunci warna di bahagian atas fail untuk rujukan cepat. Kami juga membuat beberapa tekaan mengenai apa itu, sekurang-kurangnya untuk memulakan. Apa yang akhirnya kita dapat, warna yang bijak, baik-baik saja tetapi tidak hebat. Sekiranya anda melayari laman web hari ini, anda akan melihat tema warnanya lebih seperti Twilight, yang dulu saya gemari di TextMate dan ketika ini saya suka di Teks Sublime 2.

Kami selesai dengan menambahkan bar tajuk pada coretan kod. Kami tidak mempunyai markup sebenar yang melakukan ini (yang mungkin bagus, kebanyakannya hanya penghias) kami menambahkannya dengan menggunakan elemen pseudo dan kandungan yang dihasilkan melalui relatribut pada kod. Sebilangan besar kod yang ada pada CSS-Tricks mempunyai sifat ini. Sekiranya tidak, bukan masalah besar. Kami tidak relbetul-betul menggunakan cara yang betul di sini, tetapi saya tidak terlalu risau mengenainya.

pre(rel):before ( content: attr(rel); )

Kami menghadapi sedikit masalah dengan menjadikan elemen pseudo selebar 100% dengan pelapik. Ternyata deklarasi ukuran kotak kami pada pemilih * tidak mempengaruhi elemen semu (agak masuk akal), jadi kami mengemas kini Normalisasi kami untuk memasukkannya.