Share
In questa lezione, utilizzeremo un evidenziatore della sintassi basato su JavaScript per aggiungere rapidamente una funzionalità di evidenziazione della sintassi a qualsiasi progetto Web, anche su una semplice pagina HTML!
Puoi scaricare qui i file sorgente di evidenziatore della sintassi.
Accentsconagua
src Directory nel tuo progetto In genere, rinominare questa cartella in evidenziatore. Non eliminare nulla qui, a meno che tu non preveda di utilizzare alcuni dei file JavaScript specifici della lingua.
All'interno del tuo file HTML (o di qualsiasi pagina è responsabile della visualizzazione della tua vista), importa entrambi i file prettify.css e prettify.js File.
Senza titolo
Nota come abbiamo inserito il nostro script nella parte inferiore della pagina, poco prima della chiusura corpo etichetta. Questa è sempre una mossa intelligente, in quanto migliora le prestazioni.
Successivamente, abbiamo bisogno di qualcosa su cui lavorare! L'evidenziatore della sintassi cercherà sia a pre o codice elemento che ha una classe di prettyprint. Aggiungiamolo adesso.
(function () var jsSyntaxHighlighting = 'rocks';) ();
prettyPrint () FunzioneL'ultimo passo è eseguire il prettyPrint () funzione. Possiamo posizionare questo bit di codice anche in fondo alla pagina.
Senza titolo (function () var jsSyntaxHighlighting = 'rocks';) ();
Se ora visualizziamo la pagina nel browser?
Bene, è stato facile! Ma, come ultimo passo bonus, cosa succede se vogliamo cambiare il tema dell'evidenziatore? In tal caso, tutto si riduce alla modifica del foglio di stile come meglio credi. Ancora meglio, ci sono una manciata di fogli di stile nella galleria dei temi che sei libero di usare. A me personalmente piace il tema del deserto. Per applicarlo, copia il CSS dal link sopra, crea un nuovo foglio di stile nel tuo progetto e incolla il CSS in esso. Successivamente, aggiorna l'inclusione del foglio di stile dall'interno capo sezione del tuo documento.
Senza titolo
Seriamente, può essere più semplice di così?
