Konverter Markdown ke HTML — Konversi Markdown ke HTML Secara Daring _

Apa itu konversi Markdown ke HTML?

Markdown adalah format teks ringan yang menggunakan tanda baca minimal (# untuk heading, * untuk penekanan, - untuk item daftar) untuk mengkodekan prosa terstruktur. GitHub Flavored Markdown (GFM) memperluas spesifikasi CommonMark asli dengan tabel, coretan, daftar tugas, dan autolinks. HTML adalah bentuk yang dirender yang ditampilkan peramban. Mengonversi Markdown ke HTML memungkinkan Anda menulis dalam sintaks ringan dan menerbitkan ke permukaan yang dirender — sebuah README, halaman static-site, atau badan email — tanpa menulis tag secara manual.

Fitur GitHub Flavored Markdown mana yang didukung?

Parser marked@12.0.2 bawaan mendukung superset GFM penuh: heading gaya ATX dari # hingga ######, daftar terurut dan tidak terurut dengan nesting, tebal **text** dan miring *text*, coretan ~~text~~, tautan inline [text](url) dan gambar inline ![alt](src), blok kode fenced dengan tag bahasa opsional (```js), span kode inline `code`, tabel pipe dengan baris header, daftar tugas GFM - [ ] / - [x], blockquotes >, garis horizontal ---, dan autolinks. Setiap fitur dirender di panel pratinjau dengan cara yang sama seperti GitHub merendernya.

Bagaimana cara kerja konversi Markdown ke HTML?

Setiap konversi berjalan secara lokal di peramban Anda menggunakan dua pustaka bawaan — tanpa CDN, tanpa fetch, tanpa telemetri. Langkah-langkah tingkat tinggi adalah:

1. Parse: marked.parse(source) membaca Markdown Anda dan menghasilkan string HTML. Parser berjalan dalam mode GFM, sehingga tabel, daftar tugas, coretan, dan autolinks semuanya dikenali.
2. Sanitasi: keluaran HTML dijalankan melalui DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) sebelum ditugaskan ke innerHTML. DOMPurify adalah sanitizer XSS yang sama yang digunakan oleh Mozilla MDN, Atlassian, dan Microsoft 365 — ia mengurai HTML, berjalan di DOM, dan menghapus elemen <script>, setiap atribut event handler on*, dan skema URI javascript:.
3. Render: HTML yang sudah disanitasi ditulis ke panel pratinjau melalui innerHTML, dan HTML mentah ditampilkan di panel kedua melalui <textarea> hanya-baca sehingga Anda dapat menyalin markup. Mode langsung men-debounce masukan selama 150 ms agar pratinjau diperbarui saat Anda mengetik tanpa membuat parser kewalahan.

Mengapa mengonversi Markdown ke HTML dengan alat ini?

• Privasi: setiap proses parse, sanitasi, dan render terjadi di peramban Anda. Markdown — termasuk pos blog yang belum dirilis, draf dokumentasi internal, dan konten README rahasia — tidak pernah mencapai server kami.
• Aman XSS secara default: panel pratinjau yang dirender menjalankan setiap string HTML melalui DOMPurify sebelum innerHTML, sehingga tag <script> atau handler onerror= yang tersesat dalam HTML mentah di Markdown Anda menghasilkan pratinjau yang inert. Tab mentah menunjukkan keluaran yang tidak disanitasi untuk inspeksi, berada di dalam <textarea> melalui value — tidak pernah dieksekusi.
• GFM-lengkap: tabel, coretan, daftar tugas, dan autolinks semuanya dirender seperti GitHub merendernya. Tabel pipe Markdown menjadi <table> HTML dengan <thead> dan <tbody> — tidak ada baris yang hilang, tidak ada struktur yang rata.

Apa saja aplikasi umum konversi Markdown ke HTML?

Mengubah Markdown menjadi HTML muncul di dokumentasi, pekerjaan static-site, dan penulisan email:

• Penulisan README GitHub: menulis README proyek secara lokal sebagai Markdown dan mempratinjau HTML yang dirender sebelum mendorong. Pratinjau cocok dengan renderer GFM GitHub untuk tabel, daftar tugas, dan fenced code.
• Konten static-site: menempelkan pos Markdown dan mengambil HTML untuk bidang CMS atau templating engine yang mengharapkan markup daripada sumber Markdown.
• Templat email: menulis badan email transaksional sebagai Markdown dan mengonversi ke HTML untuk templating engine penyedia layanan email. Keluarannya adalah HTML semantik polos — tanpa inline styles, tanpa quirks klien email yang melapisi.

