Accentsconagua

Snelle tip Syntaxis benadrukken voor elk project

Code
Share

In deze les gebruiken we een JavaScript-gebaseerde syntax-markeerstift om snel een functie voor syntaxisaccentuering toe te voegen aan elk webproject - zelfs op een eenvoudige HTML-pagina!

Stap 1 - Download de broncode

U kunt de syntaxis-markeerstiftbronbestanden hier downloaden.

Stap 2 - Sleep de src Directory in uw project

Ik hernoem over het algemeen deze map naar highlighter. Schrap hier niets binnen, tenzij u niet verwacht dat u enkele van de taalspecifieke JavaScript-bestanden gebruikt.

Stap 3 - Importeer de benodigde bestanden

Gebruik binnen uw HTML-bestand (of welke pagina ook verantwoordelijk is voor het weergeven van uw weergave) de prettify.css en prettify.js bestanden.

     untitled

Let op hoe we ons script onderaan de pagina hebben geplaatst, vlak voor het sluiten lichaam label. Dit is altijd een slimme zet, want het verbetert de prestaties.

Vervolgens hebben we iets nodig om mee te werken! De syntaxis-markeerstift zoekt naar een pre of code element dat een klasse heeft van prettyprint. Laten we dat nu toevoegen. 

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

Stap 4 - De telefoon bellen prettyprint () Functie

De laatste stap is het uitvoeren van de prettyprint () functie. We kunnen dit stukje code ook onderaan de pagina plaatsen. 

     untitled    
 (function () var jsSyntaxHighlighting = 'rocks';) ();

Als we nu de pagina in de browser bekijken?

Nou dat was makkelijk! Maar als laatste bonusstap, wat als we het thema van de markeerstift willen veranderen? In dat geval komt het er allemaal op neer om de stylesheet te bewerken zoals jij dat wilt. Nog beter, er zijn een handvol stylesheets in de themagalerij die je gratis kunt gebruiken. Ik hou persoonlijk van het Desert-thema. Om het toe te passen, kopieert u de CSS van de bovenstaande link, maakt u een nieuwe stylesheet in uw project en plakt u de CSS erin. Werk het stylesheet vervolgens bij vanuit de hoofd gedeelte van uw document. 

   untitled

Serieus - kan het eenvoudiger dan dat?

Code
×