Tout ce que vous devez savoir sur l'élément 'pre' de HTML '- SitePoint

Le pré-élément de HTML est un moyen simple et sémantique d'afficher du contenu formaté (tel que du code source) mais il a quelques bizarreries. Parlons de la façon dont cet élément fonctionne, des problèmes potentiels à garder à l'esprit, ainsi que quelques conseils et astuces de base pour l'améliorer.

Comment <pre> Travaux

Dans un document HTML, le pré élément représente texte préformaté. Cela signifie que les retraits d’onglet, les espaces doubles, les nouvelles lignes et les autres mises en forme typographiques seront conservés dans un fichier. pré élément.

Par défaut, les navigateurs afficheront le contenu dans un pré élément utilisant une police monospace (ou à largeur fixe) telle que Courier ou Monaco. Ceci est typique lors de l'affichage du code, qui, comme nous le verrons, est l'un des principaux usages du pré élément.

Regardons un exemple de texte préformaté.

Exemple de texte préformaté

Si vous deviez placer ce même texte dans un autre élément, dites un div, tous vos espaces supplémentaires, nouvelles lignes et indentation seront ignorés. Donc, même si votre code ressemble à ceci:

<div>Jack: Hello. How are you?Jill: I'm great. Thanks for asking.</div>

Le navigateur le rendra comme ceci:

Voir l'élément Pen Div ignore l'espace blanc par SitePoint (@SitePoint) sur CodePen.

Le même bloc de texte à l'intérieur d'un pré, cependant, sera rendu avec une police à espacement fixe et avec tous vos espaces blancs supplémentaires intacts:

<pre>Jack: Hello. How are you?Jill: I'm great. Thanks for asking.</pre>

Voir le Pen IpECf par SitePoint (@SitePoint) sur CodePen.

Marquer le code source de la bonne manière

le pré L'élément doit être utilisé pour le texte qui a un formatage typographique qui affecte la signification du contenu, comme dans les poèmes, l'art ASCII, les transcriptions et, bien sûr, le code informatique.

Si vous voulez représenter un bloc de code source dans votre document HTML, vous devez utiliser un élément de code imbriqué dans un document. pré élément. Ceci est sémantique, et fonctionnellement, il vous donne l'occasion de dire aux robots des moteurs de recherche, aux applications de médias sociaux, aux lecteurs RSS et à d'autres services Web interopérables que le contenu est du code informatique.

Voici un exemple d’un extrait de code JavaScript balisé sémantiquement:

<pre><code>// Logs &quot;Hello World!&quot;// in the browser's developer consoleconsole.log(&quot;Hello World!&quot;);</code></pre>

Voir le stylo Exemple de pré avec des balises de code par SitePoint (@SitePoint) sur CodePen.

Utilisation d'éléments HTML imbriqués

Vous pouvez utiliser d'autres éléments HTML dans votre pré éléments et ils seront rendus de manière appropriée.

Juste pour faire une démonstration du concept, j’ai marqué du code JavaScript avec em et fort éléments, et a même donné les éléments imbriqués Couleur propriétés en utilisant le style attribut.

<pre><code>var total = 0;<em style="color: green;">// Add 1 to total and display in a paragraph</em><strong style="color: blue;">document.write('&lt;p&gt;Sum: ' + (total + 1) + '&lt;/p&gt;');</strong></code></pre>

Voir l'élément Pre Pen avec des balises imbriquées pour le style par SitePoint (@SitePoint) sur CodePen.

Problèmes

Maintenant que nous avons discuté de la façon dont le pré élément fonctionne, passons en revue quelques maux de tête potentiels que vous pourriez rencontrer lors de son utilisation.

Débordements

Par défaut, le texte à l'intérieur pré les éléments sont affichés tels quels dans la source, donc avoir une ligne de texte plus large que la largeur du conteneur pré élément signifiera que la ligne sortira de son conteneur.

Ci-dessous, une mise en page avec un contenu débordant en dehors du conteneur. pré élément.

Voir le stylo Exemple de pré-élément brisant la mise en page par SitePoint (@SitePoint) sur CodePen.

Dans les mises en page à plusieurs colonnes, et en particulier dans les mises en page à largeur fixe flottantes, les problèmes de débordement sont plus dévastateurs s'ils ne sont pas traités de manière proactive, car ils peuvent perturber gravement la mise en page. .

