Penyunting Markdown kepada HTML

Penukar Markdown kepada HTML mengambil aliran kerja pengarangan paling biasa pada web moden — tulis dalam Markdown, terbitkan sebagai HTML — dan menjadikannya segera. Tampal sebarang Markdown ke dalam anak tingkap kiri dan anak tingkap kanan menunjukkan HTML yang dipaparkan dalam masa nyata. Tiada perjalanan pergi balik pelayan, tiada pendaftaran, tiada muat naik fail: marked.js berjalan sepenuhnya dalam pelayar anda, menghuraikan Markdown kepada HTML bersih dalam milisaat. Gunakannya untuk penukaran README sekali sahaja, pratonton draf blog, migrasi CMS antara platform dengan dialek Markdown yang berbeza, atau pengesahan pantas bahawa sintaks anda betul sebelum melakukan penjana tapak statik. Menyokong spesifikasi penuh CommonMark ditambah sambalan GitHub Flavored Markdown (jadual, senarai tugasan, potong tengah, pautan automatik) — bermakna apa yang berfungsi di GitHub akan berfungsi di sini tanpa kejutan.

Langkah 1: Tampal teks Markdown anda ke dalam anak tingkap input kiri. Penukar menerima sebarang panjang daripada satu baris kepada ribuan baris kandungan. Sintaks CommonMark standard berfungsi: `#` untuk tajuk, `*teks*` untuk condong, `teks` untuk tebal, `` `kod` `` untuk kod sebaris, `[pautan](url)` untuk pautan, `-` atau `*` untuk item senarai tidak tertib, `1.` untuk senarai tertib, `>` untuk petikan blok, tanda belakang tiga kali ganda untuk blok kod berpagar. Langkah 2: Perhatikan anak tingkap kanan memaparkan HTML dalam masa nyata semasa anda menaip atau menampal. Jadual dipaparkan dengan sempadan yang betul, tajuk mendapat atribut `id` yang dijana secara automatik (untuk pautan sauh), blok kod mengekalkan tag bahasa, dan HTML sebaris melepasi. Langkah 3: Klik Salin HTML untuk mengambil sumber HTML mentah untuk ditampal ke dalam fail `.html`, editor teks kaya CMS, atau templat tapak statik. Klik Salin Dipaparkan untuk menyalin paparan diformat jika sasaran anda menyokong teks kaya (Word, Google Docs, penyusun e-mel).

Penukar ini mempunyai kedua-duanya diaktifkan secara lalai. CommonMark (2014) ialah spesifikasi Markdown yang diseragamkan dan tidak jelas yang mentakrifkan tingkah laku pengurai yang tepat — diterima pakai oleh GitHub, Reddit, Stack Overflow, Discourse, dan kebanyakan alat moden. GitHub Flavored Markdown (GFM) melanjutkan CommonMark dengan lima tambahan: jadual (baris dipisahkan paip dengan penjajaran), senarai tugasan (`- [ ]` dan `- [x]` untuk kotak semak), potong tengah (`~~text~~`), pautan automatik (URL mentah menjadi boleh klik tanpa sintaks `[](url)` yang jelas), dan HTML mentah yang disekat (sesetengah tag ditapis untuk keselamatan). Oleh kerana README GitHub ialah sumber Markdown yang paling biasa di web, keserasian GFM adalah penting — penukar ini memaparkan dengan tepat apa yang dipaparkan oleh GitHub untuk input yang sama. Jika anda memerlukan output CommonMark tulen (tiada sambalan GFM), anda boleh melumpuhkan GFM dalam menu opsyen, tetapi lalai berfungsi untuk 95% kes penggunaan.

Jadual GFM menggunakan aksara paip (`|`) untuk mentakrifkan lajur dan tanda sempang (`-`) dalam baris pemisah pengepala. Sintaks asas: `| Nama | Umur |\n|------|-----|\n| Ali | 30 |`. Penjajaran lajur dikodkan dalam baris pemisah: `-:` untuk kanan, `:-:` untuk tengah, `:-` atau `-` untuk kiri (lalai). Contoh dengan penjajaran: `| Alat | Kelajuan | Percuma |\n|:-----|------:|:----:|` menghasilkan jadual 3 lajur dengan Alat terjajar ke kiri, Kelajuan terjajar ke kanan, Percuma terjajar ke tengah. Peng渲染 mengeluarkan elemen `<table>`, ``, ``, `<tr>`, `<th>`, `<td>` yang betul dengan atribut sebaris `style="text-align:..."` untuk penjajaran. Paip pada permulaan dan pengakhiran setiap baris adalah pilihan tetapi lazimnya ditambah untuk kebolehbacaan. Lebar lajur dalam sumber tidak perlu sejajar — pengurai tidak mengambil berat tentang jarak visual.

