Markdown ke HTML dengan Pratinjau Langsung
Ubah teks Markdown menjadi HTML bersih dengan pratinjau yang diperbarui saat Anda mengetik.
Dokumen Anda tetap di perangkat
Tidak ada yang perlu dihapus kemudian
Aman untuk dokumentasi internal
Jalan di semua browser modern
Cara kerjanya
- 1
Tempel Markdown Anda
Sebuah README, halaman dokumentasi, tulisan, atau catatan yang Anda inginkan sebagai HTML.
- 2
Periksa pratinjaunya
Pastikan strukturnya keluar sebagaimana Anda maksudkan sebelum melihat markup-nya.
- 3
Salin HTML-nya
Bawa ke sebuah CMS, templat surel, situs statis, atau halaman dokumentasi.
Mengapa memakai alat ini
CommonMark plus ekstensi GitHub
Tabel, coretan, daftar tugas, dan tautan otomatis — dialek tempat sebagian besar Markdown sebenarnya ditulis.
Pratinjau dan markup bersama
Lihat hasil yang dirender dan HTML yang dihasilkannya, jadi Anda bisa memeriksa keduanya sebelum menempel salah satu.
Keluaran semantis
Judul, daftar, dan tabel yang sungguhan alih-alih dinding div bergaya, jadi markup-nya bermakna.
Perilaku ganti baris sesuai pilihan Anda
Putuskan apakah satu ganti baris memutus barisnya atau bergabung ke paragraf — pengaturan yang selalu orang inginkan.
Tidak ada yang diunggah
Konversinya terjadi di browser Anda — dokumentasi yang belum terbit tak pernah sampai ke server.
Gratis tanpa akun
Tanpa pendaftaran, tanpa watermark, dan tanpa batas seberapa banyak yang Anda konversi.
Tak ada yang namanya “Markdown” tunggal — adanya beberapa
Inilah fakta di balik sebagian besar kejutannya. Uraian asli tahun 2004 berupa dokumen pendek dan sebuah skrip Perl, tanpa tata bahasa formal dan tanpa rangkaian uji, yang meninggalkan amat banyak hal benar-benar tak terdefinisi. Berbagai implementasi mengisi celahnya dengan cara berbeda, jadi masukan yang sama menghasilkan keluaran berbeda tergantung mana yang Anda pakai. CommonMark ada persis untuk memperbaiki itu: spesifikasi yang tepat dengan rangkaian kesesuaian, dan kini itulah yang dibidik sebagian besar pengurai serius. Tetapi CommonMark dengan sengaja mengecualikan hal-hal yang terus-menerus orang pakai, jadi GitHub Flavored Markdown menambahkan tabel, coretan, daftar tugas, dan tautan otomatis di atasnya. Akibat praktisnya, dokumen bertabel dirender sebagai tabel di GitHub dan sebagai karakter pipa harfiah pada pengurai CommonMark yang ketat. Sebelum menyalahkan Markdown Anda, periksa dialek apa yang dipakai tujuannya.
Satu ganti baris bukanlah pemutus baris
Inilah perilaku yang membingungkan lebih banyak orang daripada semua yang lain digabung, dan ia bukan kutu. Markdown memperlakukan baris berurutan sebagai satu paragraf dan menyatukannya dengan spasi, karena formatnya dirancang agar melipat paragraf secara manual di penyunting teks tidak mengubah keluarannya. Dua baris alamat yang ditulis terpisah karena itu keluar dalam satu baris. Obat klasiknya adalah dua spasi di ujung baris, sebuah konvensi yang sungguh buruk karena tak kasatmata dan para penyunting menghapusnya. Garis miring terbalik di ujung baris melakukan hal yang sama di CommonMark dan setidaknya terlihat. Dan baris kosong memulai paragraf baru, yang biasanya memang yang orang inginkan. GitHub mengubah bawaannya di kolom komentar sehingga ganti baris di sana memang memutus, dan itulah sebabnya teks yang sama berperilaku berbeda di sebuah isu dan di sebuah README.
Markdown melewatkan HTML dengan sengaja, dan itu keputusan keamanan
HTML mentah di dalam Markdown adalah fitur, bukan kelalaian: rancangan aslinya mengandaikan Anda akan turun ke HTML kapan pun Markdown tak bisa menyatakan yang Anda perlukan. Itu berarti sebuah konverter Markdown ke HTML, menurut spesifikasinya, boleh melewatkan tag `<script>` langsung ke keluarannya. Untuk dokumen Anda sendiri itu persis yang Anda inginkan. Untuk apa pun yang dikirim pengguna — komentar, ulasan, bio profil, tiket dukungan — itu kerentanan cross-site scripting tersimpan yang menunggu terjadi, dan langkah konversilah tempat ia dibangun. Aturan yang layak dibawa sederhana: merender Markdown tepercaya itu aman, merender Markdown tak tepercaya menuntut pembersihan HTML hasilnya sesudahnya terhadap daftar tag yang diizinkan. Jangan pernah mengandalkan pengurai Markdown itu sendiri untuk mengamankan masukan pengguna, karena ia tak dirancang untuk itu.
Yang sengaja tak bisa dilakukan Markdown
Markdown adalah bahasa pemformatan untuk prosa, bukan bahasa tata letak, dan batasnya disengaja alih-alih fitur yang hilang. Tak ada sintaks untuk menaruh kelas atau id pada sebuah elemen, tak ada cara menetapkan lebar gambar, tak ada penambahan atribut apa pun. Perataan tabel adalah satu-satunya pengecualian, dan bahkan itu terbatas pada kiri, kanan, dan tengah. Ketika Anda memerlukan salah satunya, jawaban di dalam Markdown adalah menulis HTML sebaris — yang berhasil, dan seketika meninggalkan himpunan bagian yang portabel, karena potongan itu takkan dirender di konteks yang mencopot HTML. Inilah pertukaran di jantung formatnya: ia tetap terbaca sebagai teks biasa justru karena ia menolak tumbuh. Kalau Anda mendapati diri menulis lebih banyak HTML daripada Markdown, dokumennya sudah melampaui formatnya.
Ke mana keluarannya pergi mengubah apa yang perlu Anda simpan
HTML yang keluar sengaja dibuat telanjang — judul, paragraf, daftar, dan tautan, tanpa div pembungkus dan tanpa kelas — karena itulah yang mewarisi sebuah stylesheet dengan bersih. Untuk halaman yang Anda kendalikan, itu persis benar. Surel adalah pengecualian yang layak direncanakan, karena kebanyakan klien mencopot blok `<style>` dan mengabaikan stylesheet eksternal, jadi apa pun yang harus tampak terdesain di kotak masuk memerlukan CSS sebaris per elemen setelah konversi. CMS adalah kasus lainnya: banyak penyunting membersihkan HTML tempelan dan diam-diam membuang atribut, jadi tempellah di tampilan sumber alih-alih tampilan visual. Dan kalau tujuannya menerima Markdown secara langsung — sebagaimana kebanyakan generator situs statis, wiki, dan platform dokumentasi — mengonversi lebih dulu adalah langkah mundur, karena Anda kehilangan sumber yang lebih mudah disunting.
Kenapa mengonversi secara lokal penting untuk jenis teks ini
Pertimbangkan apa yang biasanya ada di sebuah penyunting Markdown. Dokumentasi internal yang menjelaskan cara sebuah sistem bekerja. README untuk repositori yang belum publik. Tulisan blog sebelum terbit. Catatan rapat yang memuat nama-nama. Buku pegangan operasional yang menyebut nama host dan menjelaskan apa yang dilakukan ketika sesuatu gagal. Markdown adalah format tempat orang menuliskan pengetahuan internal, yang menjadikan dokumen tempelan sebagai gambaran tentang bagaimana sebuah organisasi beroperasi — jarang rahasia dalam pengertian dramatis, dan jarang pula sesuatu yang akan Anda pilih untuk diserahkan kepada orang asing. Konverter yang dihosting menerima semua itu. Alat ini mengonversi di halaman dan tak mengirimkan apa pun, yang bisa Anda pastikan di tab Network pada developer tools.
Kesalahan umum yang sebaiknya dihindari
- Mengharapkan satu ganti baris memutus barisnya. Markdown menyatukan baris berurutan menjadi satu paragraf secara rancangan — pakai baris kosong untuk paragraf baru, atau garis miring terbalik di ujung untuk pemutus keras.
- Merender Markdown kiriman pengguna tanpa membersihkan keluarannya. HTML mentah lewat menurut spesifikasi, jadi tag `<script>` di sebuah komentar menjadi persoalan skrip tersimpan pada langkah konversinya.
- Menganggap tiap pengurai berbicara dialek yang sama. Tabel, daftar tugas, dan coretan adalah ekstensi GitHub, bukan CommonMark, jadi sebuah tabel bisa muncul sebagai karakter pipa harfiah di tempat lain.
- Meraih HTML sebaris untuk menetapkan kelas atau lebar gambar. Ia berhasil dan meninggalkan himpunan bagian yang portabel — potongan itu akan lenyap di mana pun HTML dicopot.
- Mengonversi Markdown yang sebenarnya diterima langsung oleh tujuannya. Generator situs statis, wiki, dan platform dokumentasi biasanya menerima Markdown, dan mengonversi lebih dulu menghilangkan sumber yang lebih mudah disunting.
Perbandingan
| Aspek | Alat ini | Konverter daring | Generator situs statis |
|---|---|---|---|
| Konten dikirim ke server | Tidak pernah | Umumnya ya | Tidak |
| Ekstensi GitHub didukung | Ya | Beragam | Umumnya |
| Keluaran mewarisi CSS Anda | Ya | Beragam | Ya |
| Perlu penyiapan | Tidak ada | Tidak ada | Pasang dan konfigurasikan |
| Akun atau pendaftaran | Tidak perlu | Sering diminta | Tidak perlu |
| Harga | Gratis | Gratis / paket berbayar | Gratis |
Fitur
Tabel dan daftar tugas
Ekstensi GitHub yang tak ada di CommonMark ketat tetapi ada di sebagian besar Markdown yang nyata.
Pratinjau langsung
Keluaran yang dirender diperbarui sambil Anda mengetik, jadi kesalahan muncul seketika.
Blok kode berpagar
Blok tiga backtick menjadi `pre` dan `code` dengan bahasanya dicatat sebagai kelas.
Markup bersih dan minimal
Tanpa div pembungkus, tanpa nama kelas hasil generasi, tanpa gaya sebaris — HTML-nya mewarisi stylesheet Anda.
Unicode di seluruhnya
Teks Arab, Turki, dan beraksen lewat tanpa berubah di kedua arah.
Mampu menangani dokumen panjang
Manual utuh terkonversi tanpa unggahan maupun plafon ukuran.
Tanpa instalasi
Tanpa generator situs statis, tanpa runtime, tanpa dependensi — jalan di halaman web.
Ramah Arab dan RTL
Antarmuka lengkap dalam delapan bahasa, termasuk Arab kanan-ke-kiri.
Aman secara bawaan
Disajikan lewat HTTPS, tanpa pelacakan konten dan tanpa unggahan ke pihak ketiga.
Siapa yang memakainya
Penulis teknis
Memasukkan dokumentasi ke CMS yang menerima HTML tetapi tidak Markdown.
Pengembang
Memeriksa bagaimana sebuah README akan tampil sebelum mendorongnya ke repositori.
Editor konten
Mengubah draf Markdown seorang penulis menjadi markup yang bisa diterima sistem penerbitan.
Penulis buletin
Menghasilkan badan HTML sebuah surel dari draf yang ditulis dengan Markdown biasa.
Pertanyaan yang Sering Diajukan
Tidak. Semuanya berjalan lokal di browser Anda — teks Anda tidak pernah diunggah, disimpan, atau dibagikan.
Ya — sepenuhnya gratis, tanpa akun dan tanpa batas.