Convertir du HTML en Pug (Jade)

Comment ça marche

Vous avez un HTML terminé, par exemple une maquette d'intégrateur, et votre application Express ou Node.js affiche ses pages avec Pug. Collez le HTML dans le panneau de gauche : la version Pug apparaît aussitôt à droite. La ligne <div class="carte" id="commande"> devient .carte#commande : un div qui a une classe ou un id perd son nom de balise, car div est la balise par défaut de Pug. Les autres attributs passent entre parenthèses, comme a(href='/', target='_blank'). Une seule ligne de texte reste à côté de sa balise (p Bonjour) ; un texte mêlé de mots en gras ou de liens est découpé en lignes qui commencent par |. Le contenu de script, style et pre est gardé à l'identique. La ligne de résultat indique combien de balises ont donné combien de lignes Pug.

Cet outil est aussi connu sous le nom de convertir html en pug, html vers pug, html to jade, convertisseur html pug, html to pug.

Qu'est-ce que Pug (Jade) ?

Pug est un langage de modèles HTML surtout utilisé avec Node.js. On n'écrit jamais de balise fermante : l'indentation indique quel élément se trouve dans quel autre. Comme il accepte variables, boucles et conditions, des serveurs comme Express s'en servent pour produire des pages. Il s'appelait Jade jusqu'en 2016, d'où les fichiers .jade dans les anciens projets.

Qu'est-ce que Raccourci de classe et d'id ?

En Pug, la classe s'écrit avec un point et l'id avec un dièse, juste après le nom de balise : section.contenu#principal. Sans nom de balise, Pug suppose un div ; .carte seul veut donc dire <div class="carte">. Le raccourci point n'accepte que lettres, chiffres, tirets et tirets bas ; une classe avec deux-points ou barre oblique va dans l'attribut class entre parenthèses.

Quelle est la différence entre HTML et Pug ?

HTML entoure chaque élément d'une balise ouvrante et d'une balise fermante, et le navigateur le lit directement. Pug décrit la même structure par l'indentation, n'a pas de balise fermante et raccourcit les parties fréquentes comme les classes et les id. Un fichier Pug est compilé en HTML sur le serveur avant d'arriver au navigateur ; en échange, on y ajoute facilement variables, boucles et blocs communs. HTML est le résultat, Pug est la recette qui le produit.

Trois points à surveiller

Espaces : Pug n'ajoute pas d'espace entre deux lignes. Dans un texte mixte comme « Bonjour <b>le monde</b> », l'outil garde l'espace en fin de ligne | pour que les mots ne se collent pas. Ne supprimez pas ces espaces en retouchant le résultat.

Dièse et accolades : dans un texte, Pug exécute #{...} et #[...] comme du code. Si votre HTML contient « #{ », l'outil l'écrit \#{ et Pug l'affiche comme du texte.

Classes avec caractères spéciaux : les classes Tailwind comme md:flex ou w-1/2 n'entrent pas dans le raccourci point. L'outil les place dans un attribut class='md:flex' ; Pug réunit les deux écritures dans une seule valeur class.

Pourquoi il n'y a pas de conversion Pug vers HTML

Le retour vers HTML demande le compilateur Pug lui-même ; avec son analyseur JavaScript, il dépasse la limite de 2 Mo de ce site. La page convertit donc dans un seul sens.

Pour compiler un fichier .pug en HTML, utilisez le paquet pug de votre projet : c'est déjà ainsi que votre serveur l'affiche.

Balises non fermées

Les navigateurs tolèrent une balise non fermée, mais Pug lit la structure uniquement grâce à l'indentation. L'outil garde tout le contenu d'une balise ouverte, mais doit deviner l'imbrication. Dans ce cas, la ligne de résultat ajoute « balise non fermée trouvée » ; vérifiez l'indentation du résultat.

Questions fréquentes

Jade et Pug, est-ce la même chose ?

Oui. Le langage de modèles Jade a été renommé Pug en 2016 à cause d'un problème de marque. La syntaxe est presque identique ; le résultat de cet outil utilise la syntaxe de base, valable dans les versions actuelles de Pug comme dans les anciens fichiers Jade.

Pourquoi &amp; dans un attribut est devenu & ?

Pug échappe lui-même les valeurs d'attribut au moment du rendu. Si &amp; restait tel quel, Pug l'échapperait une deuxième fois et la page afficherait &amp;amp;. L'outil écrit la valeur décodée : le HTML compilé est identique à votre original.

Les commentaires sont-ils gardés ?

Oui. Un commentaire HTML devient un commentaire Pug qui commence par //, rendu à nouveau en commentaire HTML. Remplacez // par //- si le commentaire ne doit pas apparaître dans la page.

Mon code est-il envoyé quelque part ?

Non. L'analyseur HTML et l'écriture Pug fonctionnent dans votre navigateur ; le code collé ne quitte pas cette page.