Convertir HTML a Pug (Jade)
Convierta código HTML en una plantilla Pug con sangría, el lenguaje que antes se llamaba Jade
Sus datos se quedan con usted. La conversión ocurre dentro del navegador; no se envía nada a ningún servidor.
¿Le sirvió esta herramienta?
Gracias, su comentario llegó.
Cómo funciona
Usted tiene un HTML terminado, quizá una maqueta del diseñador, y su aplicación Express u otra de Node.js arma las páginas con Pug. Pegue el HTML en el panel izquierdo y la versión Pug aparece enseguida a la derecha. La línea <div class="tarjeta" id="pedido"> se convierte en .tarjeta#pedido: un div con clase o id no necesita nombre de etiqueta, porque div es la etiqueta por defecto de Pug. Los demás atributos van entre paréntesis, como a(href='/', target='_blank'). Una sola línea de texto queda junto a su etiqueta (p Hola); el texto mezclado con negritas o enlaces se reparte en líneas que empiezan con |. El contenido de script, style y pre se conserva tal cual. La línea de resultado dice cuántas etiquetas dieron cuántas líneas Pug.
Esta herramienta también se busca como convertir html a pug, html a pug, html to jade, convertidor html a pug, html to pug.
¿Qué es Pug (Jade)?
Pug es un lenguaje de plantillas HTML que se usa sobre todo con Node.js. No se escriben etiquetas de cierre: la sangría indica qué elemento va dentro de cuál. Como admite variables, bucles y condiciones, servidores como Express lo usan para armar páginas. Hasta 2016 se llamaba Jade, por eso en proyectos antiguos aparecen archivos .jade.
¿Qué es Atajo de clase e id?
En Pug la clase se escribe con un punto y el id con una almohadilla, justo después del nombre de la etiqueta: section.contenido#principal. Si falta el nombre, Pug supone un div; .tarjeta sola significa <div class="tarjeta">. El atajo con punto solo admite letras, números, guiones y guiones bajos; una clase con dos puntos o barra va al atributo class entre paréntesis.
¿Cuál es la diferencia entre HTML y Pug?
HTML encierra cada elemento entre una etiqueta de apertura y una de cierre, y el navegador lo lee directamente. Pug describe la misma estructura con sangría, no tiene etiquetas de cierre y acorta partes frecuentes como clases e id. Un archivo Pug se compila a HTML en el servidor antes de llegar al navegador; a cambio, es fácil agregarle variables, bucles y piezas compartidas. HTML es el resultado y Pug es la receta que lo produce.
Tres puntos a revisar
Espacios: Pug no agrega espacio entre líneas. En un texto mixto como «Hola <b>mundo</b>» la herramienta deja el espacio al final de la línea | para que las palabras no se peguen. No borre esos espacios al editar el resultado.
Almohadilla y llaves: dentro del texto, Pug ejecuta #{...} y #[...] como código. Si su HTML contiene «#{», la herramienta lo escribe como \#{ y Pug lo muestra como texto normal.
Clases con caracteres especiales: las clases de Tailwind como md:flex o w-1/2 no caben en el atajo con punto. La herramienta las pasa a un atributo class='md:flex'; Pug junta ambas formas en un solo valor class.
Por qué no hay conversión de Pug a HTML
El camino de vuelta necesita el compilador de Pug, y junto con su analizador de JavaScript supera el límite de 2 MB de este sitio. Por eso la página convierte en un solo sentido.
Para compilar un archivo .pug a HTML use el paquete pug de su proyecto; así es como su servidor ya lo procesa.
Etiquetas sin cerrar
Los navegadores toleran una etiqueta sin cerrar, pero Pug lee la estructura solo por la sangría. La herramienta conserva el contenido de una etiqueta abierta, aunque tiene que adivinar el anidamiento. En ese caso la línea de resultado agrega «hay una etiqueta sin cerrar»; revise la sangría del resultado.
Preguntas frecuentes
¿Jade y Pug son lo mismo?
Sí. El lenguaje de plantillas Jade pasó a llamarse Pug en 2016 por un problema de marca registrada. La sintaxis es casi igual; el resultado de esta herramienta usa la sintaxis básica, que funciona en Pug actual y en archivos Jade antiguos.
¿Por qué & en un atributo se volvió &?
Pug escapa por sí mismo los valores de atributo al generar la página. Si & quedara igual, Pug lo escaparía otra vez y la página mostraría &amp;. La herramienta escribe el valor ya decodificado, así el HTML compilado coincide con el original.
¿Se conservan los comentarios?
Sí. Un comentario HTML pasa a ser un comentario Pug que empieza con //, y Pug lo vuelve a escribir como comentario HTML. Cambie // por //- si no quiere que aparezca en la página.
¿Mi código se sube a algún servidor?
No. El analizador de HTML y la escritura en Pug funcionan en su navegador; el código que pega no sale de esta página.