Seperti apa contoh konversi Markdown ke HTML?

Menempelkan # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) menghasilkan panel pratinjau yang berisi <h1>Title</h1>, daftar tidak terurut dua item, dan <a href="https://example.com">link</a>. Tab mentah menunjukkan string HTML yang tepat sehingga Anda dapat menyalinnya langsung ke template. Tabel pipe dengan baris perataan |---|---| menjadi <table> lengkap dengan <thead> dan <tbody> — mengonfirmasi tabel GFM dirender seperti GitHub merendernya.

Apakah konverter Markdown ke HTML ini berjalan sepenuhnya di peramban saya?

Ya. Setiap proses parse, sanitasi, dan render berjalan secara lokal sebagai JavaScript di dalam tab peramban Anda. Dua pustaka bawaan — marked@12.0.2 dan DOMPurify@3.1.7 — dilayani dari origin yang sama dengan halaman, sehingga tidak ada ketergantungan CDN, tidak ada fetch, tidak ada XMLHttpRequest, tidak ada navigator.sendBeacon pada masukan. Alat juga bekerja luring setelah halaman dimuat, karena ini adalah bundel HTML/CSS/JS statis dengan pustaka vendor disalin di sampingnya. Pos yang belum dirilis, dokumen internal, dan README rahasia tetap di perangkat Anda.

Apakah panel pratinjau yang dirender aman terhadap XSS?

Ya. Setiap string HTML yang ditugaskan ke innerHTML melewati DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) terlebih dahulu. DOMPurify adalah sanitizer XSS open-source yang dipelihara oleh Cure53; ini adalah pustaka yang sama yang digunakan oleh Mozilla MDN, Atlassian, dan Microsoft 365 untuk mengamankan HTML yang disuplai pengguna. Profil html default menghapus elemen <script>, setiap atribut event handler on* (onerror, onclick, dll.), skema URI javascript: di dalam href / src, dan ekspresi CSS berbahaya yang dikenal. Menempelkan <img src=x onerror=alert(1)> menghasilkan pratinjau di mana document.querySelector('#output-preview img[onerror]') mengembalikan null dan tidak ada alert yang muncul.

Apakah tabel GFM didukung?

Ya. Arah Markdown → HTML menangani tabel pipe secara native melalui mode GFM marked — baris header dipisahkan oleh baris perataan |---|---|, diikuti baris data, menghasilkan <table> dengan <thead> + <tbody>. Coretan (~~text~~ → <del>text</del>) dan daftar tugas (- [ ] / - [x] → <input type="checkbox">) dirender seperti cara GitHub merendernya.

Apakah Markdown saya akan dikonversi tanpa kehilangan?

Untuk set fitur GFM kanonik — heading h1 hingga h6, daftar terurut dan tidak terurut dengan nesting, tebal / miring / coretan, tautan inline, gambar inline, blok kode fenced dengan tag bahasa, span kode inline, tabel pipe, daftar tugas, blockquotes, garis horizontal, dan autolinks — keluaran HTML stabil dan cocok dengan renderer GitHub. Beberapa perilaku yang perlu diketahui: HTML mentah inline di dalam Markdown (mis. <sub>text</sub>) lolos tanpa perubahan ke keluaran, dan heading setext CommonMark (=== garis bawah) serta heading ATX (# Title) keduanya menghasilkan <h1> yang sama. Ini adalah perilaku marked yang terdokumentasi, bukan bug. Jika Anda membutuhkan arah sebaliknya, menarik HTML yang dirender kembali ke Markdown, gunakan alat HTML ke Markdown.

Apakah penyorotan sintaks dalam blok kode fenced didukung?

Tidak di v1. Blok kode fenced dirender dengan font monospace dan latar belakang halus tetapi tanpa penyorotan token per bahasa. Menambahkan penyorotan sintaks akan memerlukan bundling Prism atau highlight.js, masing-masing menambahkan 15–40 KB ditambah file tata bahasa per bahasa dan matriks tema yang perlu diselaraskan dengan palet Workshop Terminal. Untuk saat ini, renderer fokus pada kebenaran dan keamanan XSS; jika ada permintaan pengguna untuk penyorotan inline, toggle opt-in adalah follow-up yang dapat ditangani.

Konverter Markdown ke HTML ini hadir dengan marked@12.0.2 dan DOMPurify@3.1.7 dibundel di origin yang sama, mendukung set fitur GFM penuh, dan mensanitasi setiap string HTML yang dirender sebelum menyentuh DOM. Tanpa unggah, tanpa CDN, tanpa telemetri — setiap byte tetap di peramban Anda.