§

Tampal Markdown

§

Mentah

§

Pratonton

Pratonton dibersihkan melalui DOMPurify — tag skrip, pengendali acara, dan URI javascript: dibuang sebelum dirender.

Markdown merupakan format dokumen pilihan bagi pembangun dan penulis teknikal di Malaysia. Setiap README GitHub, dokumentasi API, dan jawatan komuniti teknikal melewati penghurai Markdown. Platform pengurusan kandungan, alat nota seperti Notion dan Obsidian, serta surat berita yang dikompilasi ke HTML e-mel semuanya bergantung kepada penukaran Markdown ke HTML. Menukar Markdown kepada HTML yang bersih adalah kerja harian bagi penulis teknikal, penyelenggara sumber terbuka, dan jurutera platform.

Apakah penukaran Markdown ke HTML?

Markdown ialah format teks biasa ringan yang menggunakan tanda baca minimal (# untuk tajuk, * untuk penekanan, - untuk item senarai) untuk mengekod prosa berstruktur. GitHub Flavored Markdown (GFM) memanjangkan spesifikasi CommonMark asal dengan jadual, strikethrough, senarai tugas, dan pautan automatik. HTML ialah bentuk yang dirender oleh pelayar. Menukar Markdown kepada HTML membolehkan anda mengarang dalam sintaks ringan dan menghantar ke permukaan yang dirender — README, halaman tapak statik, badan e-mel — tanpa menulis tag secara manual.

Ciri-ciri GitHub Flavored Markdown mana yang disokong?

Penghurai marked@12.0.2 yang digabungkan menyokong superset GFM penuh: tajuk gaya ATX # hingga ######, senarai tertib dan tidak tertib dengan penyarangan, tebal **text** dan italik *text*, strikethrough ~~text~~, pautan sebaris [text](url) dan imej sebaris ![alt](src), blok kod berpagar dengan tag bahasa pilihan (```js), rentang kod sebaris `code`, jadual paip dengan baris pengepala, senarai tugas GFM - [ ] / - [x], petikan blok >, peraturan mendatar ---, dan pautan automatik. Setiap elemen dirender dalam panel pratonton sama seperti cara GitHub merendernya.

Bagaimana penukaran Markdown ke HTML berfungsi?

Setiap penukaran dijalankan secara tempatan di pelayar anda menggunakan dua perpustakaan yang digabungkan — tiada CDN, tiada fetch, tiada telemetri. Langkah-langkah utama adalah:

  1. Hurai: marked.parse(source) membaca Markdown anda dan menghasilkan rentetan HTML. Parser dijalankan dalam mod GFM, supaya jadual, senarai tugas, strikethrough, dan pautan automatik semuanya diiktiraf.
  2. Bersihkan: output HTML dijalankan melalui DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) sebelum ditetapkan kepada innerHTML. DOMPurify ialah sanitizer XSS yang sama yang digunakan oleh Mozilla MDN, Atlassian, dan Microsoft 365 — ia menghurai HTML, menelusuri DOM, dan membuang elemen <script>, setiap atribut pengendali acara on*, dan skema URI javascript:.
  3. Render: HTML yang dibersihkan ditulis ke panel pratonton melalui innerHTML, dan HTML mentah dipaparkan dalam panel kedua melalui <textarea> baca sahaja supaya anda boleh menyalin markup. Mod langsung menyanggah input sebanyak 150 ms supaya pratonton dikemas kini semasa anda menaip tanpa membebankan penghurai.

Mengapa tukar Markdown kepada HTML dengan alat ini?

  • Privasi: setiap laluan penghuraian, pembersihan, dan rendering berlaku di pelayar anda. Markdown — termasuk catatan blog yang belum dikeluarkan, draf dokumentasi dalaman, dan kandungan README sulit — tidak pernah mencapai pelayan kami.
  • Selamat XSS secara lalai: panel pratonton yang dirender menjalankan setiap rentetan HTML melalui DOMPurify sebelum innerHTML, jadi tag <script> atau pengendali onerror= dalam HTML mentah dalam Markdown anda menghasilkan pratonton yang tidak aktif. Tab mentah menunjukkan output yang tidak dibersihkan untuk pemeriksaan dalam <textarea> melalui value — tidak pernah dilaksanakan.
  • GFM lengkap: jadual, strikethrough, senarai tugas, dan pautan automatik dirender sama seperti cara GitHub merendernya. Jadual paip Markdown menjadi <table> HTML dengan <thead> dan <tbody> — tiada baris yang hilang, tiada struktur yang diratakan.

Apakah aplikasi biasa penukaran Markdown ke HTML?

Menukar Markdown kepada HTML muncul dalam dokumentasi, kerja tapak statik, dan pengarangan e-mel:

  • Pengarangan README GitHub: menggubal README projek secara tempatan sebagai Markdown dan mempratonton sebelum menolak. Pratonton sepadan dengan pemapar GFM GitHub untuk jadual, senarai tugas, dan kod berpagar.
  • Kandungan tapak statik: menampalkan post Markdown dan mengambil HTML untuk medan CMS atau enjin penemplatan yang mengharapkan markup dan bukan sumber Markdown.
  • Templat e-mel: menulis badan e-mel transaksi sebagai Markdown dan menukar kepada HTML untuk enjin penemplatan pembekal perkhidmatan e-mel. Output ialah HTML semantik biasa — tiada gaya sebaris, tiada keanehan klien e-mel yang ditambahkan.

