Pug na HTML, gdy musisz obejrzeć szablon przed wklejeniem
Pug (i starsza składnia Jade) zamienia nawiasy kątowe na wcięcia. To przyjemne — dopóki nie patrzysz na dwadzieścia linii zagnieżdżonych tagów i nie próbujesz przypomnieć sobie, czy `nav.main-nav` zamknął się poprawnie trzy poziomy wyżej. Standardem jest CLI `pug` na maszynie z Node. Ta strona robi krok kompilacji w karcie, którą już masz otwartą. Wklej fragment, wgraj plik `.pug` lub `.jade` i czytaj HTML po prawej podczas edycji. Kompilacja działa lokalnie po załadowaniu strony — nic nie leci na serwer w celu transformacji. To, co odróżnia ten warsztat od konwertera „wklej i miej nadzieję”, to podgląd: przechodzisz ze surowego znacznikowania do wyrenderowanego widoku skompilowanej strony i łapiesz błędy układu, zanim HTML trafi do CMS, narzędzia mailowego albo repozytorium kolegi.
Wizualna konwersja wygrywa z czytaniem wcięć w głowie
Większość narzędzi Pug do HTML daje pole tekstowe i link do pobrania. Na pięciolinijkowy fragment wystarczy. Rozpada się to, gdy sprawdzasz znacznikowanie nawigacji, siatkę kart albo stopkę z mieszanką tekstu i linków. Tu źródło i wynik są widoczne naraz. Zmieniasz wcięcie, panel HTML reaguje, przechodzisz do Podglądu, gdy liczą się odstępy i hierarchia — nie tylko to, czy gdzieś jest `</div>`. Pasek statusu pod edytorem mówi, czy szablon się parsuje. Gdy nie — dostajesz komunikat kompilatora przy linii, która się wyłożyła, zamiast cichego pustego panelu. Para na żywo HTML plus render w piaskownicy to praktyczna różnica. Nie eksportujesz znacznikowania na ślepo, żeby w innej aplikacji sprawdzić, czy strona wygląda dobrze.
Dwie granice warto powiedzieć od razu, żeby nie tracić czasu. To narzędzie kompiluje Pug, który wkleisz lub zaimportujesz, w przeglądarce. Nie czyta folderu projektu — `include`, `extends` i zewnętrzne partial’e są poza zakresem. Mixin’y, warunki, pętle oraz bloki `style.` / `script.` w tym samym pliku zachowują się jak przy lokalnej kompilacji. Gdy na początku szablonu piszesz wieloliniowy JavaScript — np. tablicę pozycji menu — użyj osobnej linii `-` i wciętego bloku JS pod spodem. Pug traktuje jako kod tylko pierwszą linię po `-`; kontynuowanie tablicy na kolejnym poziomie wcięcia bez tego wzorca to częsta pułapka składniowa, a komunikat błędu może wyglądać jak szyfr, dopóki nie znasz reguły.
Wróć do konwerteraRenderowany podgląd, nie tylko źródło
Karta Podgląd ładuje skompilowany HTML w izolowanym iframe. Nagłówki, listy i linki wyglądają tak, jak narysuje je przeglądarka — przydatne, gdy samo wcięcie nie powie, czy sekcja wylądowała we właściwym miejscu.
Obok siebie podczas poprawiania składni
Po lewej Pug, po prawej HTML. Małe zmiany — zmiana atrybutu, brakująca kropka w klasie — widać od razu, zanim skopiujesz lub pobierzesz.
Bez instalacji przy szybkim przekazaniu
Potrzebujesz tylko znacznikowania pod ticket albo jednorazowy blok landingowy? Pomijasz `npm install pug` i lokalny skrypt. Importuj, konwertuj, kopiuj, idź dalej.
Konwertuj Pug na HTML i sprawdź stronę, nie tylko tagi
Edycja obok siebie, renderowany podgląd skompilowanego HTML, surowe znacznikowanie do kopiowania i eksport — bez wysyłania źródła na serwer.
Wizualna konwersja, której możesz zaufać przed wklejeniem
Układ jest celowo prosty: wejście Pug z jednej strony, wyjście z drugiej. Podczas pisania panel HTML się odświeża. Przełącz na Podgląd, gdy chcesz zobaczyć dokument jako stronę — paski nawigacji, siatki kart, kolumny stopki — zamiast wyciągać strukturę ze skróconej składni z wcięciami. Ten wizualny krok łapie błędy, które przechodzą przy samym przejrzeniu nawiasów kątowych: brakujący wrapper, klasa na złym elemencie, tekst obok linku zamiast w środku. Surowy HTML jest o klik, gdy trzeba sprawdzić atrybuty, skopiować fragment pod blok CMS albo porównać z istniejącym plikiem. Nie jesteś zamknięty tylko w podglądzie albo tylko w źródle — przepływ odpowiada temu, jak ludzie naprawdę przeglądają szablony.
Jak przekonwertować Pug na HTML na tej stronie
Dodaj źródło Pug
Wklej w lewy panel albo użyj Wgraj dla pliku `.pug` lub `.jade`. Wcięcia definiują zagnieżdżenie — w pliku nie mieszaj tabulatorów ze spacjami. Gdy deklarujesz zmienne lub tablice w niebuforowanym JavaScript (`-`), wieloliniowy kod umieść pod samotną linią `-` ze skryptem wciętym poniżej.
Czytaj HTML i otwórz Podgląd
Prawy panel domyślnie pokazuje renderowany podgląd skompilowanej strony. Przełącz na HTML, gdy potrzebujesz dosłownych tagów. Gdy panel wejścia pokazuje błąd, najpierw popraw tę linię — podgląd i eksport są zablokowane, dopóki szablon się nie parsuje.
Kopiuj, pobierz lub kontynuuj w playground
Użyj Kopiuj, gdy celem jest inne narzędzie albo blok HTML w CMS. Pobierz zapisuje plik `.html`. Podgląd / wizualna edycja HTML wysyła bieżące wyjście do playground na stronie głównej, gdy chcesz edycji wizualnej poza samym Pug.
Pug na HTML: pytania, na które naprawdę trafiasz
Gotowy zamienić Pug w HTML, który naprawdę widziałeś?
Edycja obok siebie, renderowany podgląd, kopiowanie i pobieranie — za darmo, bez konta.
Pug na HTML
- Wizualna konwersja z Pug i HTML obok siebie
- Renderowany podgląd skompilowanego HTML przed eksportem
- Kopiuj, pobierz lub otwórz w playground
- Działa lokalnie w przeglądarce po załadowaniu
Tylko samodzielne szablony — bez `include` ani `extends` z dysku.