Il existe plusieurs solutions au problème.

Solution 1: Afficher une barre de défilement

Un moyen d'éviter les problèmes de débordement consiste à afficher une barre de défilement lorsque le contenu du pré l'élément est trop large. Ceci est fait en assignant l'élément débordement: auto dans le CSS.

pre { débordement: auto;}

Voir le Pen FIxing l'élément pré avec débordement: auto par SitePoint (@SitePoint) sur CodePen.

Dans cette solution, l'utilisateur devra faire défiler horizontalement pour voir tout le contenu à l'intérieur du pré. Mais, pour faire simple, le défilement horizontal n'est pas une expérience de lecture idéale. De plus, et cela est subjectif, une barre de défilement n'est pas esthétique.

Il y a une autre façon de s'attaquer pré débordements.

Solution 2: Habillage de texte

Nous sommes habitués à notre code source qui passe à la ligne suivante s'il est plus large que la fenêtre de notre éditeur de code. Il ne serait pas inhabituel de transférer cette convention sur le Web.

Le texte peut être fait en utilisant le espace blanc Propriété CSS Il y a une valeur chouette pour espace blanc ça marche bien pour prééléments: pré-envelopper.

pre { espace blanc: pré-emballage;}

Voir le stylo Utilisation du pré-habillage pour corriger l'élément pré par SitePoint (@SitePoint) sur CodePen.

Rendu HTML

Il y a un type particulier de code source qui est un peu plus difficile à travailler dans un pré élément: HTML. Plus tôt, je vous ai dit que vous pouvez imbriquer des éléments HTML à l'intérieur pré éléments. Mais que se passe-t-il si nous voulons afficher ces balises dans le code affiché afin que le lecteur puisse les voir?

Pour afficher les balises HTML dans le navigateur, vous devez généralement ignorer les caractères HTML réservés. Disons que nous voulions montrer le balisage suivant à l'intérieur pré Mots clés:

Rendre le balisage HTML dans le préélément

Afin de rendre ce qui précède à l'intérieur d'un pré élément verbatim, nous pouvons échapper à beaucoup des caractères HTML réservés tels que <, >, et " à leurs entités de caractères correspondantes, comme cela (bien que les guillemets et les chevrons de fermeture n'ont pas besoin d'être échappés):

<pre><code>&lt;nav class=&quot;main-navigation&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt;</code></pre>

Voir l'élément Pre Pen avec les balises HTML (entités) échappées par SitePoint (@SitePoint) sur CodePen.

Heureusement, il existe de nombreux outils qui vous aideront à le faire. Il y a, par exemple, l'outil d'évasion HTML en ligne gratuit.

Espacement accidentel

Un autre problème à surveiller est l'apparition d'onglets non désirés, de nouvelles lignes et d'espaces.

Beaucoup d'entre nous indentent notre HTML pour illustrer la hiérarchie des éléments de niveau bloc. Cela peut être problématique avec pré éléments si nous ne faisons pas attention. Laissez-moi vous montrer ce que je veux dire.

Si mon document HTML avait la hiérarchie structurelle suivante (onglets pour représenter les éléments enfants imbriqués), mon pré l'élément serait en retrait comme suit:

<html> <head> <title>My tutorial</title> </head> <body> <section> <article class="main-content"> <h1>My Tutorial's Title</h1> <p>Here's some example JavaScript:</p> <!-- My pre element --> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; console.log('Hello there'); &lt;/script&gt;</code></pre> </article> </section> </body></html>

Dans l'exemple ci-dessus, le pré L'élément comporte quatre niveaux dans la hiérarchie du document.

Le problème est le pré element (à juste titre) suppose que mes indentations font partie de son contenu et que, par conséquent, le contenu est affiché avec des onglets indésirables précédant chaque ligne:

<script type="text/javascript"> console.log('Hello there'); </script>

Pour décrire le contenu avec précision, je devrai l'écrire pour que le pré L'élément n'a pas d'onglet ni d'autres caractères d'espacement à gauche des lignes. En d'autres termes, le contenu ne doit pas être en retrait du tout:

