Convertidor de HTML a Pug

Convierte HTML a sintaxis de plantilla Pug

Etiquetas: convertidor de plantillas convertir código html pug

🚀 194,724 conversiones totales (4 este mes)

¿Qué es esta herramienta?

Esta herramienta en línea gratuita te permite convertir rápidamente HTML estándar en plantillas Pug limpias e indentadas. Es ideal para desarrolladores que usan Node.js y marcos web modernos que prefieren un código legible y mantenible.

Cómo usar

  1. Pega tu código HTML en el editor o escríbelo manualmente.
  2. Haz clic en Convertir para generar el código Pug correspondiente.
  3. Descarga, copia o comparte el resultado con un enlace único.

También puedes iniciar sesión con Google o GitHub para guardar tu historial de conversiones para uso futuro.

¿Qué es Pug?

Pug es un motor de plantillas de alto rendimiento para Node.js, inspirado en Haml. Reemplaza el HTML tradicional con una sintaxis concisa y sensible al espacio en blanco, mejorando la claridad del código y reduciendo la repetición.

Pug se utiliza comúnmente en aplicaciones web construidas con Express.js y ofrece características avanzadas como reutilización de código, incrustación de lógica y una indentación más limpia.

Aprende más en la documentación oficial de Pug.

Ejemplo de sintaxis Pug


doctype html
html(lang="en")
  head
    title= pageTitle
    script(type="text/javascript").
      if (foo) bar(1 + 5)
  body
    h1 Pug - motor de plantillas para node
    #container.col
      if youAreUsingPug
        p Eres increíble
      else
        p ¡Ponte a ello!
      p.
        Pug es un lenguaje de plantillas conciso y simple
        con un fuerte enfoque en el rendimiento y las características.
    

Ejemplo 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 - motor de plantillas para node</h1>
    <div id="container" class="col">
      <p>Eres increíble</p>
      <p>Pug es un lenguaje de plantillas conciso y simple con un fuerte enfoque en el rendimiento y características poderosas.</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 - motor de plantillas para node
    #container.col
      p Eres increíble
      p Pug es un lenguaje de plantillas conciso y simple con un fuerte enfoque en el rendimiento y características poderosas.