Konverter Markdown ke HTML

Ubah Markdown menjadi HTML siap tempel di web, dan lihat dulu bagian yang berpotensi rusak

Konverter Markdown ke HTML mengubah tulisan Markdown yang memakai simbol seperti #, **, dan - menjadi tag HTML yang dibaca halaman web. Aturan konversinya mengikuti spesifikasi GitHub Flavored Markdown (GFM), dan mesinnya adalah marked 18, pustaka sumber terbuka yang banyak dipakai, yang sudah disertakan di halaman ini. Selama Anda mengetik, tampilan web dan kode HTML langsung muncul di sebelah kanan. Hasilnya bisa disalin atau disimpan dalam bentuk yang sesuai dengan tempat tujuan: HTML isi saja, HTML dengan gaya, atau dokumen utuh (.html).

Alat ini tidak berhenti pada konversi. Bagian yang bisa bermasalah setelah ditempel dikumpulkan dalam daftar pemeriksaan: penekanan yang simbolnya tetap tampil sebagai teks, baris yang menyatu karena pindah baris tanpa baris kosong, alamat relatif yang tidak terbuka di situs lain, serta blok kode yang lupa ditutup. Klik kartu pemeriksaan, maka editor langsung pindah ke baris itu, dan pada bilah struktur di tengah terlihat blok apa saja yang menyusun dokumen beserta letak bagian yang perlu diperiksa. Tulisan hanya diproses di dalam peramban dan tidak dikirim ke server.

Kapan Markdown perlu diubah menjadi HTML

• Mengunggah tulisan ke kolom HTML blog atau situs: jika simbol Markdown ditempel apa adanya ke kolom yang menerima HTML langsung, seperti blok "HTML Kustom" di WordPress, ## dan ** akan tampil sebagai teks. Dengan mengubahnya ke HTML lebih dulu, judul, daftar, dan tabel masuk dengan tampilan yang benar.
• Memindahkan jawaban chat AI atau catatan ke web: jawaban dari alat chat AI dan tulisan dari aplikasi catatan untuk pengembang sering tersusun dengan simbol Markdown. Jika ditempel begitu saja, simbolnya tertinggal, jadi lebih rapi bila dipindahkan sebagai HTML atau dengan "Salin dengan format".
• Membuat buletin email: sebagian layanan email membatasi <style>. Menurut survei caniemail.com, Gmail versi web tidak mendukung <style> di dalam body dan membatasi ukurannya sampai 16 KB. Dalam kasus ini, bentuk "Dengan gaya", yang menyisipkan gaya langsung pada setiap tag, lebih aman.
• Membagikan README atau panduan sebagai satu halaman web: "Simpan sebagai .html" menghasilkan satu dokumen lengkap dengan huruf, tabel, gaya kode, dan warna mode gelap. Penerimanya cukup membukanya di peramban tanpa program tambahan.
• Menempel ke editor yang tidak punya kolom HTML: "Salin dengan format" memasukkan HTML dan teks biasa sekaligus ke papan klip. Di tempat yang menerima tempelan berformat, seperti jendela penulisan email atau editor dokumen, tampilan judul, daftar, dan tabel ikut masuk.

Cara memakai

1. Masukkan Markdown: tulis atau tempel di editor sebelah kiri. Berkas .md, .markdown, dan .txt bisa dipilih lewat "Buka berkas" atau diseret ke editor. Berkas lama yang bukan UTF-8 dibaca ulang sebagai EUC-KR.
2. Gunakan tombol sintaks: tombol di atas editor membungkus teks yang dipilih dengan tanda tebal, miring, atau tautan, atau menambahkan tanda judul, daftar, dan kutipan di awal baris yang dipilih. Ctrl+B, Ctrl+I, dan Ctrl+K (Mac: ⌘) bekerja sama. Simbol diberi warna berbeda sehingga mudah dibedakan mana judul dan mana penekanan.
3. Periksa lewat tampilan web: "Tampilan web" di sebelah kanan menampilkan hasil seperti halaman web sungguhan. Saat editor digulir, tampilan ikut ke posisi yang sama, dan saat kursor berada di editor, blok itu ditandai dengan bilah di sisi kiri. Pindah ke "Kode HTML" untuk melihat tag dengan warna berbeda.
4. Pilih aturan konversi: pilih cara menangani baris baru, HTML yang dicampur ke dalam Markdown, bentuk HTML, perbaikan penekanan, dan ID judul. Hasil langsung dibuat ulang begitu pilihan diubah.
5. Periksa lalu salin: lihat kartu pemeriksaan di bawah, lalu klik salah satu dari "Salin HTML", "Salin dengan format", atau "Simpan sebagai .html". Jika "Simpan di peramban ini" aktif, tulisan dan aturan yang sedang dipakai tetap tersimpan hanya di peramban ini dan bisa dilanjutkan saat dibuka lagi.

