Lewati ke konten

Konverter HTML ke Pug Daring

Konversi HTML menjadi sintaks templat Pug (sebelumnya Jade), yang menggunakan indentasi sebagai pengganti tag penutup. Beralih antara dokumen lengkap dan fragmen HTML, serta pilih tab, koma, dan gaya tanda petik. HTML dikonversi secara lokal di browser Anda tanpa diunggah.

Mulai templat Pug dari markup HTML yang sudah ada.

HTML is sent to the server for conversion. Use a snippet without confidential data.

Pug output options
Load an example (replaces your input)

Kapan menggunakannya

  • Mulai templat Pug dari markup HTML yang sudah ada.
  • Periksa pemetaan atribut dan struktur bertingkat ke Pug pada cuplikan pendek sebelum mengonversi seluruh halaman.

Cara penggunaan

  1. Tempelkan HTML atau muat contoh (fragmen HTML, atribut formulir, dokumen HTML). Memuat contoh akan mengganti masukan Anda.
  2. Aktifkan mode fragmen untuk mengonversi cuplikan saja tanpa pembungkus html, head, dan body. Contoh di bawah menggunakan mode fragmen dengan tab dan koma aktif serta tanda petik ganda nonaktif.
  3. Salin Pug dan kompilasikan dengan konfigurasi Pug Anda untuk memeriksa HTML yang dirender.

Masukan HTML

<section class="card"><h2>News</h2><p>Registration is open</p></section>

Keluaran Pug (mode fragmen, tab dan koma aktif)

section.card
	h2 News
	p Registration is open

Detail dan batasan

Saat mode fragmen nonaktif, HTML diperlakukan sebagai dokumen dan html, head, serta body dapat ditambahkan. Aktifkan jika hanya memerlukan elemennya.

Mencampur tab dan spasi dapat mengubah hubungan induk–anak dalam Pug. Ikuti gaya indentasi proyek Anda.

HTML berulang tidak diubah menjadi perulangan each, mixin, atau variabel Pug, dan CSS, gambar, serta skrip eksternal tidak disertakan.

Pengurai HTML dapat memperbaiki tag yang tidak lengkap. Konversi yang berhasil tidak memvalidasi HTML atau menjamin halaman yang identik.

FAQ

Mengapa tag html dan body ditambahkan?

Dalam mode dokumen, pengurai melengkapi elemen luar. Aktifkan mode fragmen untuk mengonversi HTML komponen tanpa pembungkus.

Bisakah saya mengonversi HTML ke Pug di VS Code atau dari baris perintah?

Halaman ini menjalankan paket sumber terbuka html2pug. Instal dari npm untuk mengonversi file dalam skrip atau dari baris perintah, atau tetap gunakan halaman ini untuk cuplikan singkat.

Bagaimana cara mengubah Pug kembali menjadi HTML?

Halaman ini hanya mengonversi HTML ke Pug. Kompilasikan templat dengan Pug sendiri — misalnya melalui paket pug-cli — untuk mendapatkan HTML kembali.

Apakah HTML saya diunggah?

Tidak. Konversi berjalan secara lokal di browser Anda, dan HTML tidak diunggah. Hapus masukan setelah menggunakan perangkat bersama.

Spesifikasi dan referensi