Konverter Markdown ke HTML

Konverter Markdown-ke-HTML mengambil alur kerja penulisan paling umum di web modern — menulis dalam Markdown, menerbitkan sebagai HTML — dan membuatnya menjadi instan. Tempel Markdown apa pun ke panel kiri dan panel kanan menampilkan HTML yang dirender secara real time. Tanpa perjalanan bolak-balik server, tanpa pendaftaran, tanpa unggah file: marked.js berjalan sepenuhnya di browser Anda, menguraikan Markdown menjadi HTML bersih dalam hitungan milidetik. Gunakan untuk konversi README satu kali, pratinjau draf blog, migrasi CMS antar platform dengan dialek Markdown yang berbeda, atau verifikasi cepat bahwa sintaksis Anda benar sebelum melakukan commit ke generator situs statis. Mendukung spesifikasi penuh CommonMark ditambah ekstensi GitHub Flavored Markdown (tabel, daftar tugas, coret, tautan otomatis) — yang berarti apa yang berfungsi di GitHub akan berfungsi di sini tanpa kejutan.

Langkah 1: Tempel teks Markdown Anda ke panel input kiri. Konverter menerima panjang berapa pun dari satu baris hingga ribuan baris konten. Sintaks CommonMark standar berfungsi: `#` untuk tajuk, `*teks*` untuk miring, `teks` untuk tebal, `` `kode` `` untuk kode sebaris, `[link](url)` untuk tautan, `-` atau `*` untuk item daftar tak berurutan, `1.` untuk daftar terurut, `>`, untuk blok kutipan, backtick tiga kali lipat untuk blok kode terpagar. Langkah 2: Perhatikan panel kanan merender HTML secara real time saat Anda mengetik atau menempel. Tabel dirender dengan batas yang tepat, tajuk mendapatkan atribut `id` yang dibuat otomatis (untuk tautan jangkar), blok kode mempertahankan tag bahasa, dan HTML sebaris lolos. Langkah 3: Klik Salin HTML untuk mengambil sumber HTML mentah guna ditempelkan ke file `.html`, editor teks kaya CMS, atau templat situs statis. Klik Salin Render untuk menyalin tampilan yang diformat jika target Anda mendukung teks kaya (Word, Google Docs, pembuat email).

Konverter ini mengaktifkan keduanya secara default. CommonMark (2014) adalah spesifikasi Markdown yang distandarisasi dan tidak ambigu yang menentukan perilaku parser yang tepat — diadopsi oleh GitHub, Reddit, Stack Overflow, Discourse, and sebagian besar alat modern. GitHub Flavored Markdown (GFM) memperluas CommonMark dengan lima tambahan: tabel (baris yang dipisahkan pipa dengan perataan), daftar tugas (`- [ ]` dan `- [x]` untuk kotak centang), coret (`~~teks~~`), tautan otomatis (URL mentah menjadi dapat diklik tanpa sintaks `[](url)` eksplisit), dan HTML mentah terbatas (beberapa tag difilter untuk keamanan). Karena README GitHub adalah sumber Markdown paling umum di web, kompatibilitas GFM sangat penting — konverter ini merender persis apa yang dirender GitHub untuk input yang sama. Jika Anda memerlukan output CommonMark murni (tanpa ekstensi GFM), Anda dapat menonaktifkan GFM di menu opsi, tetapi default berfungsi untuk 95% kasus penggunaan.

Tabel GFM menggunakan karakter pipa (`|`) untuk menentukan kolom dan tanda hubung (`-`) di baris pemisah tajuk. Sintaks dasar: `| Nama | Usia |\n|------|-----|\n| Alice | 30 |`. Perataan kolom dienkode dalam baris pemisah: `-:` untuk kanan, `:-:` untuk tengah, `:-` atau `-` untuk kiri (default). Contoh dengan perataan: `| Alat | Kecepatan | Gratis |\n|:-----|------:|:----:|` menghasilkan tabel 3 kolom dengan Alat rata kiri, Kecepatan rata kanan, Gratis rata tengah. Perender menghasilkan elemen `<table>`, ``, ``, `<tr>`, `<th>`, `<td>` yang tepat dengan atribut inline `style="text-align:..."` untuk perataan. Pipa di awal dan akhir setiap baris bersifat opsional tetapi biasanya ditambahkan untuk keterbacaan. Lebar kolom dalam sumber tidak perlu selaras — parser tidak peduli dengan jarak visual.

