CodeUtility
Faciliter la vie des développeurs !

Convertisseur HTML en Pug

Convertissez du HTML en syntaxe de template Pug

Étiquettes: convertir le code convertisseur de modèles html pug

🚀 194,724 conversions totales (4 ce mois-ci)

Qu'est-ce que cet outil ?

Cet outil en ligne gratuit vous permet de convertir rapidement du HTML standard en modèles Pug propres et indentés. Il est idéal pour les développeurs utilisant Node.js et les frameworks web modernes qui préfèrent un code lisible et maintenable.

Comment l'utiliser

  1. Collez votre code HTML dans l'éditeur ou tapez-le manuellement.
  2. Cliquez sur Convertir pour générer le code Pug correspondant.
  3. Téléchargez, copiez ou partagez le résultat avec un lien unique.

Vous pouvez également vous connecter avec Google ou GitHub pour enregistrer votre historique de conversion pour une utilisation future.

Qu'est-ce que Pug ?

Pug est un moteur de template haute performance pour Node.js, inspiré par Haml. Il remplace le HTML traditionnel par une syntaxe concise et sensible aux espaces, améliorant la clarté du code et réduisant la répétition.

Pug est couramment utilisé dans les applications web construites avec Express.js et offre des fonctionnalités avancées telles que la réutilisation de code, l'intégration de logique et une indentation plus propre.

En savoir plus sur la documentation officielle de Pug.

Exemple de syntaxe Pug


doctype html
html(lang="en")
  head
    title= pageTitle
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - moteur de template node
    #container.col
      if youAreUsingPug
        p Vous êtes incroyable
      else
        p Allez-y !
      p.
        Pug est un langage de template concis et simple
        avec un fort accent sur la performance et les fonctionnalités.

Exemple HTML vs Pug

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - moteur de template node</h1>
    <div id="container" class="col">
      <p>Vous êtes incroyable</p>
      <p>Pug est un langage de template concis et simple avec un fort accent sur la performance et des fonctionnalités puissantes.</p>
    </div>
  </body>
</html>

Pug


doctype html
html(lang="en")
  head
    title Pug
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - moteur de template node
    #container.col
      p Vous êtes incroyable
      p Pug est un langage de template concis et simple avec un fort accent sur la performance et des fonctionnalités puissantes.