HTML ke Pug Konverter
Ubah kode HTML menjadi kode Pug dengan cepat. Mendukung konversi di browser lokal, dilengkapi dengan editor kode dan fungsi auto-complete.
Input HTML
Output Pug
Petunjuk Penggunaan
Masukkan kode HTML
Tempelkan atau masukkan kode HTML yang ingin Anda konversi di bidang input kiri.
Eksekusi konversi
Klik tombol "Konversi ke Pug" untuk mengubah kode HTML menjadi format Pug.
Lihat hasil
Lihat kode Pug yang telah dikonversi di bidang output kanan.
Gunakan hasil
Salin atau unduh kode Pug yang telah dikonversi untuk digunakan dalam proyek Anda.
Pengetahuan Dasar Mesin Template Pug
Apa itu Pug?
Pug (sebelumnya dikenal sebagai Jade) adalah mesin template berperforma tinggi yang dikompilasi menjadi HTML dan banyak digunakan di lingkungan Node.js. Pug menyediakan sintaks yang ringkas dan elegan, memungkinkan pengembang menulis halaman HTML terstruktur dengan kode yang lebih sedikit, sekaligus mendukung fitur tingkat lanjut seperti variabel, mixin, dan pengecekan kondisi.
Keunggulan Utama Pug
Sintaks ringkas, mengurangi kode berlebih
Sintaks berindentasi, meningkatkan keterbacaan kode
Mendukung pewarisan dan inklusi template
Dukungan kuat untuk ekspresi logika
Auto-escape, meningkatkan keamanan
Integrasi yang mulus dengan ekosistem JavaScript
Perbandingan Sintaks HTML dan Pug
<div class="container">
<h1>Halaman Selamat Datang</h1>
<p class="description">
Ini adalah paragraf contoh
</p>
<ul>
<li>Item daftar 1</li>
<li>Item daftar 2</li>
</ul>
</div>
.container
h1 Halaman Selamat Datang
p.description
| Ini adalah paragraf contoh
ul
li Item daftar 1
li Item daftar 2
Contoh Sintaks Pug yang Umum
h1 Teks judul
div.container#main
a(href='link', title='judul')
div p Teks bersarang
//- Komentar yang tidak akan ditampilkan // Komentar HTML yang akan ditampilkan
- var name = 'pengguna' p= name
Catatan Konversi
- Struktur HTML yang kompleks mungkin perlu disesuaikan secara manual untuk memenuhi praktik terbaik Pug
- Pug bergantung pada indentasi yang ketat, pastikan kode yang dikonversi memiliki indentasi yang benar
- Blok skrip dan gaya dalam HTML mungkin perlu penanganan khusus setelah dikonversi
- Untuk proyek besar, disarankan untuk menggunakan konverter Pug profesional atau plugin framework
API开发平台
快速构建、测试和部署API
推荐工具
Alat Pemformat XML - Alat Gratis Online untuk Mempercantik dan Mengompres Kode XML
Alat pemformat XML online gratis yang mendukung fungsi seperti mempercantik kode XML, kompresi, validasi, dan lainnya, membuat kode XML Anda lebih standar dan mudah dibaca. Menyediakan pratinjau pemformatan secara real-time dan mendukung berbagai opsi format XML.
XML ke JSON - Alat Konversi Online Gratis
Alat XML ke JSON dapat menguraikan dan mengonversi string format XML dan string format JSON, serta memformat string yang telah dikonversi.
Alat Online Pemformat dan Kompresi JavaScript - Mempercantik, Mengoptimalkan, dan Mengacak Kode JS
Alat online yang andal untuk memformat dan memampatkan kode JavaScript (JS). Mendukung indentasi kustom (tab atau spasi), pelipatan/ekspansi kode, pembungkusan otomatis, pempercantik satu klik, serta kompresi/obfuscation skrip JS yang efisien—membantu pengembang meningkatkan keterbacaan kode, memperkecil ukuran file, dan mengoptimalkan performa situs web.
Konverter YAML ke JSON - Kotak Alat Online Gratis
Alat konversi dua arah format YAML (YML) dan JSON secara online, mendukung konversi dua arah antara data YAML dan JSON, serta mendukung validasi apakah data format YAML dan JSON yang dimasukkan benar.
Pemformatan YAML - Alat YAML Online Gratis
Alat pemformatan dan pemperindahan YAML online gratis yang mendukung penyesuaian indentasi otomatis, penyorotan sintaksis, dan menghapus spasi ekstra, membuat kode YAML Anda jelas dan mudah dibaca. Tidak perlu instalasi, pemformatan satu klik untuk meningkatkan keterbacaan dan efisiensi pemeliharaan file YAML!