Accentsconagua

Snabbtips Så här lägger du till syntax som belyser något projekt

Koda
Share

I den här lektionen använder vi en JavaScript-baserad syntaxhöjare för att snabbt lägga till en syntaxhöjningsfunktionalitet till ett webbprojekt - även på en enkel HTML-sida!

Steg 1 - Ladda ner källkoden

Du kan hämta källkodsfilerna för syntaxhöjare här.

Steg 2 - Dra src Katalog i ditt projekt

Jag byter namn på den här mappen till stryknings. Ta inte bort något inom det här, om du inte förutse att du använder några av de språkspecifika JavaScript-filerna.

Steg 3 - Importera nödvändiga filer

Inför din HTML-fil (eller vilken sida som är ansvarig för att visa din vy), importera båda prettify.css och prettify.js filer.

     ofrälse

Lägg märke till hur vi har placerat vårt manus längst ner på sidan, precis före stängningen kropp märka. Detta är alltid ett smart drag, eftersom det förbättrar prestanda.

Därefter behöver vi något att arbeta med! Syntaxstickaren söker efter antingen a pre eller koda element som har en klass av pretty. Låt oss lägga till det nu. 

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

Steg 4 - Ringer till pretty () Fungera

Det sista steget är att utföra pretty () fungera. Vi kan också placera den här koden längst ner på sidan. 

     ofrälse    
 (funktion () var jsSyntaxHighlighting = 'rocks';) ();

Om vi ​​nu ser sidan i webbläsaren?

Jo det var lätt! Men, som ett slutligt bonussteg, vad händer om vi vill byta temaet? I det fallet kommer allt att redigera stilarket hur du passar dig. Ännu bättre finns det en handfull stilark i temagalleriet som du kan använda. Jag gillar personligen Desert-temat. För att tillämpa det, kopiera CSS från länken ovan, skapa ett nytt stilark i ditt projekt och klistra in CSS i det. Nästa uppdatering av stilarket ingår från huvud delen av ditt dokument. 

   ofrälse

Allvarligt - kan det bli enklare än det?

Koda
×