Blok kod berpagar menggunakan tanda belakang tiga kali ganda (atau tilda) untuk membuka dan menutup: ```\nkod di sini\n```. Tambahkan pembayang bahasa selepas pagar pembuka untuk mendayakan penyerlahan sintaks apabila HTML diterbitkan: ```javascript atau ```python atau ```bash. Penukar mengeluarkan `<pre><code class="language-X">` di mana X ialah nama bahasa. Penukar ini tidak mengenakan warna sintaks sendiri — pewarnaan dilakukan oleh perpustakaan asing seperti highlight.js, Prism.js, atau Shiki apabila HTML dipaparkan pada halaman anda. Mengapa berpecah? Perpustakaan penyerlahan sintaks adalah setiap satu 50KB-200KB dan menambah berat halaman yang ketara; penukar kekal kurus dengan mengeluarkan tag bahasa sahaja dan membenarkan saluran paip penerbitan anda menambah warna. Tag bahasa biasa: javascript, typescript, python, java, csharp, go, rust, ruby, php, html, css, json, yaml, xml, bash, sql, markdown.

Antara muka anak tingkap berbelah — sumber Markdown di sebelah kiri, pratonton HTML di sebelah kanan — ialah aliran kerja pengarangan standard untuk penulis teknikal dan pembangun. Ia membolehkan anda menulis dalam format Markdown yang ringan dan mudah dibaca sambil serta-merta melihat hasil yang kelihatan diterbitkan. Berbanding dengan editor WYSIWYG (Word, Google Docs): Markdown lebih pantas untuk ditulis (tiada capaian tetikus untuk butang pemformatan), boleh kawal versi (perbezaan teks biasa dengan bersih dalam Git), mudah alih (mana-mana editor teks berfungsi), dan menghasilkan HTML bersih tanpa div bersarang yang kembung. Berbanding dengan menulis HTML secara langsung: Markdown adalah 3-5x lebih pantas untuk kandungan biasa (tajuk, perenggan, senarai, pautan), membaca secara semula jadi dalam bentuk sumber, dan mengalih keluar keputusan pemformatan daripada aliran penulisan. Gunakan Markdown untuk sebarang kandungan berat teks; tukar kepada HTML hanya apabila anda memerlukan kawalan persembahan berbutir halus.

Penukar mengeluarkan HTML5 semantik — elemen yang menerangkan maksud kandungan, bukan sekadar rupa. Tajuk menjadi `<h1>` hingga `<h6>` dengan atribut `id` yang dijana automatik untuk pautan sauh. Perenggan menjadi `<p>`. Tebal menjadi `<strong>` (bukan `<b>`), condong menjadi `<em>` (bukan `<i>`) — padanan semantik yang berfungsi lebih baik dengan pembaca skrin dan penyasaran CSS. Senarai tidak tertib menjadi `<ul><li>`, senarai tertib `<ol><li>`. Petikan blok menjadi `<blockquote>`. Rentang kod menjadi `<code>`, blok berpagar menjadi `<pre><code>`. Pautan menjadi `<a href>`. Imej menjadi `<img src alt>`. Hasilnya ialah HTML yang bersih dan boleh diakses yang jatuh ke dalam mana-mana CMS moden, penjana tapak statik, atau fail HTML tanpa pengubahsuaian. Tiada gaya sebaris (kecuali penjajaran jadual), tiada pembungkus `<div>` tambahan, tiada atribut kelas (kecuali tag bahasa pada blok kod).

Fail README ialah sumber Markdown yang paling biasa di web — setiap repositori GitHub mempunyai satu, kebanyakan pendaftaran pakej (npm, PyPI, RubyGems) memaparkannya secara automatik. Untuk menukar README.md untuk tapak dokumentasi, tampal kandungan fail ke dalam penukar dan salin output HTML. Pelarasan biasa selepas penukaran: (1) Pautan relatif — fail README selalunya menggunakan laluan relatif (`./docs/install.md`); tulis semula kepada URL mutlak untuk tapak yang diterbitkan. (2) Laluan imej — isu yang sama, imej README menggunakan `./images/logo.png`; kemas kini kepada URL imej yang diterbitkan. (3) ID sauh — ID tajuk yang dijana automatik menggunakan format tanda sempang huruf kecil (`Installation` menjadi `id="installation"`); kemas kini pautan sauh dalaman dengan sewajarnya. (4) Sintaks khusus repositori — GitHub memautkan secara automatik rujukan isu seperti `#123` dan sebutan pengguna seperti `@username`; ini tidak berpaut secara automatik di luar GitHub, tulis semula sebagai pautan yang jelas jika perlu.

