HTML naar Pug-converter online — Numio
Zet HTML om naar de sjabloonsyntaxis van Pug (voorheen Jade), die inspringing gebruikt in plaats van sluittags. Kies tussen een volledig document en een HTML-fragment, en stel tabs, komma’s en aanhalingstekens in. De HTML wordt lokaal in je browser omgezet en niet geüpload.
Maak een eerste Pug-sjabloon op basis van bestaande HTML.
Wanneer gebruik je dit?
- Maak een eerste Pug-sjabloon op basis van bestaande HTML.
- Controleer bij een kort fragment hoe attributen en geneste elementen naar Pug worden omgezet voordat je een hele pagina converteert.
Hoe werkt het
- Plak HTML of laad een voorbeeld (HTML-fragment, formulierattributen of HTML-document). Een voorbeeld vervangt je huidige invoer.
- Schakel fragmentmodus in om alleen het fragment om te zetten, zonder omhullende html-, head- en body-elementen. Het onderstaande voorbeeld gebruikt fragmentmodus met tabs en komma’s aan en dubbele aanhalingstekens uit.
- Kopieer de Pug en compileer deze met je eigen Pug-omgeving om de gerenderde HTML te controleren.
HTML-invoer
<section class="card"><h2>News</h2><p>Registration is open</p></section>
Pug-uitvoer (fragmentmodus, tabs en komma’s aan)
section.card h2 News p Registration is open
Details en beperkingen
Als fragmentmodus uitstaat, wordt de HTML als document behandeld en kunnen html-, head- en body-elementen worden toegevoegd. Schakel de modus in als je alleen de elementen nodig hebt.
Een combinatie van tabs en spaties kan de hiërarchie van elementen in Pug veranderen. Volg de inspringingsstijl van je project.
Herhaalde HTML wordt niet omgezet naar Pug each-lussen, mixins of variabelen. Externe CSS, afbeeldingen en scripts worden niet meegenomen.
De HTML-parser kan onvolledige tags herstellen. Een geslaagde conversie valideert de HTML niet en garandeert geen identieke pagina.
FAQ
Waarom worden html- en body-tags toegevoegd?
In documentmodus vult de parser de buitenste elementen aan. Schakel fragmentmodus in om de HTML van een component zonder omhullende elementen te converteren.
Kan ik HTML naar Pug omzetten in VS Code of via de opdrachtregel?
Deze pagina gebruikt het opensourcepakket html2pug. Installeer het via npm om bestanden met een script of via de opdrachtregel te converteren, of blijf deze pagina gebruiken voor korte fragmenten.
Hoe zet ik Pug weer om naar HTML?
Deze pagina zet alleen HTML om naar Pug. Compileer het sjabloon met Pug zelf — bijvoorbeeld met het pakket pug-cli — om weer HTML te krijgen.
Wordt mijn HTML geüpload?
Nee. De conversie vindt lokaal in je browser plaats en de HTML wordt niet geüpload. Wis de invoer na gebruik op een gedeeld apparaat.