# 028: Kodu sintakses izcelšana, 2. daļa - CSS-triki

Anonim

Mēs tikko esam instalējuši Prism.js un saņēmuši darbu.

Šajā ekrānuzņēmumā mēs atrodam tēmu ar nosaukumu Tomorrow Theme un iesakām tās krāsas sintakses izcelšanā. Lai ātri uzzinātu, faila augšdaļā mēs izveidojam nelielu krāsu taustiņu. Mēs arī izdarām dažus minējumus par to, kas ir kas, vismaz lai sāktu. Tas, ar ko mēs beidzam, krāsu ziņā ir labi, bet nav iespaidīgi. Ja šodien pārlūkojat vietni, pamanīsit, ka krāsu tēma ir vairāk līdzīga krēslai, kuru es agrāk mīlēju TextMate, un es šobrīd mīlu Sublime Text 2.

Mēs beidzam, pievienojot galvenes joslas koda fragmentiem. Mums nav faktiskas iezīmēšanas, lai to izdarītu (kas, iespējams, ir labs, tas galvenokārt ir tikai dekorators), mēs to pievienojam, izmantojot pseido elementu un ģenerēto saturu, izmantojot relkoda atribūtu. Lielākajai daļai CSS-Tricks esošā koda ir šis atribūts. Ja tas tā nav, tas nav liels darījums. Mēs šeit īsti neizmantojam relpareizā veidā, taču mani tas pārāk neuztrauc.

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

Mēs saskaramies ar nelielu problēmu, padarot šo pseido elementu 100% platu ar polsterējumu. Izrādās, ka mūsu izvēles rūtiņas lieluma deklarācija uz * selektora neietekmē pseidoelementus (kaut kā ir jēga), tāpēc mēs atjauninām mūsu Normalize, lai to iekļautu.