Bagaimana contoh penukaran Markdown ke HTML kelihatan?

Menampal # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) menghasilkan panel pratonton yang mengandungi <h1>Title</h1>, senarai tidak tertib dua item, dan <a href="https://example.com">link</a>. Panel mentah menunjukkan rentetan HTML yang tepat supaya anda boleh menyalinnya terus ke dalam templat. Jadual paip dengan baris penjajaran |---|---| menjadi <table> penuh dengan <thead> dan <tbody> — mengesahkan jadual GFM dirender seperti cara GitHub merendernya.

Adakah penukar Markdown ke HTML ini berjalan sepenuhnya di pelayar saya?

Ya. Setiap laluan penghuraian, pembersihan, dan rendering dijalankan secara tempatan sebagai JavaScript dalam tab pelayar anda. Perpustakaan yang digabungkan — marked@12.0.2 dan DOMPurify@3.1.7 — dihantar dari asal yang sama dengan halaman, jadi tiada kebergantungan CDN, tiada fetch, tiada XMLHttpRequest, tiada navigator.sendBeacon pada input. Alat ini juga berfungsi luar talian setelah halaman dimuatkan, kerana ia adalah bundle HTML/CSS/JS statik dengan perpustakaan vendor disalin bersamanya. Catatan yang belum dikeluarkan, dokumen dalaman, dan README sulit kekal pada peranti anda.

Adakah panel pratonton yang dirender selamat XSS?

Ya. Setiap rentetan HTML yang ditetapkan kepada innerHTML melewati DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) dahulu. DOMPurify ialah sanitizer XSS sumber terbuka yang dikekalkan oleh Cure53; ia ialah perpustakaan yang sama yang digunakan oleh Mozilla MDN, Atlassian, dan Microsoft 365 untuk mengeraskan HTML yang diberikan oleh pengguna. Profil html lalai membuang elemen <script>, setiap atribut pengendali acara on* (onerror, onclick, dll.), skema URI javascript: di dalam href / src, dan ungkapan CSS yang diketahui berbahaya. Menampalkan <img src=x onerror=alert(1)> menghasilkan pratonton di mana document.querySelector('#output-preview img[onerror]') mengembalikan null dan tiada amaran dipaparkan.

Adakah jadual GFM disokong?

Ya. Arah Markdown → HTML mengendalikan jadual paip secara asli melalui mod GFM marked — baris pengepala yang dipisahkan oleh baris penjajaran |---|---|, diikuti oleh baris data, menghasilkan <table> dengan <thead> + <tbody>. Strikethrough (~~text~~<del>text</del>) dan senarai tugas (- [ ] / - [x]<input type="checkbox">) dirender sama seperti cara GitHub merendernya.

Adakah Markdown saya ditukar dengan setia?

Untuk set ciri GFM kanonik — tajuk h1 hingga h6, senarai tertib dan tidak tertib dengan penyarangan, tebal / italik / strikethrough, pautan sebaris, imej sebaris, blok kod berpagar dengan tag bahasa, rentang kod sebaris, jadual paip, senarai tugas, petikan blok, peraturan mendatar, dan pautan automatik — output HTML adalah stabil dan sepadan dengan pemapar GitHub. Beberapa tingkah laku untuk diketahui: HTML sebaris mentah di dalam Markdown (cth. <sub>text</sub>) melewati tanpa perubahan ke output, dan tajuk setext CommonMark (garis bawah ===) serta tajuk ATX (# Title) kedua-duanya menghasilkan <h1> yang sama. Ini adalah tingkah laku marked yang didokumentasikan, bukan pepijat. Jika anda memerlukan arah sebaliknya, gunakan alat HTML ke Markdown.

Adakah penyerlahan sintaks dalam blok kod berpagar disokong?

Tidak dalam v1. Blok kod berpagar dirender dengan fon monospaced dan latar belakang halus tetapi tanpa penyerlahan token per bahasa. Menambah penyerlahan sintaks memerlukan penggabungan Prism atau highlight.js, yang masing-masing menambah 15–40 KB ditambah fail tatabahasa per bahasa dan matriks tema yang perlu diselaraskan dengan palet Workshop Terminal. Buat masa ini, pemapar memfokuskan pada ketepatan dan keselamatan XSS; jika terdapat permintaan pengguna untuk penyerlahan sebaris, togol pilihan-masuk adalah susulan yang boleh dilaksanakan.

Penukar Markdown ke HTML ini dihantar dengan marked@12.0.2 dan DOMPurify@3.1.7 yang digabungkan pada asal yang sama, menyokong set ciri GFM penuh, dan membersihkan setiap rentetan HTML yang dirender sebelum menyentuh DOM. Tiada muat naik, tiada CDN, tiada telemetri — setiap bait kekal di pelayar anda.