# 028: Kod Sözdizimi Vurgulama, Bölüm 2 - CSS Hileleri

Anonim

Prism.js'yi yeni kurduk ve çalıştırdık.

Bu ekran video kaydında, Yarın Teması adlı bir tema buluyoruz ve renklerini söz dizimi vurgulamasına dahil ediyoruz. Hızlı başvuru için dosyanın tepesine küçük bir renk anahtarı oluşturuyoruz. En azından başlamak için, neyin ne olduğu konusunda da bazı tahminler yapıyoruz. Sonuçta elde ettiğimiz şey, renk açısından, tamam ama muhteşem değil. Bugün siteye göz atarsanız, renk temasının daha çok TextMate'te sevdiğim ve şu anda Sublime Text 2'de sevdiğim Twilight'a benzediğini fark edeceksiniz.

Başlık çubuklarını kod parçacıklarına ekleyerek bitiriyoruz. Bunu yapmak için gerçek bir işaretlememiz yok (ki bu muhtemelen iyidir, çoğunlukla sadece bir dekoratördür) onu sözde bir öğe kullanarak ekliyoruz relve koddaki öznitelik aracılığıyla içerik oluşturuyoruz . CSS Hilelerindeki mevcut kodların çoğu bu özelliğe sahiptir. Olmazsa, önemli değil. Burada gerçekten reldoğru şekilde kullanmıyoruz , ama bunun için fazla endişelenmiyorum.

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

Bu sözde öğeyi dolgu ile% 100 geniş yapmakta küçük bir problemle karşılaşıyoruz. * Seçicideki kutu boyutlandırma bildirimimizin sözde öğeleri etkilemediği (biraz mantıklıdır), bu nedenle Normalleştirmemizi bunu içerecek şekilde güncelliyoruz.