Blok kode terpagar menggunakan backtick tiga kali lipat (atau tilde) untuk membuka dan menutup: ```\nkode di sini\n```. Tambahkan petunjuk bahasa setelah pagar pembuka untuk mengaktifkan penyorotan sintaks saat HTML diterbitkan: ```javascript atau ```python atau ```bash. Konverter menghasilkan `<pre><code class="language-X">` di mana X adalah nama bahasa. Konverter ini tidak menerapkan warna sintaks sendiri — pewarnaan dilakukan oleh pustaka terpisah seperti highlight.js, Prism.js, atau Shiki saat HTML dirender di halaman Anda. Mengapa dipisah? Pustaka penyorotan sintaks masing-masing berukuran 50KB-200KB dan menambah bobot halaman yang signifikan; konverter tetap ringan dengan hanya mengeluarkan tag bahasa dan membiarkan alur kerja penerbitan Anda menambahkan warna. Tag bahasa umum: javascript, typescript, python, java, csharp, go, rust, ruby, php, html, css, json, yaml, xml, bash, sql, markdown.

Antarmuka panel terbagi — sumber Markdown di sebelah kiri, pratinjau HTML di sebelah kanan — adalah alur kerja penulisan standar untuk penulis teknis dan pengembang. Ini memungkinkan Anda menulis dalam format Markdown yang ringan dan mudah dibaca sambil langsung melihat hasil yang tampak dipublikasikan. Dibandingkan dengan editor WYSIWYG (Word, Google Docs): Markdown lebih cepat ditulis (tidak perlu meraih tetikus untuk tombol pemformatan), dapat dikendalikan versinya (diff teks biasa bersih di Git), portabel (editor teks apa pun berfungsi), dan menghasilkan HTML bersih tanpa div bersarang yang membengkak. Dibandingkan dengan menulis HTML secara langsung: Markdown 3-5x lebih cepat untuk konten tipikal (tajuk, paragraf, daftar, tautan), terbaca secara alami dalam bentuk sumber, dan menghilangkan keputusan pemformatan dari alur penulisan. Gunakan Markdown untuk konten apa pun yang banyak teks; beralihlah ke HTML hanya ketika Anda memerlukan kontrol presentasi yang mendetail.

Konverter mengeluarkan HTML5 semantik — elemen yang mendeskripsikan arti konten, bukan hanya penampilan. Tajuk menjadi `<h1>` hingga `<h6>` dengan atribut `id` yang dibuat otomatis untuk penautan jangkar. Paragraf menjadi `<p>`. Tebal menjadi `<strong>` (bukan `<b>`), miring menjadi `<em>` (bukan `<i>`) — padanan semantik yang bekerja lebih baik dengan pembaca layar dan penargetan CSS. Daftar tak berurutan menjadi `<ul><li>`, daftar terurut `<ol><li>`. Blok kutipan menjadi `<blockquote>`. Rentang kode menjadi `<code>`, blok terpagar menjadi `<pre><code>`. Tautan menjadi `<a href>`. Gambar menjadi `<img src alt>`. Hasilnya adalah HTML yang bersih dan dapat diakses yang masuk ke CMS modern, generator situs statis, atau file HTML apa pun tanpa modifikasi. Tanpa gaya sebaris (kecuali perataan tabel), tanpa pembungkus `<div>` tambahan, tanpa atribut kelas (kecuali tag bahasa pada blok kode).

File README adalah sumber Markdown paling umum di web — setiap repositori GitHub memilikinya, sebagian besar registri paket (npm, PyPI, RubyGems) merendernya secara otomatis. Untuk mengonversi README.md untuk situs dokumentasi, tempel isi file ke dalam konverter dan salin output HTML. Penyesuaian umum setelah konversi: (1) Tautan relatif — file README sering menggunakan jalur relatif (`./docs/install.md`); tulis ulang ke URL absolut untuk situs yang diterbitkan. (2) Jalur gambar — masalah yang sama, gambar README menggunakan `./images/logo.png`; perbarui ke URL gambar yang diterbitkan. (3) ID Jangkar — ID tajuk yang dibuat otomatis menggunakan format huruf kecil-tanda hubung (`Installation` menjadi `id="installation"`); perbarui tautan jangkar internal sesuai dengan itu. (4) Sintaks khusus repositori — GitHub secara otomatis menautkan referensi masalah seperti `#123` dan sebutan pengguna seperti `@username`; ini tidak menautkan otomatis di luar GitHub, tulis ulang sebagai tautan eksplisit jika perlu.

