Aller au contenu
Numio

Convertir HTML en modèles Pug — Numio

Convertissez du HTML en syntaxe de template Pug (anciennement Jade), qui utilise l’indentation au lieu des balises fermantes. Basculez entre document complet et fragment HTML, et choisissez tabulations, virgules et style de guillemets. Le HTML est envoyé au serveur pour la conversion.

Démarrer un template Pug à partir d’un balisage HTML existant.

Le traitement se fait localement dans votre navigateur ; vos données ne sont pas envoyées. Elles peuvent rester dans cet onglet entre les outils ; effacez-les sur un appareil partagé.
Pug output options
Load an example (replaces your input)

HTML

Pug

Quand l’utiliser

  • Démarrer un template Pug à partir d’un balisage HTML existant.
  • Vérifier sur un court extrait comment les attributs et l’imbrication se traduisent en Pug avant de convertir une page entière.

Mode d’emploi

  1. Collez du HTML ou chargez un exemple (fragment HTML, attributs de formulaire, document HTML). Charger un exemple remplace votre entrée.
  2. Activez le mode fragment pour convertir uniquement l’extrait, sans les enveloppes html, head et body. L’exemple ci-dessous utilise le mode fragment avec tabulations et virgules activées et guillemets doubles désactivés.
  3. Copiez le Pug et compilez-le avec votre configuration Pug pour vérifier le HTML rendu.

Entrée HTML

<section class="card"><h2>News</h2><p>Registration is open</p></section>

Sortie Pug (mode fragment, tabulations et virgules activées)

section.card
	h2 News
	p Registration is open

Détails et limites

Mode fragment désactivé, le HTML est traité comme un document et html, head et body peuvent être ajoutés. Activez-le lorsque vous n’avez besoin que des éléments.

Mélanger tabulations et espaces peut modifier les relations parent–enfant en Pug. Suivez le style d’indentation de votre projet.

Le HTML répété n’est pas transformé en boucles each, mixins ou variables Pug, et les CSS, images et scripts externes ne sont pas inclus.

Le parseur HTML peut réparer des balises incomplètes. Une conversion réussie ne valide pas le HTML et ne garantit pas une page identique.

FAQ

Pourquoi les balises html et body sont-elles ajoutées ?

En mode document, le parseur complète les éléments externes. Activez le mode fragment pour convertir le HTML d’un composant sans enveloppes.

Puis-je convertir du HTML en Pug dans VS Code ou en ligne de commande ?

Cette page exécute le paquet open source html2pug. Installez-le depuis npm pour convertir des fichiers dans un script ou en ligne de commande, ou continuez à utiliser cette page pour des extraits rapides.

Comment reconvertir du Pug en HTML ?

Cette page convertit uniquement du HTML vers Pug. Compilez le template avec Pug lui-même — par exemple avec le paquet pug-cli — pour retrouver du HTML.

Mon HTML est-il envoyé ?

Oui, il est envoyé au serveur douni.one pour être converti. Utilisez du code que vous pouvez partager et retirez au préalable les clés d’API ou les données clients.

Spécifications et références