Apa itu Pratinjau Markdown?
Markdown adalah sintaks pemformatan ringan di balik README, postingan blog, pesan chat, dokumentasi, dan banyak tempat lain di mana Anda ingin pemformatan sederhana dan mudah dibaca tanpa menulis HTML mentah. Karena Markdown adalah teks biasa, mudah untuk ditulis di mana saja — tetapi juga mudah untuk sedikit salah sintaks dan tidak menyadarinya sampai sudah dipublikasikan.
Previewer ini merender Markdown Anda saat Anda mengetik, berdampingan dengan sumbernya, sehingga Anda dapat segera menangkap kesalahan format — spasi yang hilang setelah #, code fence yang tidak ditutup, atau daftar yang tidak terpisah dari paragraf di atasnya — sebelum Anda melakukan commit README, mempublikasikan postingan, atau mengirim pesan berformat.
Kapan Menggunakan Kalkulator Ini
- Menulis README GitHub atau GitLab dan ingin memverifikasi format sebelum melakukan commit
- Menulis draf postingan Markdown untuk platform blog, situs dokumentasi, atau wiki
- Memeriksa email atau pesan chat Markdown dirender dengan benar sebelum mengirim
- Mempelajari sintaks Markdown dengan bereksperimen dengan berbagai format dan melihat hasil langsung
- Mengkonversi snippet Markdown pendek ke HTML untuk ditempelkan ke CMS atau template email
- Mendebg dokumen Markdown di mana beberapa format tidak dirender seperti yang diharapkan
Langkah-langkah:
- Ketik atau tempel Markdown Anda ke panel kiri.
- Lihat pratinjau HTML yang dirender diperbarui secara instan di sebelah kanan.
- Sesuaikan sintaks Anda hingga pratinjau sesuai dengan yang Anda maksud.
- Salin sumber Markdown final Anda setelah puas dengan hasilnya.
Rumus
Kasus Penggunaan
- Mempratinjau README GitHub atau GitLab sebelum melakukan commit
- Menyusun pesan berformat untuk Slack, Discord, atau aplikasi chat lain yang mendukung Markdown
- Memeriksa format postingan blog atau dokumentasi sebelum dipublikasikan
- Mempelajari sintaks Markdown dengan bereksperimen dan melihat hasilnya secara langsung
- Dengan cepat mengonversi potongan Markdown singkat ke HTML untuk ditempel di tempat lain
Manfaat Utama
- Lihat Markdown Anda dirender secara instan, berdampingan dengan sumbernya
- Tangkap kesalahan sintaks sebelum mempublikasikan di mana pun
- Berjalan sepenuhnya offline di browser Anda — tidak ada yang diunggah
- Gratis, tanpa pendaftaran, tanpa batas ukuran file untuk penggunaan umum
Tips Profesional
- Tambahkan baris kosong sebelum dan sesudah daftar dan blok kode untuk rendering paling andal di berbagai parser Markdown
- Gunakan tanda bintang ganda untuk bold dan tanda bintang tunggal (atau underscore) untuk italic guna menghindari ambiguitas
- Pratinjau di alat ini terlebih dahulu, lalu periksa platform target (GitHub, Slack, dll.) karena beberapa mendukung sintaks tambahan seperti tabel
- Jaga heading tetap berurutan (jangan lompat dari # ke ###) untuk struktur dokumen dan aksesibilitas yang lebih baik
Kesalahan Umum yang Harus Dihindari
- Lupa baris kosong yang diperlukan antara paragraf dan daftar berikutnya
- Melewatkan spasi setelah simbol # pada heading, yang mencegahnya dirender
- Membiarkan code fence (```) tidak ditutup, yang menelan sisa dokumen sebagai kode
- Menggunakan tanda bintang tunggal untuk bold alih-alih ganda, menghasilkan italic bukannya bold
Istilah Kunci Dijelaskan
- CommonMark: Spesifikasi standar sintaks Markdown, dirancang untuk mengurangi inkonsistensi
- GFM: GitHub-Flavored Markdown, dialek yang diperluas yang mendukung tabel dan daftar tugas
- Code fence: Blok yang dibatasi oleh tiga backtick (```) yang digunakan untuk memformat kode multi-baris
- Inline formatting: Format yang diterapkan dalam satu baris, seperti *italic* atau `code`, berbeda dengan elemen tingkat blok
Konsep Terkait
- JSON formatter:
- Regex tester:
- Pembuat sandi:
- Konverter warna:
- URL encoder/decoder:
Contoh
Mengetik "## Hello
This is **bold** and this is *italic*." merender menjadi heading level-2 diikuti paragraf dengan teks bold dan italic.
Interpretasi Hasil Anda
Panel kiri menampilkan teks sumber Markdown mentah Anda, dan panel kanan merendernya sebagai HTML berformat secara real time. Setiap penekanan tombol langsung memperbarui pratinjau, sehingga Anda dapat langsung melihat efek setiap elemen sintaks.
Masalah rendering yang umum biasanya berkaitan dengan spasi. Baris kosong diperlukan antara paragraf dan daftar yang mengikutinya untuk sebagian besar renderer. Judul memerlukan spasi setelah simbol #. Kode fence (```) harus berada di barisnya sendiri agar rendering blok kode aktif.
Pratinjau ini merupakan perkiraan yang dekat dengan bagaimana Markdown Anda akan tampil di sebagian besar platform (GitHub, Slack, Discord, dll.), tetapi setiap platform memiliki renderer sendiri dengan sedikit variasi. Selalu lakukan pemeriksaan akhir di platform tujuan untuk apa pun yang melampaui format dasar.