Comment créer une boîte de code d'extrait de code jQuery

Dans ce didacticiel, nous allons créer un bloc d'extraits de code qui affiche un exemple de code sur des pages Web de manière attrayante et facile à lire, un peu comme ce que vous voyez ici sur Nettuts. Les boîtes de prévisualisation d'extraits de code comme celle-ci sont souvent créées sous forme de plugins Wordpress, mais nous verrons comment nous pouvons faire la même chose avec juste un peu de jQuery et CSS.

Nous pouvons ajouter toutes les fonctionnalités attendues, telles que la numérotation et le marquage de ligne, ainsi que tous les outils habituels, tels que l'affichage du code en texte brut et son impression facile à imprimer. La capture d'écran suivante montre le genre de choses avec lesquelles nous allons nous retrouver à la fin du tutoriel:

Commencer

Le bloc d’extrait de code sera construit à partir d’un sous-jacent

 élément; c’est l’élément parfait à utiliser car il rend tout ce que vous y mettez sous forme de texte brut dans une police à largeur fixe telle que monospace, ce qui est idéal pour afficher des exemples de code de manière claire et concise. Il préserve également les sauts de ligne, une fonctionnalité que nous pouvons exploiter pour ajouter les fonctionnalités de numérotation et de séparation de lignes..
 
Une autre raison pour laquelle nous utilisons le 
 tag est parce qu'il constitue la base idéale pour notre boîte de code; dans les navigateurs avec JavaScript désactivé, ou ceux qui ne le prennent tout simplement pas en charge, le code sera toujours rendu de manière acceptable. Cela va ressortir du reste du texte sur la page et ne dégénérera pas en quelque chose de complètement inutile et ridicule.
 
Commencez par la page suivante dans votre éditeur de texte:
 
        
Code CSS:
 
#selector color: # 000000;  .another-selector taille de la police: 20px; bordure: 1px solide # 000000; rembourrage: 20px;  tagname width: 100%; 
    
 
Enregistrer la page sous code-snippet.html dans un répertoire contenant déjà la version actuelle de jQuery. Sans style ni intervention de script, la page devrait ressembler à ceci:
  
 
Par défaut, il est acceptable. si la page avait un autre corps de texte dessus, le 
 l'élément se démarquerait en tant que bloc de texte séparé et apparaîtrait toujours sous la forme d'un petit code.
 
 
Commencer le script
 
Commençons par ajouter l’effet de striping qui rendra chaque ligne différente de celles situées au-dessus et au-dessous, et la numérotation des lignes indiquant le moment où une ligne brisée (qui déborde sur deux lignes ou plus) fait partie d’une ligne de exemple de code.
 
Dans le vide > élément au bas de la  ajoutez le code suivant:
 
