Comment fonctionne l'embellissement HTML
L'embellisseur lit votre balisage balise par balise, suit le niveau d'imbrication de chaque élément et le réémet avec une indentation cohérente. Il ne modifie jamais ce que la page affiche — seulement la façon dont le code source est organisé.
- Analyser les balises. La bibliothèque analyse votre saisie en un flux de tokens : balises ouvrantes, balises fermantes, contenu textuel, commentaires et le contenu des blocs script et style. Les valeurs d'attributs entre guillemets et le corps des éléments pre et textarea sont traités comme des unités uniques, de sorte que les espaces à l'intérieur restent intacts.
- Suivre l'imbrication. En parcourant le flux de tokens, l'embellisseur maintient un niveau d'indentation courant. Chaque balise ouvrante qui n'est pas auto-fermante approfondit le niveau d'un cran ; chaque balise fermante correspondante le remonte. Cette profondeur détermine le nombre d'unités d'indentation placées devant chaque ligne renvoyée.
- Appliquer vos options. Votre choix d'indentation — 2 espaces, 4 espaces ou une tabulation — définit la largeur d'un niveau. La valeur de retour à la ligne coupe les longues lignes d'attributs ou de texte dès qu'elles dépassent la colonne choisie. Le plafond de lignes vides écrase les longues séries de lignes vides à la limite que vous avez fixée.
- Réémettre le balisage. Enfin, le formateur imprime les balises avec l'indentation et les sauts de ligne qu'il a déterminés. Si vous avez activé le formatage intégré, le contenu de chaque bloc style passe par le formateur CSS et chaque bloc script par le formateur JS, de sorte que le code incorporé est indenté en accord avec le balisage qui l'entoure.
Pourquoi embellir le HTML
- Lire des pages minifiées. Le HTML de production est livré sans sauts de ligne pour économiser des octets. L'embellir remet la structure en place pour que vous puissiez trouver la section cherchée, repérer une balise fermante manquante et comprendre comment le document s'imbrique réellement.
- Corriger des gabarits incohérents. Le balisage que plusieurs personnes ont édité dérive vers des indentations et des positions de balises mélangées. Un seul passage dans l'embellisseur normalise l'ensemble du fichier, de sorte que le prochain commit montre la modification apportée plutôt qu'un mur d'espaces reformatés.
- N'alourdit pas votre page. La plupart des formateurs en ligne chargent leur bibliothèque entière dès l'ouverture de la page. Celui-ci charge js-beautify seulement quand vous cliquez sur Embellir ou activez le mode en direct, de sorte que le premier chargement coûte quelques kilo-octets au lieu de quelques centaines et la page reste légère.
- Rien ne quitte votre navigateur. Tout tourne sur votre appareil. Votre balisage n'est jamais envoyé à un serveur, ce qui compte quand la page appartient à un client, contient des URL internes ou est soumise à un accord de confidentialité.
Applications courantes
Embellir du HTML survient chaque fois que quelqu'un a besoin de lire du balisage qui n'a pas été écrit pour être lu.
- Inspecter une page en production : coller le code source minifié de Afficher la source pour trouver le balisage derrière un bug de layout qu'on ne peut pas reproduire en local.
- Nettoyer la sortie d'un CMS : reformater un gabarit exporté en une seule ligne par un constructeur de pages avant de le commiter dans le dépôt.
- Audits d'accessibilité et de référencement : développer le document pour vérifier l'ordre des titres, la structure des landmarks et les attributs alt par rapport au DOM réel.
Un exemple concret
Prenez un fragment minifié : <div><p>hi</p><span>x</span></div>. Collez-le ci-dessus avec une indentation de 2 espaces, puis cliquez sur Embellir. Vous récupérez un bloc lisible : le <div> sur sa propre ligne, le <p>hi</p> et le <span>x</span> chacun indenté d'un niveau, et le </div> correspondant aligné en dessous. Passez l'indentation en Tabulations et chaque niveau passe de deux espaces à une tabulation. Ajoutez un bloc <style>a{color:red}</style>, activez « Formater aussi le CSS et JS intégrés » et la règle s'étend sur ses propres lignes indentées au lieu de rester sur une seule.
FAQ
Cela s'exécute-t-il dans mon navigateur ?
Oui. La bibliothèque js-beautify est chargée en différé la première fois que vous cliquez sur Embellir ou activez le mode en direct, puis mise en cache. Votre balisage ne quitte jamais la page — aucun aller-retour serveur, aucun envoi.
L'embellissement changera-t-il le rendu de ma page ?
Non. L'embellisseur ne fait qu'ajouter et supprimer des espaces et des sauts de ligne entre balises. Le navigateur ignore ces espaces lors de la construction de la page, donc le résultat affiché est identique. Le seul élément à surveiller est le contenu sensible aux espaces à l'intérieur de pre, textarea ou des éléments inline, que le formateur laisse délibérément intact.
Que fait l'interrupteur CSS et JS intégrés ?
Désactivé, le contenu des blocs style et script est laissé exactement tel que vous l'avez collé. Activé, le CSS de chaque bloc style passe par le formateur CSS et le JavaScript de chaque bloc script par le formateur JS, de sorte que le code incorporé est indenté en accord avec le balisage environnant.
Que fait « Retour à la colonne » ?
Il définit la longueur de ligne à partir de laquelle une balise avec de nombreux attributs, ou un long texte, est découpée sur plusieurs lignes. Laissez-le à 0 pour conserver chaque élément sur une seule ligne quelle que soit sa longueur. Réglez-le à 80 ou 120 et le formateur découpe tout ce qui dépasse cette colonne, ce qui rend les éléments larges lisibles dans un éditeur étroit.
L'embellissement HTML côté navigateur vous donne du balisage lisible sans étape de compilation ni envoi. Collez une page minifiée ou désordonnée, choisissez votre indentation et largeur de retour à la ligne, décidez si vous reformatez le CSS et JS intégrés, puis copiez ou téléchargez le résultat. Rien ne quitte votre appareil, aucun compte n'est nécessaire et la bibliothèque ne se charge que lorsque vous le demandez — ouvrir cette page ne vous coûte que quelques kilo-octets, pas un méga-octet.