Accentsconagua

Sfat rapid Cum să adăugați evidențierea sintaxelor în orice proiect

Cod
Share

În această lecție vom folosi un marcator de sintaxă bazat pe JavaScript pentru a adăuga rapid o funcție de evidențiere a sintaxelor pentru orice proiect web - chiar și pe o pagină HTML simplă!

Pasul 1 - Descărcați codul sursă

Puteți descărca fișierele sursă de evidențiere a sintaxelor aici.

Pasul 2 - Trageți src Înregistrați-vă în Proiectul dvs.

În general, redenumesc acest dosar Marcatorul. Nu ștergeți nimic aici, decât dacă nu anticipați utilizarea unor fișiere JavaScript specifice limbii.

Pasul 3 - Importați fișierele necesare

În fișierul HTML (sau oricare dintre pagini este responsabil pentru afișarea vizualizării), importați atât prettify.css și prettify.js fișiere.

     fără titlu

Observați cum am plasat scriptul nostru în partea de jos a paginii, chiar înainte de închidere corp etichetă. Aceasta este întotdeauna o mișcare inteligentă, deoarece îmbunătățește performanța.

Apoi, avem nevoie de ceva de lucru! Ansamblul de sintaxă va căuta fie a pre sau cod element care are o clasa de prettyprint. Să adăugăm asta acum. 

 
 (funcția () var jsSyntaxHighlighting = 'rocks';))) ();

Pasul 4 - Apelarea prettyprint () Funcţie

Ultimul pas este să executați prettyprint () funcţie. Putem pune acest cod de cod în partea de jos a paginii, de asemenea. 

     fără titlu    
 (funcția () var jsSyntaxHighlighting = 'rocks';))) ();

Dacă acum vedem pagina în browser?

Ei bine, a fost ușor! Dar, ca un pas de bonus final, ce se întâmplă dacă vrem să schimbăm tema de evidențiere? În acest caz, totul se bazează pe editarea foii de stil așa cum credeți de cuviință. Chiar mai bine, există o mulțime de foi de stil în galeria de teme pe care sunteți liber să le folosiți. Îmi place tema desertului. Pentru ao aplica, copiați CSS-ul de pe linkul de mai sus, creați o foaie de stil nouă în proiectul dvs. și inserați-l în CSS. Apoi, actualizați foaia de stil includ din interiorul cap secțiune a documentului. 

   fără titlu

Serios - poate fi mai simplu decât asta?

Cod
×