Simbol Markdown dan tag HTML hasilnya

Kolom HTML pada tabel di bawah adalah hasil nyata dari alat ini. Tabel, daftar tugas, teks dicoret, dan tautan otomatis adalah sintaks tambahan GFM di atas CommonMark.

Mengapa penekanan di samping tanda kutip dan kurung tetap berupa simbol, dan fungsi "Perbaiki penekanan"

Spesifikasi Markdown menentukan apakah tanda bintang bisa membuka atau menutup penekanan berdasarkan karakter di sebelahnya. Menurut definisi CommonMark 0.31.2, penanda pembuka (batas kiri) yang disusul tanda baca harus didahului spasi atau tanda baca, dan penanda penutup (batas kanan) yang didahului tanda baca harus disusul spasi atau tanda baca. Karena itu, pada teks seperti **"penting"**nya, ketika penekanan dipasang di dalam tanda kutip atau kurung lalu langsung diikuti huruf, ** penutup gagal menutup penekanan dan bintangnya tetap tampil sebagai teks. Pada contoh 380 spesifikasi (a**"foo"**), masalahnya ada di sisi pembuka: ** pertama terletak tepat setelah huruf dan sebelum tanda kutip, sehingga tidak bisa membuka penekanan. Hal ini bisa terjadi pada akhiran seperti -nya dan -lah dalam bahasa Indonesia, tetapi paling sering muncul pada teks Jepang dan Korea karena partikel langsung melekat pada kata sebelumnya.

Jika "Perbaiki penekanan" aktif (keadaan awal), alat ini memilih hanya bagian seperti itu dan membacanya sebagai penekanan. Perubahan dilakukan hanya bila ujung dalamnya tanda baca dan sisi luarnya huruf Jepang, Korea, atau Tionghoa (kana, hangeul, atau kanji). Jika di luarnya huruf Latin atau angka, aturan standar dipertahankan, sehingga **"penting"**nya atau 2*(3+4)*5 tidak diubah; untuk teks bahasa Indonesia, pasang penekanan di luar tanda baca. Penekanan yang berisi kode, tautan, atau tag HTML juga tidak diubah. Kalimat yang sudah menjadi penekanan menurut aturan standar tidak disentuh. Bagian yang diperbaiki diberitahukan lewat kartu "Penekanan diperbaiki" di daftar pemeriksaan.

Perbaikan ini hanya berlaku pada HTML yang dihasilkan alat ini. Jika teks Markdown aslinya diunggah apa adanya ke tempat yang memakai aturan standar seperti GitHub, bagian tersebut tetap tampil sebagai simbol. Cara termudah agar teks asli berlaku di mana saja adalah memasang penekanan di luar tanda baca ("**penting**"nya). Jika tanda kutipnya juga harus tebal, tulis dengan tag HTML seperti <strong>"penting"</strong>nya. Garis bawah (__) memang diatur agar tidak menjadi penekanan di tengah kata, sehingga melindungi nama seperti snake_case. Karena itu, untuk kalimat biasa, tanda bintang lebih aman.

Mengapa baris baru menyatu menjadi satu baris

Di Markdown, yang memisahkan paragraf adalah baris kosong. Spesifikasi GFM menyebut baris yang dipindah sekali tanpa baris kosong sebagai "baris baru lunak" (soft line break), yang di HTML boleh ditampilkan sebagai pindah baris atau spasi. Peramban menampilkannya sebagai satu spasi, sehingga dua baris tampak menyatu pada hasilnya. Menurut dokumentasi GitHub, GitHub otomatis mempertahankan pindah baris di isu dan komentar, tetapi pada berkas .md tulisan yang sama ditampilkan dalam satu baris.

Untuk tulisan yang dibaca per baris seperti puisi, alamat, atau lirik lagu, pilih "<br> di tiap baris". Jika dokumen secara keseluruhan ingin tetap standar dan hanya beberapa baris yang dipisah, kami menyarankan garis miring terbalik di akhir baris itu. Dua spasi di akhir baris tidak terlihat dan kadang dihapus editor saat menyimpan. Baris yang menyatu pada keadaan standar diberitahukan lewat kartu "Baris baru menyatu" beserta nomor barisnya.

HTML di dalam Markdown dan keamanannya