<html> <head> <title>My tutorial</title> </head> <body> <section> <article class="main-content"> <h1>My Tutorial's Title</h1> <p>Here's some example JavaScript:</p> <!-- My pre element --> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;console.log('Hello there');&lt;/script&gt;</code></pre> </article> </section> </body></html>

Maintenant, le contenu sera rendu comme ceci:

<script type="text/javascript"> console.log('Hello there');</script>

Un modèle de marquage à l'épreuve des balles

Pour éviter tout problème, je suggère d'utiliser ce modèle de balisage:

<pre><code>Line 1 (first line)Line 2Line 3Line 4 (last line)</code></pre>

Améliorations

Voici quelques choses que vous pouvez faire pour améliorer votre pré éléments.

Changer la taille de l'onglet

Vous pouvez adapter la taille de vos retraits à l'intérieur pré éléments.

Par exemple, personnellement, je suis la convention d'un tab = deux espaces (l'utilisation d'espaces au lieu d'onglets est souvent appelée «onglets souples») comme dans Bootstrap et de nombreux autres projets open source.

Mais la taille par défaut des onglets dans les navigateurs équivaut à huit espaces sous spécifications, ce qui ne fonctionne pas bien pour les développeurs frontaux, notamment en ce qui concerne la lisibilité du code source HTML car nous travaillons souvent avec des structures profondément imbriquées.

Une façon de modifier la taille de l'onglet est à travers l'intuitivement nommé taille de tabulation Propriété CSS C'est une nouvelle propriété, donc elle ne sera pas supportée à 100%, mais c'est une belle petite amélioration progressive pour les utilisateurs de navigateurs modernes.

pre { taille de tabulation: 2;}

Utilisez les polices Web espacées

Pour un meilleur contrôle de la conception de notre typographie, c'est une bonne idée de rendre le texte de notre page web en utilisant CSS @ font-face et les polices que nous avons choisies, au lieu de ce que le navigateur pense est bon pour notre conception. En outre, l’utilisation de polices Web espacées est tellement ennuyeuse.

Voici un exemple d'utilisation de la police PT Mono via Google Fonts.

Voir le stylo Utilisation de la police PT Mono dans un élément pré par SitePoint (@SitePoint) sur CodePen.

Améliorer la lisibilité et l'esthétique avec la mise en évidence de la syntaxe

Une des améliorations les plus faciles que nous pouvons mettre en œuvre avec notre pré le contenu est la coloration syntaxique. Il rend le code plus facile à lire et à comprendre. De plus, cela rend notre design un peu plus dynamique.

Vous trouverez ci-dessous quelques exemples de la coloration syntaxique basée sur pré élément.

Prisme

highlight.js

Il y a des tonnes de surligneurs de syntaxe, et il semble que tous les jours il y en a un nouveau brillant qui sort. Il existe également une multitude de méthodes pour mettre en évidence la syntaxe sur une page Web - plugins JavaScript, classes PHP, Rails gems, vous l'appelez - donc je vous laisse le soin de trouver celui qui répond le mieux à vos besoins. Par exemple, si vous souhaitez utiliser un plugin jQuery, consultez cette liste de dix plugins de mise en évidence de la syntaxe par Sam Deering.

Performances de la mise en évidence de la syntaxe

Je dois également dire que la mise en évidence de la syntaxe peut être très pénalisante sur les performances Web. Lors de l'utilisation d'une bibliothèque côté client, par exemple, il y aura généralement beaucoup de correspondance d'expressions régulières et de manipulation de DOM sur le contenu résidant dans votre pré Mots clés; et vous savez déjà que ces processus peuvent nuire gravement à vos temps de réponse de page Web. Donc, ceci est juste un rappel amical pour profiler vos pages Web après avoir implémenté un surligneur de syntaxe pour voir si le coût de performance est raisonnable.

Emballer

Nous avons beaucoup parlé de la pré élément - comment l'utiliser, les choses à surveiller, et les façons dont vous pouvez améliorer sa mise en œuvre - et peut-être que vous avez appris un truc ou deux à ce sujet que vous ne saviez pas avant. Si vous avez d'autres trucs et astuces sur pré, s'il vous plaît partagez-les avec nous dans les commentaires.

Rencontrez l'auteur

4.2
Note utilisateur: 33
5
15
4
2
3
2
2
1
1
1