Accentsconagua

Astuce comment ajouter la surbrillance syntaxique à n’importe quel projet

Code
Share

Dans cette leçon, nous allons utiliser un surligneur de syntaxe basé sur JavaScript pour ajouter rapidement une fonctionnalité de surbrillance de syntaxe à tout projet Web, même sur une simple page HTML.!

Étape 1 - Téléchargez le code source

Vous pouvez télécharger les fichiers sources du surligneur de syntaxe ici.

Étape 2 - Faites glisser le src Répertoire dans votre projet

Je renomme généralement ce dossier en surligneur. Ne supprimez rien ici, à moins que vous ne prévoyiez pas utiliser certains fichiers JavaScript spécifiques au langage..

Étape 3 - Importer les fichiers nécessaires

Dans votre fichier HTML (ou la page responsable de l’affichage de votre vue), importez le fichier prettify.css et prettify.js des dossiers.

     sans titre

Remarquez comment nous avons placé notre script au bas de la page, juste avant la fermeture. corps étiquette. C'est toujours un choix judicieux, car il améliore les performances.

Ensuite, nous avons besoin de quelque chose avec qui travailler! Le surligneur de syntaxe recherchera soit un pré ou code élément qui a une classe de jolie impression. Ajoutons que maintenant. 

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

Étape 4 - Appeler le prettyPrint () Une fonction

La dernière étape consiste à exécuter le prettyPrint () une fonction. Nous pouvons également placer ce morceau de code au bas de la page. 

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

Si nous voyons maintenant la page dans le navigateur?

Eh bien c'était facile! Mais, en guise de bonus final, si nous voulons changer le thème du surligneur? Dans ce cas, tout revient à éditer la feuille de style comme bon vous semble. Mieux encore, il y a une poignée de feuilles de style dans la galerie de thèmes que vous êtes libre d'utiliser. Personnellement, j'aime le thème du désert. Pour l'appliquer, copiez le CSS à partir du lien ci-dessus, créez une nouvelle feuille de style dans votre projet et collez-y le CSS. Ensuite, mettez à jour la feuille de style include à partir de la tête section de votre document. 

   sans titre

Sérieusement - peut-il être plus simple que cela?

Code
×