Hatırlayabildiğim kadarıyla, CSS Hilelerindeki kod bloğuna sözdizimi vurgulamasını uygulamak için Google Code Prettify'ı kullandım. Böyle bir çizgide nerede, biliyor test , bölüm farklı bir renktir testparçası. Bu, kod okunabilirliği için çok yararlıdır. Ayrıca okuyucuların neye baktıklarının bir kod bloğu olduğunu anında anlamalarına yardımcı olur (insanlar makaleleri taramayı sever, bilmiyor musunuz).
Bu yeni tasarımda, bunun yerine yeni yayınlanan Prism.js ile gitmeye karar verdik. Oldukça hafif ve daha hızlı. Ayrıca CSS Hilelerindeki kodun% 95'i olan HTML, CSS ve JavaScript ile çalışacak şekilde uyarlanmıştır. Ayrıca boyama için kullanılan sınıf isimlerinin rasyonel olarak isimlendirilme şeklini de çok beğeniyorum.
Tam olarak nasıl kullanacağımızı anlamaya başlarız. Her şeyden önce, CodeKit'e bu kitaplığı genel JavaScript dosyamıza eklemesini söylüyoruz (şimdiye kadar boş, ancak daha sonra kod yazacağız). Dahil edilen altbilgi bölümümüzde sıkıştırılmış JavaScript dosyasını bağlarız.
"Aradığınız" bir şey olmadığını anlamamız bir dakikamızı alır, sadece doğru sınıf adlarına sahip olduğunuzu varsayarsak işe yarar. Biraz CSS ile oynayarak ve kodu her zaman CSS Hilelerindeki gibi görünmesini sağlayarak bitiriyoruz.