Generator situs statis (SSG) memproses file Markdown menjadi halaman HTML pada waktu pembangunan (build time), jadi konversi manual biasanya tidak diperlukan — Anda melakukan commit file `.md` ke repositori Anda dan SSG menangani sisanya. SSG umum dan penanganan Markdown mereka: Jekyll (Ruby) menggunakan kramdown secara default, kompatibel dengan CommonMark dengan beberapa GFM. Hugo (Go) menggunakan Goldmark, penuh CommonMark + GFM + ekstensi. Next.js MDX (JavaScript) menggunakan remark/rehype, memungkinkan Anda menyematkan komponen React di Markdown. Eleventy (JavaScript) menggunakan markdown-it secara default. Astro (JavaScript) menggunakan remark dan mendukung MDX. Gatsby (JavaScript) menggunakan gatsby-plugin-mdx dengan remark. Konverter ini paling berguna untuk: (a) konversi sekali jalan di luar alur kerja SSG, (b) memverifikasi bahwa Markdown Anda merender dengan benar sebelum melakukan commit, (c) memigrasikan konten antar SSG yang menggunakan dialek Markdown yang berbeda.

Enam kendala umum. (1) Jeda baris lunak di dalam paragraf — baris baru tunggal diciutkan menjadi spasi per CommonMark, bukan `<br>`. Gunakan dua spasi di akhir atau baris kosong untuk jeda eksplisit. (2) Blok kode menjorok (indentasi 4 spasi) vs terpagar (backtick tiga kali lipat) — keduanya berfungsi, tetapi terpagar disarankan karena mempertahankan tag bahasa. (3) Daftar bersarang dengan indentasi yang salah — CommonMark memerlukan 2 atau 4 spasi, mencampur tab dan spasi merusak rendering pada beberapa parser. (4) HTML sebaris dihapus oleh perender yang lebih ketat — GitHub dan Reddit menyaring banyak tag demi keamanan; apa yang berfungsi di konverter ini mungkin tidak berfungsi di mana-mana. (5) Tajuk tanpa baris kosong sebelum/sesudah — sebagian besar parser mentolerir, tetapi CommonMark menyarankan baris kosong agar jelas. (6) Coret dengan tilde tunggal — tilde tunggal tidak berfungsi, memerlukan `~~tilde ganda~~`. Saat melakukan debug, periksa dialek apa yang digunakan platform target (CommonMark? GFM? sesuatu yang khusus?) sebelum berasumsi konverter itu salah.

Pengonversi ini berjalan 100% di browser Anda — teks Markdown Anda tidak pernah meninggalkan halaman. Pengonversi Markdown sisi server biasanya mencatat setiap konversi untuk analitik dan dapat menyimpan input untuk caching atau pemantauan kesalahan. Untuk sebagian besar konversi kasual ini bukan masalah, tetapi pengembang dan penulis teknis secara rutin menempelkan konten yang tidak boleh bocor: kunci API dalam sampel kode, dokumentasi internal, spesifikasi teknis milik perusahaan, draf pos blog di bawah NDA, data pelanggan dalam dokumentasi dukungan. Konversi sisi klien menghilangkan risiko kebocoran sepenuhnya. Untuk memverifikasi: buka tab Jaringan DevTools browser, tempel Markdown, klik konversi — Anda akan melihat nol permintaan keluar selama konversi. Pustaka marked.js dimuat sekali saat halaman dibuka (terlihat pada pemuatan halaman awal); setelah itu, semua konversi bersifat lokal. Untuk input Markdown yang tidak tepercaya dari sumber pihak ketiga, bersihkan HTML yang dirender dengan DOMPurify sebelum memasukkannya ke halaman untuk mencegah serangan XSS.

Referensi sintaks cepat. Judul: `# H1` hingga `###### H6`. Tebal: `teks`. Miring: `*teks*` atau `_teks_`. Tebal+miring: `*teks*`. Coret (GFM): `~~teks~~`. Kode baris: `` `kode` ``. Tautan: `[teks](https://url.com)`. Gambar: ``. Tautan otomatis (GFM): `https://example.com` (URL mentah, tanpa kurung siku). Daftar tidak berurutan: `- item` atau `* item` atau `+ item`. Daftar berurutan: `1. item`. Daftar bersarang: indentasi dengan 2 spasi. Kutipan blok: `> teks dikutip`. Kutipan multi-baris: awali setiap baris dengan `>`. Blok kode berpagar: tiga tanda hubung terbalik (buka dan tutup) dengan tag bahasa opsional. Blok kode berindentasi: 4 spasi atau 1 tab di awal baris. Garis horizontal: `---` atau `***` pada barisnya sendiri. Tabel (GFM): `| kol1 | kol2 |\n|------|------|\n| nil1 | nil2 |`. Daftar tugas (GFM): `- [ ] tugas` dan `- [x] selesai`. Penerusan HTML: tag HTML apa pun berfungsi secara inline. Pemenggalan baris keras: dua spasi di akhir. Karakter lolos khusus: garis miring terbalik di depan, mis. `\*bukan miring\*`. Gunakan pengonversi untuk kasus apa pun yang membingungkan Anda — pratinjau langsung menunjukkan dengan tepat bagaimana setiap pola dirender.