# 027: Penyorotan Sintaksis Kod, Bahagian 1 - Trik CSS

Anonim

Seingat saya, saya menggunakan Google Code Prettify untuk menerapkan sorotan sintaks pada blok kod pada CSS-Tricks. Anda tahu, di mana dalam garis seperti test , bahagiannya adalah warna yang berbeza daripada testbahagian tersebut. Ini sangat membantu untuk pembacaan kod. Ia juga membantu pembaca memahami dengan segera apa yang mereka lihat adalah blok kod (orang suka mengimbas artikel, tidakkah anda tahu).

Dalam reka bentuk baru ini, kami memutuskan untuk menggunakan Prism.js yang baru dikeluarkan. Beratnya sedikit lebih ringan dan lebih pantas. Ini juga disesuaikan untuk bekerja hanya dengan HTML, CSS, dan JavaScript, yang merupakan 95% kod pada CSS-Tricks. Saya juga suka bagaimana nama kelas yang digunakan untuk mewarna dinamakan secara rasional.

Kami mula mengetahui bagaimana sebenarnya menggunakannya. Pertama sekali, kami memberitahu CodeKit untuk menggabungkan perpustakaan ini ke dalam fail JavaScript global kami (yang kosong setakat ini, tetapi kami akan menulis kod di sana kemudian). Kami menghubungkan fail JavaScript yang dimampatkan di bahagian footer yang disertakan.

Kami memerlukan satu minit untuk memahami bahawa tidak ada sesuatu yang anda "panggil", ia hanya berfungsi dengan andaian anda mempunyai nama kelas yang betul. Kami menyelesaikannya dengan bermain-main dengan CSS sedikit dan menjadikan kodnya lebih mirip seperti yang selalu ada pada CSS-Tricks.