Pug en HTML quand il faut voir le balisage avant de le coller
Pug (et l’ancienne syntaxe Jade) remplace les chevrons par l’indentation. C’est agréable — jusqu’à vingt lignes imbriquées et la question de savoir si `nav.main-nav` s’est bien fermé trois niveaux plus haut. L’habitude, c’est la CLI `pug` sur une machine avec Node. Cette page fait la compilation dans l’onglet déjà ouvert. Collez un extrait, importez un `.pug` ou `.jade`, lisez le HTML à droite pendant que vous modifiez. La compilation tourne en local après le chargement : rien n’est envoyé à un serveur pour la transformation. Ce qui distingue cet atelier d’un convertisseur « coller et croiser les doigts », c’est l’aperçu : passez du balisage brut à la page rendue et repérez les erreurs de mise en page avant que le HTML n’atterrisse dans un CMS, un outil e-mail ou le dépôt d’un collègue.
La conversion visuelle vaut mieux que l’indentation dans la tête
La plupart des outils Pug vers HTML proposent une zone de texte et un lien de téléchargement. Pour cinq lignes, ça suffit. Dès qu’il faut vérifier une navigation, une grille de cartes ou un pied de page mêlant texte et liens, ça coince. Ici, source et résultat restent visibles ensemble. Vous changez une indentation, le panneau HTML réagit, vous basculez sur Aperçu quand comptent les espacements et la hiérarchie — pas seulement la présence d’un `</div>` quelque part. La bande de statut sous l’éditeur indique si le modèle parse. En cas d’échec, le message du compilateur pointe la ligne en cause — pas un panneau vide et silencieux. HTML en direct plus rendu en bac à sable : c’est la différence concrète. Vous n’exportez pas du balisage à l’aveugle pour l’ouvrir dans une autre appli et voir si la page tient debout.
Quelques limites d’entrée de jeu pour ne pas perdre de temps. L’outil compile le Pug collé ou importé dans le navigateur. Il ne lit pas un dossier de projet : `include`, `extends` et les partiels externes sont hors scope. Mixins, conditions, boucles et blocs `style.` / `script.` dans le même fichier se comportent comme en compilation locale. Pour du JavaScript multiligne en tête de modèle — par exemple un tableau de liens de menu —, placez une ligne `-` seule, puis le bloc JavaScript en retrait en dessous. Pug ne traite que la première ligne après `-` comme du code ; continuer un tableau sur la ligne indentée suivante sans ce schéma est un piège classique, et le message d’erreur paraît obscur tant qu’on ne connaît pas la règle.
Retour au convertisseurAperçu rendu, pas seulement la source
L’onglet Aperçu charge votre HTML compilé dans un iframe isolé. Titres, listes et liens s’affichent comme le navigateur les dessinera — utile quand l’indentation seule ne dit pas si une section est au bon endroit.
Côte à côte pendant les corrections
Pug à gauche, HTML à droite. Un attribut renommé, un point manquant sur une classe : le changement est immédiat avant copie ou téléchargement.
Pas d’installation pour une livraison rapide
Il vous faut juste du balisage pour un ticket ou un bloc landing ponctuel ? Inutile de lancer `npm install pug` et un script local. Importez, convertissez, copiez, avancez.
Convertir du Pug en HTML et valider la page, pas seulement les balises
Édition côte à côte, aperçu rendu du HTML compilé, balisage brut pour la copie et export — sans envoyer votre source sur un serveur.
Une conversion visuelle fiable avant le collage
La disposition est volontairement simple : Pug d’un côté, sortie de l’autre. Pendant la saisie, le panneau HTML se rafraîchit. Basculez sur Aperçu pour voir le document comme une page — barre de navigation, grille de cartes, colonnes de pied de page — au lieu de déduire la structure depuis la syntaxe indentée. Ce passage visuel attrape les bugs qui passent quand on survole les chevrons : wrapper manquant, classe sur le mauvais élément, texte à côté du lien au lieu de dedans. Le HTML brut reste à un clic quand il faut inspecter les attributs, copier un fragment pour un bloc CMS ou comparer avec un fichier existant. Vous n’êtes ni prisonnier de l’aperçu ni du seul code source — le flux correspond à la façon dont on relit vraiment les modèles.
Comment convertir du Pug en HTML sur cette page
Ajouter votre source Pug
Collez dans le panneau de gauche ou importez un fichier `.pug` ou `.jade`. L’indentation définit l’imbrication — ne mélangez pas tabulations et espaces dans le même fichier. Pour des variables ou tableaux en JavaScript non tamponné (`-`), placez le code multiligne sous une ligne `-` seule, avec le script en retrait dessous.
Lire le HTML et ouvrir l’aperçu
À droite, l’aperçu rendu de la page compilée s’affiche par défaut. Passez sur HTML pour voir les balises littérales. Si le panneau de saisie signale une erreur, corrigez d’abord cette ligne — aperçu et export restent bloqués tant que le modèle ne parse pas.
Copier, télécharger ou continuer dans le playground
Copiez quand la destination est un autre outil ou un bloc HTML de CMS. Télécharger enregistre un fichier `.html`. Aperçu / édition visuelle du HTML envoie la sortie actuelle vers le playground de l’accueil pour des retouches visuelles au-delà du seul Pug.
Pug en HTML : les questions qu’on rencontre vraiment
Prêt à transformer du Pug en HTML que vous avez vraiment regardé ?
Édition côte à côte, aperçu rendu, copie et téléchargement — gratuit, sans compte.
Pug en HTML
- Conversion visuelle : Pug et HTML côte à côte
- Aperçu HTML rendu avant l’export
- Copie, téléchargement ou ouverture dans le playground
- Exécution locale dans le navigateur après chargement
Modèles autonomes uniquement — pas de `include` ni `extends` depuis le disque.
