Konverter Markdown ke HTML
Konversi Markdown ke HTML di browser Anda — GitHub Flavored Markdown penuh, pratinjau langsung, syntax highlighting. Ekspor fragmen HTML, dokumen lengkap, atau HTML inline-styled aman-email. 100% privat, tanpa upload.
Custom CSS
Apa Itu Konversi Markdown ke HTML?
Konversi Markdown ke HTML mengubah dokumen teks biasa yang ditulis dalam Markdown — dengan `#` untuk heading, `**bold**`, `- ` untuk daftar, dan `[text](url)` untuk tautan — menjadi HTML yang benar-benar ditampilkan oleh browser, sistem manajemen konten, dan klien email. Markdown dirancang agar terbaca apa adanya dan mudah ditulis, tetapi browser tidak memahami `# Heading`; ia memahami <h1>Heading</h1>. Konversi menjembatani celah itu.
Di balik layar, prosesor Markdown pertama mengurai sumber Anda menjadi abstract syntax tree (AST) — representasi terstruktur tempat heading, paragraf, daftar, dan blok kode menjadi node berbeda dengan konten dan atributnya. Lalu ia menserialisasi pohon itu menjadi HTML, memancarkan tag dan nesting yang benar. Bekerja lewat AST, alih-alih menukar teks dengan regular expression, itulah yang membuat konverter menangani daftar bertingkat, tabel, dan HTML tersemat dengan benar dan terprediksi. Dua tata bahasa yang dikenal adalah CommonMark, standar yang presisi, dan GitHub Flavored Markdown (GFM), yang memperluasnya dengan tabel, daftar tugas, strikethrough, dan autolink.
Alasan Anda mengonversi sama sekali adalah karena hampir setiap tujuan publikasi menginginkan HTML, bukan Markdown. Generator static-site, field rich-text CMS, template email, dan tab browser semuanya merender HTML. Jadi alur kerja umumnya adalah menulis dalam Markdown yang nyaman — README, dokumentasi, draf blog, catatan — dan mengonversi ke HTML pada titik publikasi. Alat ini melakukan konversi itu secara lokal dan menampilkan pratinjau langsung, sehingga Anda melihat hasil yang dirender dan dapat menyalin HTML yang persis dalam bentuk yang Anda butuhkan: fragmen, halaman penuh, atau markup inline-styled yang siap email.
Operasi sebaliknya — HTML kembali ke Markdown — sama bergunanya ketika Anda memigrasikan konten web yang sudah ada ke sistem berbasis Markdown. Untuk itu, beralihlah ke tab HTML → Markdown atau buka konverter HTML ke Markdown khusus.
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> Fitur Utama
Pratinjau Split-Pane Langsung
Ketik Markdown di kiri dan saksikan ia dirender di kanan secara real time, dengan output HTML terbangun di bawahnya saat Anda berjalan. Pratinjau dirender dalam iframe bersandbox, sehingga apa yang Anda lihat adalah apa yang ditampilkan browser — dan skrip yang ditempel tidak bisa berjalan.
GitHub Flavored Markdown Penuh
Bukan sekadar CommonMark — superset GFM lengkap: tabel pipa, daftar tugas (`- [x]`), strikethrough (`~~`), URL yang di-autolink, dan blok kode berpagar. README atau isu yang ditulis untuk GitHub dirender di sini persis seperti di sana.
Syntax Highlighting
Beri label blok kode berpagar dengan bahasanya (```js, ```python, ```sql) dan konverter menyorotnya, membungkus token dalam span dengan kelas bahasa pada elemen <code>. Pasangkan dengan stylesheet highlight di halaman Anda untuk warna.
Tiga Format Output
Ekspor fragmen HTML (markup body untuk template atau CMS), Dokumen lengkap (halaman mandiri yang dapat disimpan sebagai .html), atau HTML Email inline dengan style dipindahkan ke setiap elemen agar Outlook dan klien lain merendernya dengan benar.
Panel Custom CSS
Suntikkan CSS Anda sendiri ke pratinjau langsung untuk menyesuaikan tipografi situs atau meniru gaya README GitHub. Ketik aturan seperti h1 { color: #0969da; } dan pratinjau diperbarui seketika, tanpa menyentuh HTML bersih yang Anda salin keluar.
Lembar Contekan Sintaks GFM
Referensi cepat untuk sintaks yang menghasilkan HTML: `# H1` → heading, `**bold**` → <strong>, `*italic*` → <em>, `- item` → daftar, `1. item` → daftar terurut, `[text](url)` → tautan, `` `code` `` → kode inline, ` ```lang ` → kode berpagar, `> quote` → blockquote, `| a | b |` → tabel, `- [ ]` → daftar tugas, `~~text~~` → strikethrough.
100% Privat, di Browser
Setiap konversi berjalan secara lokal dengan JavaScript — Markdown dan HTML Anda tidak pernah meninggalkan perangkat Anda, tidak pernah menyentuh server, dan bekerja offline setelah halaman dimuat. Aman untuk dokumen yang belum dipublikasikan, README internal, dan catatan rilis yang diembargo.
Contoh
Tabel GFM menjadi <table> HTML
| Tool | Speed | | ---- | ----- | | GFM | Fast |
<table> <thead><tr><th>Tool</th><th>Speed</th></tr></thead> <tbody><tr><td>GFM</td><td>Fast</td></tr></tbody> </table>
Tabel pipa GitHub Flavored Markdown bukan bagian dari CommonMark biasa, tetapi konverter ini memahaminya dan menghasilkan <table> semantik yang tepat dengan <thead> dan <tbody> — siap untuk distyling atau dijatuhkan ke CMS.
Daftar tugas menjadi HTML checkbox
- [x] Write the README - [ ] Convert it to HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Write the README</li> <li class="task-list-item"><input type="checkbox" disabled> Convert it to HTML</li> </ul>
Sintaks daftar tugas GFM `- [x]` / `- [ ]` menjadi input checkbox sungguhan yang dinonaktifkan, persis seperti cara GitHub merender daftar centang — sehingga README yang disalin tampil sama di halaman Anda sendiri.
Blok kode berpagar menjadi <pre><code> yang disorot
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
Tambahkan bahasa setelah pagar pembuka dan konverter menerapkan syntax highlighting, membungkus token dalam span dengan kelas language-js pada elemen <code>. Pasangkan dengan stylesheet highlight dan kode pun berwarna.
README menjadi dokumen HTML lengkap
# My Project A short description and a [link](https://example.com).
<!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>My Project</title></head> <body> <h1>My Project</h1> <p>A short description and a <a href="https://example.com">link</a>.</p> </body> </html>
Alihkan output ke Dokumen lengkap dan konverter membungkus HTML yang dirender dalam halaman yang utuh dengan <head> dan charset — sebuah file .html mandiri yang dapat Anda buka di browser mana pun atau unduh langsung.
Cara Mengonversi Markdown ke HTML
- 1
Ketik atau tempel Markdown Anda
Jatuhkan Markdown Anda — README, catatan rilis, isi isu — ke panel input. GitHub Flavored Markdown penuh didukung: tabel, daftar tugas, strikethrough, autolink, dan blok kode berpagar. Pratinjau langsung dan output HTML diperbarui saat Anda mengetik, semuanya di browser Anda.
- 2
Pilih format output
Pilih Fragmen HTML untuk ditempel ke template atau CMS, Dokumen lengkap untuk halaman .html mandiri, atau Email inline untuk HTML inline-styled yang bertahan di Outlook. Tambahkan tag bahasa ke pagar kode untuk syntax highlighting, dan gunakan panel Custom CSS untuk menata pratinjau.
- 3
Salin atau unduh
Klik Salin untuk mengambil HTML, atau Unduh untuk menyimpannya sebagai file. Untuk membalik konversi, beralihlah ke tab HTML → Markdown dan tempel HTML Anda untuk mendapatkan Markdown bersih kembali.
Kesalahan Umum
HTML Tidak Di-escape Ditelan dalam Prosa
Markdown meneruskan HTML mentah, sehingga tanda kurung sudut yang Anda maksud sebagai teks — seperti menulis tentang <Component> atau List<T> generik — diurai sebagai tag HTML dan menghilang dari output. Escape kurung dengan backslash atau entitas HTML, atau bungkus teks dalam code span agar dirender literal.
Use the <Header> component to wrap pages. <!-- <Header> is parsed as a tag and vanishes -->
Use the `<Header>` component to wrap pages. <!-- backticks keep it literal: renders <Header> -->
Pipa Tabel Tidak Sejajar atau Cacat
Tabel GFM butuh baris header, baris pembatas berisi tanda hubung, dan setidaknya satu pipa per baris. Melupakan baris pembatas, atau memiliki jumlah kolom berbeda dari header, merusak tabel — ia jatuh kembali menjadi paragraf pipa biasa. Sel tidak perlu sejajar secara visual, tetapi setiap baris harus punya jumlah kolom yang sama.
| Name | Role | | Alice | Admin | <!-- no |---|---| delimiter row: not a table -->
| Name | Role | | ---- | ---- | | Alice | Admin | <!-- delimiter row present: renders a table -->
Pagar Kode tanpa Bahasa
Blok kode berpagar tanpa info string bahasa dirender sebagai blok <pre><code> tanpa kelas bahasa, sehingga tidak mendapat syntax highlighting. Kode tetap muncul, hanya monokrom. Tambahkan bahasa tepat setelah backtick pembuka untuk mengaktifkan highlighting; spasi antara backtick dan nama menonaktifkannya.
``` const x = 1 ``` <!-- no language → no highlighting -->
```js const x = 1 ``` <!-- language-js → highlighted -->
Menggunakan Fragmen di Tempat yang Membutuhkan Dokumen Lengkap
Menyalin output fragmen HTML dan menyimpannya langsung sebagai file .html menghasilkan halaman tanpa doctype, tanpa charset, dan tanpa <html>/<head>/<body>. Browser sering tetap merendernya, tetapi quirks mode dan charset yang hilang dapat merusak karakter beraksen dan tata letak. Ketika HTML harus berdiri sendiri, beralihlah ke format Dokumen lengkap.
<h1>Title</h1> <p>Saved as page.html — no doctype, no charset.</p>
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>Title</title></head> <body><h1>Title</h1><p>Complete, standalone page.</p></body></html>
Kasus Penggunaan Umum
- Publikasikan ke static site atau CMS
- Tulis konten Anda dalam Markdown, konversi menjadi fragmen HTML, dan tempel ke template static-site atau field rich-text CMS. Anda mendapat markup semantik yang bersih — heading, daftar, tabel — tanpa pembungkus halaman menghalangi.
- Pratinjau README sebelum Anda push
- Tempel README.md Anda dan saksikan pratinjau langsung merendernya dengan GFM penuh — tabel, daftar tugas, kode berpagar — sehingga Anda menangkap tabel yang rusak atau pagar kode yang hilang sebelum commit, bukan setelah GitHub menampilkannya ke dunia.
- Ubah catatan menjadi halaman web yang dapat dibagikan
- Catatan rapat, dokumen desain, atau draf yang ditulis dalam Markdown menjadi halaman HTML lengkap dalam satu klik. Pilih Dokumen lengkap, unduh file .html, dan Anda punya sesuatu yang dapat dibuka di browser mana pun atau di-host di mana saja.
- Bangun HTML inline-styled yang aman untuk email
- Klien email menghapus blok <style>, jadi tulis pesan Anda dalam Markdown dan ekspor format Email inline, yang memindahkan CSS ke setiap elemen sebagai atribut style. Hasilnya dirender dengan benar di Outlook dan klien lain yang mengabaikan style level-dokumen.
- Konversi file .md menjadi .html yang dapat diunduh
- Butuh versi HTML offline dan mandiri dari dokumen Markdown? Tempel, pilih Dokumen lengkap, dan Unduh — Anda mendapat file .html mandiri dengan doctype dan charset yang tepat, tanpa build tool atau command line.
- Sematkan dokumen yang dirender di aplikasi
- Menghasilkan dokumentasi, changelog, atau konten bantuan dari Markdown yang tersimpan di repo Anda? Gunakan alat ini untuk melihat persis HTML apa yang dihasilkan sumber Markdown tertentu, sehingga Anda dapat menyesuaikan renderer aplikasi dan menata outputnya agar pas.
Detail Teknis
- CommonMark vs GitHub Flavored Markdown
- CommonMark adalah spesifikasi Markdown yang ketat dan tidak ambigu yang mendefinisikan persis bagaimana heading, emphasis, daftar, tautan, dan blok kode diurai. GitHub Flavored Markdown (GFM) adalah superset ketat: ia mempertahankan semua yang didefinisikan CommonMark dan menambah empat ekstensi — tabel pipa, item daftar tugas (`- [x]`), strikethrough (`~~text~~`), dan URL telanjang yang di-autolink. Karena GFM hanya menambah fitur, dokumen CommonMark yang valid juga valid sebagai GFM. Konverter ini mengimplementasikan superset GFM, sehingga dokumen yang ditulis untuk salah satu tata bahasa dirender dengan benar.
- Rendering Bersandbox yang Aman dari XSS
- Markdown sengaja mengizinkan HTML mentah tersemat, yang berarti dokumen Markdown dapat berisi tag <script> atau event handler seperti onerror. Pratinjau langsung membela diri dari ini dengan merender di dalam <iframe sandbox=""> dengan scripting dinonaktifkan, sehingga konten aktif dalam input Anda tidak dapat dieksekusi selama Anda mempratinjaunya — penting saat Anda mengonversi Markdown dari sumber tidak tepercaya. HTML terserialisasi yang dikeluarkan alat ini adalah rendering setia dari input Anda; jika Anda berencana memublikasikan HTML yang berasal dari Markdown tidak tepercaya, jalankan melalui sanitizer seperti DOMPurify di server Anda sebelum menyajikannya.
- Kompatibilitas HTML Email
- Email HTML dirender oleh tambal sulam mesin dengan dukungan CSS yang terkenal terbatas. Outlook di Windows menggunakan mesin rendering Word dan mengabaikan blok <style> di head dokumen, sehingga styling berbasis kelas menghilang diam-diam; pendekatan andal adalah atribut style inline pada setiap elemen, yang dihasilkan output Email inline. Gambar adalah jebakan lain: banyak klien memblokir gambar jarak jauh hingga penerima memilih ikut, jadi menyematkan gambar kecil sebagai data URI merendernya seketika, sementara gambar jarak jauh besar mungkin tidak muncul sama sekali. Jaga markup tetap sederhana dan uji di seluruh klien target Anda.
- Highlighting di Browser yang Sinkron
- Ketika blok kode berpagar membawa info string bahasa (```js), konverter menjalankan highlighter sinkron atas isinya, men-tokenisasi sumber dan membungkus setiap token dalam <span> dengan kelas seperti hljs-keyword atau hljs-string, ditambah kelas language-js pada elemen <code>. Highlighting hanya struktural — ia menambah kelas, bukan warna — sehingga halaman tujuan butuh stylesheet highlight yang cocok untuk merender paletnya. Karena berjalan sinkron di browser, HTML yang disorot muncul seketika saat Anda mengetik, tanpa panggilan jaringan.
Praktik Terbaik
- Pilih Format Output Sesuai Tujuan
- Cocokkan format dengan ke mana HTML akan dibawa. Field atau template CMS sudah punya pembungkus halaman, jadi tempel fragmen HTML. File yang ingin Anda buka langsung di browser butuh Dokumen lengkap dengan doctype dan charset. Email butuh Email inline agar style bertahan di klien yang menghapus blok <style>. Menempel bentuk yang salah adalah kesalahan paling umum yang dapat dihindari.
- Selalu Tandai Pagar Kode dengan Bahasa
- Tulis bahasa tepat setelah backtick pembuka — ```js, ```python, ```sql — tanpa spasi, agar konverter dapat menyorot blok dan menambahkan kelas bahasa yang benar. Pagar telanjang menghasilkan kode tanpa style dan tanpa highlight. Gunakan bahasa yang dikenali highlighter; nama yang tidak dikenal atau salah eja jatuh kembali ke teks biasa.
- Sanitasi sebelum Memublikasikan Markdown Tidak Tepercaya
- Pratinjau bersandbox, tetapi HTML yang dikeluarkan alat ini adalah rendering setia — termasuk HTML mentah atau <script> apa pun dalam input. Jika Markdown itu berasal dari pengguna atau sumber tidak tepercaya lain dan Anda berniat menyajikan hasilnya ke orang lain, jalankan HTML melalui sanitizer seperti DOMPurify di server Anda terlebih dahulu. Sandbox melindungi Anda saat mengonversi, bukan pengunjung Anda setelah Anda memublikasikan.
- Jaga HTML Email Tetap Sederhana dan Inline
- Untuk email, utamakan format Email inline, jaga tata letak Anda tetap sederhana, dan hindari fitur CSS yang dibuang Outlook dan klien lain. Sematkan gambar kecil sebagai data URI agar dirender bahkan ketika gambar jarak jauh diblokir, dan selalu kirim ke diri Anda sebuah uji sebelum pengiriman yang lebih luas — rendering email adalah target HTML yang paling tidak pemaaf.
- Escape Karakter HTML Literal dalam Teks
- Jika Anda ingin < atau & literal muncul sebagai teks alih-alih ditafsirkan sebagai tag atau entitas, escape dengan backslash (\<) atau entitas HTML (<). Markdown meneruskan HTML mentah, sehingga <example> yang tidak di-escape dalam prosa dapat ditelan sebagai tag yang tidak dikenal dan lenyap dari output yang dirender.
Pertanyaan yang Sering Diajukan
Apakah alat ini mendukung GitHub Flavored Markdown (GFM)?
Bagaimana cara mendapatkan HTML inline-styled yang aman untuk email?
Apa beda fragmen HTML dengan dokumen lengkap?
Apakah HTML yang dirender aman dari XSS saat dipratinjau?
Bisakah saya menambahkan CSS sendiri ke pratinjau?
Apakah file atau teks saya diunggah ke server?
Apakah alat ini bekerja offline?
Bagaimana cara mengonversi file Markdown (.md) menjadi file HTML?
Mengapa blok kode saya tidak disorot?
Bisakah saya mengonversi HTML kembali ke Markdown?
Alat Terkait
Lihat semua alat →Decode & Encode Base64 Online — Konversi Instan di Browser
Encoding & Pemformatan
Decode dan encode Base64 online gratis. Konversi real-time dengan dukungan UTF-8 dan emoji. 100% privat di browser Anda. Tanpa pendaftaran.
Konverter Base64 ke Gambar
Encoding & Pemformatan
Decode string Base64 atau data URI kembali menjadi gambar di browser. Pratinjau, baca dimensi & MIME, lalu unduh sebagai PNG, JPG, GIF, SVG. Tanpa upload.
Konverter CSV ke JSON
Encoding & Pemformatan
Konversi CSV ke JSON di browser. RFC 4180, infer tipe, baris header, aman big-int. 100% privat, tanpa unggah.
Konverter HTML ke Markdown
Encoding & Pemformatan
Konversi HTML menjadi Markdown bersih di browser Anda — tabel GFM, daftar tugas, tautan. Pilih heading ATX/Setext serta tautan inline atau reference. Cocok untuk migrasi konten web atau memberi makan LLM. 100% privat.
Konverter Gambar ke Base64
Encoding & Pemformatan
Konversi gambar ke data URI Base64 di browser — PNG, JPG, GIF, WebP, SVG, ICO. Salin output HTML, CSS, Markdown & JSON. 100% privat, tanpa upload.
JSON Diff (Bandingkan)
Encoding & Pemformatan
Bandingkan dua file JSON langsung di browser Anda. Sorotan side-by-side, output RFC 6902 JSON Patch, abaikan field seperti timestamp dan ID. 100% privat, tanpa upload.