Tag HTML boleh dicampur ke dalam tulisan Markdown, dan secara bawaan konverter meneruskan tag itu ke hasil. Dokumentasi marked sendiri menyatakan bahwa marked tidak menyaring (sanitize) HTML keluarannya dan menyarankan penyaring terpisah. Saat mengonversi tulisan orang lain atau tulisan buatan AI, skrip atau aksi klik bisa ikut terselip, jadi aturan "HTML asli" dibagi menjadi tiga.

• Aman (keadaan awal): tag dan atribut yang tidak ada dalam daftar izin dihapus. script, style, iframe, object, embed, form, kolom isian, dan svg dihapus beserta isinya. Atribut peristiwa on seperti onclick, alamat javascript: dan vbscript:, serta alamat data: yang bukan gambar juga dihapus. Yang dihapus ditampilkan per jenis beserta jumlahnya di kartu "HTML yang dihapus".
• Apa adanya: HTML yang ditulis tidak diubah. Pilih ini bila tabel buatan sendiri atau kode sematan video harus dipertahankan. Jika skrip atau atribut on masih ada, kartu "HTML berbahaya masih ada" memberi peringatan.
• Sebagai teks: tag tidak dijalankan dan ditampilkan sebagai teks. Gunakan ini bila tujuannya memperlihatkan tag itu sendiri, misalnya pada tulisan yang menjelaskan cara memakai HTML. Ekstensi "HTML yang tidak diizinkan" pada spesifikasi GFM juga bekerja dengan mengganti < pada sembilan tag, yaitu title, textarea, style, xmp, iframe, noembed, noframes, script, dan plaintext, menjadi teks.

Pratinjau tampilan web tidak menjalankan skrip pada aturan mana pun. Pratinjau digambar di dalam iframe sandbox yang tidak diberi allow-scripts, dan menurut dokumentasi MDN, skrip di dalamnya tidak diizinkan berjalan dalam kondisi ini. Meski begitu, "Aman" tidak menggantikan penyaring keamanan di situs tujuan. Tag yang diterima berbeda di setiap situs, jadi setelah menempel, periksa sekali lagi lewat pratinjau situs itu.

Cara memilih bentuk HTML

ID judul dan tautan di dalam dokumen

Tautan yang diawali #, seperti [Instalasi](#instalasi), adalah tautan daftar isi yang berpindah ke judul di dokumen yang sama. Agar tautan ini berfungsi, judul harus punya id dengan nama yang sama, sedangkan marked tidak memasang id pada judul. Jika "ID judul" diaktifkan, id dipasang sesuai aturan yang dijelaskan dokumentasi GitHub: huruf Latin diubah menjadi huruf kecil, spasi menjadi tanda hubung (-), spasi lain dan tanda baca dihapus, dan judul yang sama yang muncul lagi diberi -1, -2. Jika dokumen punya tautan # tetapi ID judul mati, daftar pemeriksaan memberitahukannya, dan tombol di kartu bisa langsung mengaktifkannya.

Yang diberitahukan daftar pemeriksaan