Penjana tapak statik (SSG) memproses fail Markdown ke dalam halaman HTML pada masa binaan, jadi penukaran manual biasanya tidak diperlukan — anda melakukan fail `.md` ke repositori anda dan SSG mengendalikan selebihnya. SSG biasa dan pengendalian Markdown mereka: Jekyll (Ruby) menggunakan kramdown secara lalai, serasi dengan CommonMark dengan beberapa GFM. Hugo (Go) menggunakan Goldmark, CommonMark penuh + GFM + sambalan. Next.js MDX (JavaScript) menggunakan remark/rehype, membolehkan anda membenamkan komponen React dalam Markdown. Eleventy (JavaScript) menggunakan markdown-it secara lalai. Astro (JavaScript) menggunakan remark dan menyokong MDX. Gatsby (JavaScript) menggunakan gatsby-plugin-mdx dengan remark. Penukar ini paling berguna untuk: (a) penukaran sekali sahaja di luar aliran kerja SSG, (b) mengesahkan bahawa Markdown anda dipaparkan dengan betul sebelum melakukan, (c) memindahkan kandungan antara SSG yang menggunakan dialek Markdown yang berbeza.

Enam perangkap biasa. (1) Juntai baris lembut di dalam perenggan — baris baharu tunggal runtuh menjadi ruang mengikut CommonMark, bukan `<br>`. Gunakan dua ruang penamat atau baris kosong untuk juntai yang jelas. (2) Blok kod berindentasi (inden 4 ruang) berbanding berpagar (tanda belakang tiga kali ganda) — kedua-duanya berfungsi, tetapi berpagar disyorkan kerana ia mengekalkan tag bahasa. (3) Senarai bersarang dengan inden yang salah — CommonMark memerlukan 2 atau 4 ruang, mencampurkan tab dan ruang memecahkan paparan pada sesetengah pengurai. (4) HTML sebaris dilucutkan oleh peng渲染 yang lebih ketat — GitHub dan Reddit menapis banyak tag untuk keselamatan; apa yang berfungsi dalam penukar ini mungkin tidak berfungsi di mana-mana sahaja. (5) Tajuk tanpa baris kosong sebelum/selepas — kebanyakan pengurai bertolak ansur, tetapi CommonMark mengesyorkan baris kosong untuk kejelasan. (6) Potong tengah dengan tilda tunggal — tilda tunggal tidak berfungsi, memerlukan `~~double tildes~~`. Semasa menyahpepijat, semak dialek apa yang dituturkan oleh platform sasaran (CommonMark? GFM? sesuatu yang tersuai?) sebelum menganggap penukar itu salah.

Penukar ini berjalan 100% di dalam pelayar anda — teks Markdown anda tidak pernah meninggalkan halaman. Penukar Markdown sebelah pelayan biasanya merekod setiap penukaran untuk analitis dan mungkin menyimpan input untuk pencachean atau pemantauan ralat. Untuk kebanyakan penukaran biasa ini bukan masalah, tetapi pembangun dan penulis teknikal kerap melekatkan kandungan yang tidak patut bocor: kunci API dalam sampel kod, dokumentasi dalaman, spesifikasi teknikal proprietari, draf hantaran blog di bawah NDA, data pelanggan dalam dokumentasi sokongan. Penukaran sebelah pelayan menghapuskan risiko kebocoran sepenuhnya. Untuk mengesahkan: buka tab Network DevTools pelayar, tampal Markdown, klik tukar — anda akan melihat sifar permintaan keluar semasa penukaran. Pustaka marked.js dimuatkan sekali apabila halaman dibuka (boleh dilihat semasa muat halaman awal); selepas itu, semua penukaran adalah setempat. Untuk input Markdown yang tidak dipercayai daripada sumber pihak ketiga, sanitasi HTML yang dirender dengan DOMPurify sebelum memasukkan ke dalam halaman untuk mengelakkan serangan XSS.

Rujukan sintaks pantas. Tajuk: `# H1` hingga `###### H6`. Tebal: `text`. Italik: `*text*` atau `_text_`. Tebal+italik: `*text*`. Potong tengah (GFM): `~~text~~`. Kod sebaris: `` `code` ``. Pautan: `[text](https://url.com)`. Imej: ``. Pautan auto (GFM): `https://example.com` (URL mentah, tiada kurungan). Senarai tidak tertib: `- item` atau `* item` atau `+ item`. Senarai tertib: `1. item`. Senarai bersarang: indenskan dengan 2 ruang. Petikan blok: `> quoted text`. Petikan berbilang baris: letakkan awalan setiap baris dengan `>`. Blok kod berpagar: tanda belakang tiga kali (buka dan tutup) dengan tanda bahasa pilihan. Blok kod berinden: 4 ruang atau 1 tab pada permulaan baris. Garisan mendatar: `---` atau `***` pada baris sendiri. Jadual (GFM): `| col1 | col2 |\n|------|------|\n| val1 | val2 |`. Senarai tugasan (GFM): `- [ ] todo` and `- [x] done`. Laluan lepas HTML: mana-mana tag HTML berfungsi sebaris. Pemisah baris keras: dua ruang hujung. Lari daripada aksara khas: garis condong belakang di depan, cth. `\*not italic\*`. Gunakan penukar untuk sebarang kes yang mengelirukan anda — pratonton langsung menunjukkan dengan tepat cara setiap corak merender.