$ (function () // traite le contenu des extraits $ ("pre.snippet"). each (function () // récupère le contenu de 
 et créez la liste et le conteneur var currentItem = $ (this), currentContents = currentItem.text (), contents = (currentItem.text (). indexOf ("\ n")! = -1)? currentItem.text (). split ("\ n"): currentItem.text (). split ("\ r"), list = $ ("
"), conteneur = $ ("
") .addClass (" snippet-container "). insertBefore (currentItem.prev ()); // supprime le contenu d'origine et l'enveloppe dans le conteneur currentItem.text (" "). prev (). andSelf (). appendTo (container) ; // normaliser la hauteur (currentItem.height ()> 0)? list.css ("marginTop", -16): null; // créer un élément de liste $ .each (contenu, fonction (i, val) // create élément de liste et p var interne = $ ("
") .appendTo (liste), p = $ ("
") .text (val) .appendTo (li); // ajouter une classe de bande (i% 2 === 0)? li.addClass (" bande "): li.addClass (" unstripe ");); list .appendTo (currentItem);););
 
Passons en revue chaque partie du code pour voir ce qu'il fait. d'abord nous sélectionnons chaque 
 élément ayant le nom de classe d'extrait et pour chaque découverte, nous exécutons une fonction anonyme. Dans cette fonction, nous définissons d'abord cinq variables; la première variable est le sélecteur du courant 
 élément, que nous mettons en cache pour des raisons de performance. Nous allons utiliser le $ (ceci) référence à plusieurs reprises dans notre code, il est donc logique de le stocker dans une variable pour un accès rapide.
 
La variable suivante stockera le contenu intégral du texte actuel. 
 et la suivante stockera un tableau où chaque élément du tableau contient une seule ligne de texte à partir du 
 élément. La longueur du tableau correspondra au nombre de lignes de texte dans le 
 élément. Parce que les sauts de ligne dans 
 les éléments sont préservés, nous pouvons facilement les détecter et effectuer une scission en fonction de ces éléments.
 
La plupart des navigateurs détectent les sauts de ligne en JavaScript à l'aide du \ n caractère newline donc nous voyons d’abord si le texte intérieur du 
 L'élément contient l'un de ceux-ci et les utilise ensuite. IE détecte les sauts de ligne différemment des autres navigateurs, donc si aucun \ n les caractères sont trouvés, nous effectuons la division en utilisant le \ r caractère de retour de chariot à la place.
 
La variable suivante contient un nouvel élément de la liste ordonnée; en utilisant un 
 Cet élément est parfait car il gérera automatiquement la numérotation de la ligne de l'extrait de code. La dernière variable pointe vers un nouveau conteneur 
 que nous donnons un nom de classe et puis ajoutons à la page directement avant la 
 élément qui précède le snippet box.
 
Créer le tableau de la 
 Le contenu de l'élément n'est pas une opération destructrice, nous devons donc supprimer le contenu d'origine pour éviter sa duplication, ce que nous pouvons faire en utilisant une chaîne vide avec celle de jQuery. texte() méthode. Nous passons aussi le 
 et le 
 élément dans notre élément conteneur nouvellement créé.
 
Firefox semble insérer une rupture de ligne dans le 
 element, qui donne l'élément la taille quand il ne devrait pas avoir de hauteur du tout (car nous avons supprimé le contenu). Pour contrer cela, nous détectons si le vide 
 l'élément a une hauteur supérieure à 0, et si oui, nous définissons la haut de la marge de notre nouveau 
 élément pour le tirer vers le haut de l'élément. C’est seulement Firefox qui le fait, mais il est préférable de vérifier la taille au lieu de vérifier pour Firefox. La détection des fonctionnalités via le sniffing du navigateur gagne à chaque fois.
 
 
Striping
 
La prochaine section de code traite de l'ajout des classes que nous pouvons utiliser pour l'effet de striping; comme nous avons mis le contenu de la 
 élément dans un tableau et non un objet jQuery, nous ne pouvons pas utiliser la norme chaque méthode comme nous l'avons fait avec le 
 éléments sur la page.
 
Au lieu de cela, nous pouvons utiliser le jQuery chaque méthode d'utilité qui est appelée directement sur jQuery $ objet. La méthode accepte 2 arguments, le premier est l’objet à parcourir, dans ce cas notre Contenu tableau, et le second est une fonction anonyme à exécuter pour chaque élément du tableau. Notre fonction est automatiquement passée deux arguments; je est l'index de l'élément en cours d'itération et val est le contenu de l'élément de tableau.
 
Dans notre fonction, nous créons d’abord un nouvel élément de liste pour notre 
 et insérez un nouvel élément de paragraphe contenant le contenu de l'élément de tableau actuel. Le nouvel élément est ajouté à la 
 élément que nous avons créé plus tôt. Nous ajoutons ensuite les classes de striping; Pour ce faire, nous utilisons l'opérateur de module JavaScript afin de déterminer si l'index de tableau actuel est impair ou pair. pour chaque indice même on ajoute la classe Bande et pour chaque indice impair on ajoute la classe imparfait. L'utilisation de 2 classes pour les bandes signifie que nous pouvons facilement définir les deux couleurs de bandes au lieu d'insister pour que l'une d'entre elles soit blanche.
 
A ce stade, notre page d'exemple devrait maintenant ressembler à ceci:
  
 
 
Snippet Styling
 
Nous pouvons maintenant ajouter le style pour le widget extrait de code et la segmentation; Dans un nouveau fichier de votre éditeur de texte, ajoutez le code suivant:
 
.snippet-container width: 630px; remplissage: 10px 10px 30px; bordure: solide 1px # 999999; couleur de fond: # e1e1e1; marge inférieure: 10px; position: relative;  .snippet-container h2 margin: 0 0 10px; padding-left: 10px; famille de polices: Georgia; poids de police: normal; style de police: italique;  .snippet border: 1px solid # 999999; marge: 0;  .snippet ol margin: 0; padding-left: 34px; couleur de fond: # 8dd397; couleur: #ffffff; poids de police: gras; style de police: italique;  .snippet ol li padding-left: 10px;  .snippet ol p margin: 0; couleur: # 000000; poids de police: normal; style de police: normal; espace blanc: préemballage; remplissage: 3px 0;  .snippet .stripe background-color: # f5f5f5;  .snippet .unstripe background-color: #ffffff; 
 
Enregistrer ceci sous code-snippet.css dans le même répertoire que la page d'exemple. La plupart de ces CSS est purement pour la décoration et a été choisi arbitrairement selon mes préférences. Vous pouvez modifier les polices, les couleurs, la largeur ou n’importe quoi. Le CSS fonctionnel le plus important que nous avons défini est le positionnement relatif sur chaque extrait et le espace blanc statuer sur l'intérieur 
 éléments dans chaque élément de la liste; si nous ne mettons pas cela à préemballage le texte de chaque ligne débordera du conteneur d'extraits s'il est trop long au lieu de passer à la ligne suivante.
 
Avec l'ajout de notre feuille de style, la zone de code apparaît maintenant comme ceci:
  
 
 
Autres types de code
 
Jusqu'à présent, dans cet exemple, nous avons utilisé des CSS très simples comme exemple de code présenté dans le fragment de code. Pouvons-nous ajouter un autre type de code que nous voulons? Nous allons jeter un coup d'oeil. Directement après le premier 
 élément sur la page ajouter le code suivant: [/ sourcecode]
 
[code source sourcec = "extrait" originalClass = "extrait"]       
Ceci est une page web basique
  
 
Tout est à peu près ce que nous avions avant avec une différence majeure; nous ne pouvons pas utiliser le < caractère lors de l'affichage des balises HTML dans notre exemple de code. Si nous devions mettre  dans notre 
 tag, il serait interprété comme un  élément et provoquer un avertissement HTML. Pour surmonter cela, nous pouvons spécifier l'entité HTML 
<
 
qui sera changé en  caractère par le navigateur sans le navigateur pensant que c'est un élément réel. Il est probablement préférable d'afficher tout code utilisant  caractères de cette manière pour éviter toute interprétation accidentelle par le navigateur. Voici comment la deuxième zone de fragment devrait apparaître:
  
 
J'ai respecté la convention d'indentation que j'utilise normalement, à savoir deux espaces standard pour les éléments imbriqués; C'est une habitude dans laquelle j'ai pris l'habitude de montrer plusieurs lignes de code potentiellement larges dans des documents à largeur fixe. Ce n'est pas la convention standard, qui est quatre espaces simples ou un espace de tabulation. Vous pouvez utiliser la convention de votre choix lors du déploiement du fragment de code sur votre propre site, car les espaces simples et les espaces de tabulation sont préservés par le pré étiquette.
 
 
Outils d'extraits
 
Une autre caractéristique des boîtes d’extraits de code que nous pouvons facilement ajouter est une série d’outils qui aident le visiteur à utiliser le code; Si vous essayez de copier et de coller le code d'une des zones d'extraits dans un éditeur de texte, vous verrez que les numéros de ligne de la liste ordonnée sont également copiés dans la nouvelle page. C’est regrettable, car laisser ces chiffres empêcherait probablement l’exemple de code de fonctionner. Une chose que nous pouvons faire est de fournir un mécanisme où le code peut être affiché sans les numéros de ligne..
 
Directement après la ligne de code qui se lit list.appendTo (currentItem); ajoutez le code suivant:
 
// créer des outils var toolContainer = $ ("
") .addClass (" tools-container "), toolList = $ ("
") .addClass (" tool-list "). appendTo (toolContainer), listItem1 = $ ("
") .addClass (" tool-item "). text (" | "). appendTo (toolList), listItem2 = $ ("
") .addClass (" tool-item "). appendTo (toolList), plain = $ ("") .addClass (" tool "). attr (id:" plain ", href:" # ", titre:" Afficher le code en tant que texte brut "). text (" Show Plain "). prependTo (listItem1). click (function (e) // événement stop e.preventDefault (); // créer un conteneur pour le code en clair si ($ (this) .closest (". snippet-container"). find (". snippet"). children (".display-box"). length === 0) var displayBox = $ ("
") .addClass (" display-box "). height ($ (this) .closest (". snippet-container "). find (". snippet "). height ()). text (currentContents) .appendTo (currentItem ); // affiche ou masque le code brut $ (this) .closest (". snippet-container"). find (". snippet"). children (". display-box"). slideToggle (); // changer le texte sur le lien ($ (this) .text () == "Show Plain")? $ (this) .text ("Show Pretty"): $ (this) .text ("Show Plain");) , printBox = $ ("") .addClass (" tool "). attr (id:" print ", href:" # ", titre:" Print Code "). text (" Print "). prependTo (listItem2) .click (fonction ( e) // stop event e.preventDefault (); // ouvre une nouvelle page à imprimer à partir de var title = currentItem.prev (). text (), currentSnippet = $ (this) .closest (". snippet-container") .find (". extrait"), printWindow = window.open ("", "printWindow", "width =" + (currentSnippet.width () + 25) + ",
"+ titre +"<\/h2>
<\/pre>"); $ (" # code ", printWindow.document) .text (currentContents); printWindow.print ();); toolContainer.appendTo (conteneur);
 
Tout ce que nous faisons est de créer tout un ensemble de variables, un peu comme ce que nous avions fait au début du premier bloc de code plus tôt. rappelons que nous sommes toujours dans le contexte de la chaque() méthode appelée sur tous les 
 éléments sur la page. Nous créons d'abord un conteneur pour les nouveaux outils et lui donnons un nom de classe à des fins de style, mais nous ne l'ajoutons pas immédiatement à l'extrait de code..
 
Nous créons ensuite un nouvel élément de liste non ordonnée et deux éléments de liste, qui sont des noms de classe et ajoutés à leurs conteneurs respectifs. Le premier élément de la liste reçoit un innerText du caractère de pipe pour agir en tant que séparateur.
 
 
Créer les outils
 
Nous créons ensuite le premier outil, qui sera utilisé pour afficher une version du code en texte brut; nous ajoutons un nom de classe pour le style et les attributs requis. L'élément de lien que nous créons a également un gestionnaire d'événements attaché sous la forme d'une fonction de rappel anonyme pour le moment où il est cliqué.
 
Dans cette fonction, nous créons d’abord un nouveau conteneur pour le texte brut, mais seulement après avoir vérifié que le conteneur n’existe pas déjà; cela agira comme un mécanisme de type de chargement paresseux de base qui ne créera pas les éléments de code en clair tant que l'utilisateur n'aura pas cliqué sur l'ancre pour la première fois. Le rappel est exécuté chaque fois que l'on clique sur l'ancre. Nous devons donc vérifier si le conteneur existe déjà pour empêcher la création de plusieurs conteneurs..
 
Nous utilisons ensuite jQuery slideToggle () effet d'afficher ou de masquer le code brut selon qu'il est déjà visible ou non. Nous modifions également le texte du lien chaque fois que vous cliquez dessus, ce qui offre au visiteur un moyen simple de basculer entre les vues en code simples et les vues en code..
 
La variable suivante que nous créons est un autre élément d'ancrage qui sera utilisé dans l'outil d'impression. cet élément a également un gestionnaire d'événements attaché qui sera exécuté à chaque clic. Dans le gestionnaire d'événements, nous commençons par créer à nouveau certaines variables, en mettant en cache le contenu du texte de l'élément d'en-tête de l'extrait de code et de l'extrait de code actuel. 
 élément.
 
Nous créons également une nouvelle fenêtre en utilisant le code JavaScript traditionnel ouvrir() méthode; le premier argument de cette méthode est l'URL de la page à ouvrir; nous n'avons pas de page préexistante, nous allons la construire à partir de rien, nous allons donc définir cet argument comme une chaîne vide. Le deuxième argument est le nom de la nouvelle fenêtre, ce qui est très important car nous y faisons référence à plusieurs reprises. Enfin, nous définissons les dimensions de la nouvelle fenêtre afin qu’elle soit un peu plus grande que la boîte de code originale..
 
Une fois la fenêtre créée, nous utilisons ensuite document.write sur la fenêtre qui s’adresse au nom que nous lui avons donné et écrivez un en-tête contenant le contenu de l’élément d’en-tête que nous avons mis en cache et un élément pre vide, que nous donnons à identifiant à. En utilisant document.write se sent tellement mal après avoir utilisé jQuery, mais malheureusement c'est la seule méthode qui fonctionne.
 
Une fois que la nouvelle fenêtre a la 
 élément nous pouvons ensuite utiliser jQuery pour le sélectionner en utilisant c'est identifiant en fournissant une référence à la nouvelle fenêtre en tant que contexte du sélecteur. Nous ajoutons ensuite le contenu du texte de l'original 
 élément que nous avons caché chemin au début du script et enfin appeler le impression() Méthode JavaScript pour imprimer la nouvelle fenêtre.
 
Le javascript impression() La méthode est très basique, elle imprime simplement la page entière; nous ne pouvons pas lui indiquer d'imprimer uniquement les éléments sélectionnés. C'est pourquoi nous avons créé la nouvelle page contenant uniquement l'en-tête approprié et le code en clair, puis imprimé à la place. Il existe des moyens de le faire sans créer la nouvelle page; nous pourrions ajouter un nom de classe à chaque élément de la page et l'utiliser pour les masquer avec CSS. Sur de grandes pages contenant de nombreux éléments, cela serait extrêmement inefficace. De plus, nous ne pouvons pas déterminer quand l’impression est terminée, il serait donc gênant de montrer à nouveau les éléments après l’avoir imprimé..
 
Maintenant que tous les outils ont été créés, nous pouvons enfin les ajouter à la page en les ajoutant à chacun des conteneurs d'extraits..
 
 
Style de l'outil
 
Les nouveaux outils auront également besoin de CSS afin de ranger leur apparence et de les positionner; en bas de code-snippet.css ajoutez le nouveau code suivant:
 
.outils-conteneur position: absolute; à droite: 10px;  .tool-list margin: 6px 0 0;  .tool-list li list-style-type: none; float: gauche; poids de police: gras; taille de police: 13px;  .tool-list li a text-decoration: none; famille de polices: Georgia; poids de police: normal; style de police: italique; taille de police: 11px; couleur: # 000000; rembourrage: 0 5px; contour: 1px en pointillé # e1e1e1;  .tool-list li a: hover text-decoration: underline;  .snippet .display-box position: absolute; en haut: 0; gauche: 0; largeur: 100%; couleur de fond: #ffffff; affichage: aucun; espace blanc: préemballage; 
 
Encore une fois, ce sont surtout des styles arbitraires qui, à mon avis, ont fière allure. N'hésitez pas à les changer, même si je pense que le bas de la boîte de code est un bon endroit pour eux. C'est un endroit pour lequel nous avons intentionnellement laissé de la place. Par conséquent, si vous souhaitez les déplacer, vous pouvez ajuster le remplissage du bas. du conteneur d'extrait. Les nouveaux outils doivent ressembler à ceci:
  
 
Chaque fois que le lien en clair est cliqué, le conteneur de code en clair devrait glisser dans la vue et l'étiquette du lien changera:
  
 
Lorsque l'outil d'impression est sélectionné, la nouvelle fenêtre contenant le code et la boîte de dialogue Imprimer doivent apparaître:
  
 
Notez que cela est relativement lent dans IE8 et un peu capricieux, parfois la boîte d’impression s’ouvre et parfois pas. De plus, la boîte d'impression n'apparaît pas dans Opera..
 
 
Résumé
 
Avec juste un peu de HTML sémantique, du CSS de présentation et de jQuery, nous pouvons facilement présenter des exemples de code de manière attrayante et claire sur nos pages Web. Nous avons examiné le code HTML sémantique initial qui reste distinct et lisible, ainsi que la façon d’afficher du code utilisant < personnage.
 
Nous avons constaté à quel point il est facile d’ajouter une numérotation et une segmentation efficaces des lignes pour rendre les exemples de code plus lisibles. Nous avons également vu comment nous pouvons facilement ajouter quelques outils aux boîtes de code qui permettent de copier le code avec précision ou d'imprimer le code plus facilement pour nos visiteurs..



		
			
	   
	




Code