Hurtig Tips Slik legger du til syntaks som fremhever ethvert prosjekt

I denne leksjonen bruker vi en JavaScript-basert syntax-høyttaler for raskt å legge til en syntaksuthevingsfunksjonalitet til et hvilket som helst webprosjekt - selv på en enkel HTML-side!

---

Trinn 1 - Last ned kildekoden

Du kan laste ned kildefilene til syntaksfrekvensen her.

---

Trinn 2 - Dra src Katalog inn i prosjektet ditt

Jeg omdøper generelt denne mappen til merkepenn. Ikke slett noe inni her, med mindre du ikke forventer å bruke noen av de språkspesifikke JavaScript-filene.

---

Trinn 3 - Importer nødvendige filer

Innenfor HTML-filen din (eller hvilken side som er ansvarlig for visning av visningen), importerer du begge prettify.css og prettify.js filer.

Legg merke til hvordan vi har plassert vårt skript nederst på siden, like før avslutningen kropp stikkord. Dette er alltid et smart trekk, da det forbedrer ytelsen.

Deretter trenger vi noe å jobbe med! Syntakslyset vil søke etter enten a pre eller kode element som har en klasse av pretty. La oss legge til det nå.

 
 (funksjon () var jsSyntaxHighlighting = 'rocks';) (); 

---

Trinn 4 - Ringer på pretty () Funksjon

Det siste trinnet er å utføre pretty () funksjon. Vi kan også plassere denne delen av koden nederst på siden.

         
 (funksjon () var jsSyntaxHighlighting = 'rocks';) (); 
    

Hvis vi nå ser siden i nettleseren?

Vel det var lett! Men, som et siste bonussteg, hva om vi ønsker å bytte temaet? I så fall kommer alt sammen til å redigere stilarket slik du ser det. Enda bedre, det er en håndfull stilark i temagalleriet som du er fri til å bruke. Jeg personlig liker ørkenen temaet. Hvis du vil bruke den, kopierer du CSS fra lenken over, lager et nytt stilark i prosjektet ditt, og lim inn CSS i det. Deretter oppdaterer stilarket fra og innenfor hode delen av dokumentet ditt.

Seriøst - kan det bli enklere enn det?