# 027: Penyorotan Sintaks Kode, Bagian 1 - Trik CSS

Anonim

Sejauh yang saya ingat, saya menggunakan Google Code Prettify untuk menerapkan penyorotan sintaks pada blok kode pada CSS-Tricks. Anda tahu, di mana dalam garis seperti itu test , bagiannya memiliki warna yang berbeda dari testbagiannya. Ini sangat membantu untuk keterbacaan kode. Ini juga membantu pembaca langsung memahami apa yang mereka lihat sebagai blok kode (orang suka memindai artikel, Anda tidak tahu).

Dalam desain baru ini, kami memutuskan untuk menggunakan Prism.js yang baru dirilis. Bobotnya sedikit lebih ringan dan lebih cepat. Ini juga disesuaikan untuk bekerja hanya dengan HTML, CSS, dan JavaScript, yang 95% dari kode pada CSS-Tricks. Saya juga sangat menyukai bagaimana nama kelas yang digunakan untuk mewarnai dinamai secara rasional.

Kami mulai mencari tahu bagaimana tepatnya menggunakannya. Pertama-tama, kami memberi tahu CodeKit untuk menggabungkan pustaka ini ke dalam file JavaScript global kami (yang sejauh ini kosong, tapi kami akan menulis kode di sana nanti). Kami menghubungkan file JavaScript yang dikompresi di bagian footer yang kami sertakan.

Kami membutuhkan waktu satu menit untuk memahami bahwa tidak ada yang Anda "panggil", ini hanya berfungsi dengan asumsi Anda memiliki nama kelas yang benar. Kami menyelesaikannya dengan bermain-main dengan CSS sedikit dan membuat kode terlihat lebih seperti yang selalu ada di CSS-Tricks.