• Penekanan tetap berupa simbol / Penekanan diperbaiki: bagian yang bintangnya tetap tampil menurut aturan standar karena penekanan menempel pada tanda baca. Jika perbaikan aktif, muncul sebagai "diperbaiki"; jika mati, sebagai "tetap berupa simbol".
• Baris baru menyatu: baris yang dipindah tanpa baris kosong lalu disambung dengan spasi.
• Blok kode belum ditutup: blok yang dibuka dengan ``` tetapi tidak ditutup, sehingga semua teks di bawahnya menjadi kode.
• Sel tabel berlebih: baris dengan sel lebih banyak daripada baris judul. GFM membuang sel yang berlebih, sehingga isinya hilang.
• Alamat relatif: gambar atau tautan yang ditulis tanpa alamat situs, seperti /images/a.png atau docs/a.md. Di pratinjau, alamat itu dibuka dengan halaman ini sebagai acuan, tetapi bisa rusak jika ditempel di situs lain.
• Gambar tanpa deskripsi: gambar dengan teks alternatif kosong, seperti ![](alamat).
• Tingkat judul terlewati: judul yang melompati tingkat, misalnya #### langsung setelah ##. Bagi orang yang menelusuri daftar isi dengan pembaca layar, strukturnya tampak janggal.
• Tautan yang butuh ID judul / Tautan # tanpa tujuan: tautan di dalam dokumen yang tidak punya judul tujuan, atau tidak berpindah karena ID judul mati.
• HTML yang dihapus / HTML berbahaya masih ada / HTML dijadikan teks: tag yang dihapus, dibiarkan, atau dijadikan teks sesuai aturan "HTML asli".

Kesalahan yang sering terjadi

• Daftar bernomor tepat di bawah paragraf: jika 2. butir ditulis tepat di bawah paragraf tanpa baris kosong, hasilnya bukan daftar dan menyambung ke paragraf. Satu-satunya nomor yang boleh memotong paragraf untuk memulai daftar adalah 1. Daftar berpoin (- butir) menjadi daftar bahkan tepat di bawah paragraf.
• Baris yang menjorok 4 spasi: baris yang diawali 4 spasi atau satu tab menjadi blok kode. Spasi yang dimaksudkan untuk menjorokkan paragraf tidak muncul di hasil, jadi hapus saja.
• --- tepat di bawah teks: jika --- ditulis tepat di bawah teks untuk membuat garis pemisah, teks di atasnya menjadi judul tingkat 2. Beri baris kosong sebelum garis pemisah.
• Informasi awal berkas (front matter): baris title: … yang diapit --- di awal berkas .md untuk situs statis bukan sintaks Markdown, sehingga berubah menjadi garis pemisah dan judul. Hapus sebelum dikonversi.
• Alamat tautan yang mengandung spasi: [berkas](dokumen saya.pdf) tidak menjadi tautan. Bungkus seperti [berkas](<dokumen saya.pdf>), atau tulis spasi sebagai %20.
• Baris kosong di akhir tabel: tabel bisa dimulai tepat di bawah paragraf, tetapi di tempat tabel berakhir harus ada baris kosong agar teks berikutnya tidak masuk ke dalam tabel.
• Mengubah gaya lagi di situs setelah menyalin: style yang disisipkan lewat "Dengan gaya" mengalahkan desain situs tempat menempel. Agar mengikuti desain situs, pilih "Isi saja".

Keterbatasan

• Catatan kaki ([^1]), rumus, dan sintaks diagram bukan sintaks bawaan marked, jadi tetap tampil sebagai teks.
• Blok kode tidak diberi warna. Nama bahasa disimpan sebagai kelas language-…, sehingga fitur penyorot kode di situs tujuan yang menentukan warnanya.
• Perbaikan penekanan hanya berlaku untuk **, *, dan ~~ di samping kana, hangeul, atau kanji. Garis bawah dan tiga bintang (***) tetap mengikuti aturan standar.
• "Aman" mengacu pada daftar izin alat ini. Tag yang disaring tersendiri oleh situs tujuan berbeda di setiap situs.
• Gambar di pratinjau dimuat langsung dari alamat yang tertulis. Tampilan hasil "Salin dengan format" bergantung pada editor tempat menempel.
• Tulisan di atas 2 MB tidak dikonversi, dan jika melebihi 30.000 karakter, pewarnaan sintaks di editor dimatikan.

Sumber

Acuan: sintaks mengikuti spesifikasi CommonMark 0.31.2 dan GFM 0.29-gfm, perilaku mengikuti keluaran marked 18.0.9, fitur peramban mengikuti dokumentasi MDN, dan dukungan email mengikuti caniemail.com, semuanya diperiksa pada 22 Oktober 2026. HTML pada tabel di atas adalah keluaran nyata alat ini.

• 01CommonMark Spec 0.31.2Definisi batas kiri dan kanan (flanking), contoh 380, syarat daftar memotong paragraf, blok kode berindentasi
• 02GitHub Flavored Markdown Spec 0.29-gfmTabel, daftar tugas, teks dicoret, tautan otomatis, 9 tag HTML yang tidak diizinkan, baris baru lunak dan keras
• 03GitHub Docs: Basic writing and formatting syntaxPerbedaan baris baru di isu dan komentar dengan berkas .md, aturan membuat tautan judul (id)
• 04Dokumentasi markedPeringatan bahwa HTML keluaran tidak disaring, pengaturan gfm (bawaan aktif) dan breaks (bawaan mati)
• 05MDN: atribut sandbox pada iframeTanpa allow-scripts, skrip tidak dijalankan
• 06MDN: ClipboardItemCara memasukkan text/html dan text/plain sekaligus ke papan klip
• 07Can I email: <style> elementGmail web tidak mendukung style di dalam body, batas 16 KB
• 08RFC 7763: The text/markdown Media TypeNama tipe berkas .md, text/markdown (Maret 2016)
• 09John Gruber: MarkdownMarkdown asli yang dirilis tahun 2004 dan tujuan desainnya, yaitu tulisan yang mudah dibaca

Pertanyaan yang sering diajukan

Alat yang sering dipakai bersama