π
Editor Markdown percuma
Tulis dan pratonton Markdown dalam masa nyata. Menyokong tajuk, tebal, condong, blok kod, jadual, dan senarai.
Berfungsi luar talian selepas dimuatkan
96 perkataan Β· 591 aksara
Markdown
Pratonton
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Selamat datang ke Editor Markdown</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Tulis <strong>Markdown</strong> di sebelah kiri, lihat pratonton langsung di sebelah kanan.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Ciri-ciri</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Tebal</strong>, <em>condong</em>, dan <del>tembus garis</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">Kod dalam baris</code> dan blok kod berkaitan</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Pautan</a></li><li class="my-0.5">Senarai, sebut kutipan, jadual, dan banyak lagi</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Contoh kod</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown telah dibuat oleh John Gruber pada tahun 2004 untuk memudahkan penulisan untuk web.</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Ciri</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Disokong</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Tajuk</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Senarai</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Jadual</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Kod</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr></tbody></table>
Rujukan pantas Markdown
# Heading 1H1
**bold**Tebal
*italic*Condong
`code`Kod inline
- itemSenarai bertanda
1. itemSenarai bernombor
> quotePetikan blok
[text](url)Pautan
Imej
---Pembahagi
Kegunaan biasa
- Tulis Dokumentasi API dalam MarkdownDraf deskripsi endpoint, contoh permintaan/respons, dan tabel parameter dalam Markdown.
- Ambil Catatan MarkdownTulis catatan terstruktur dalam Markdown yang dapat ditempel ke Notion, Obsidian, Bear, atau aplikasi Markdown apa pun.
- Tulis GitHub README dalam MarkdownDraf dan pratonton README repositori GitHub anda dengan rendering Markdown langsung.
- Tulis Dokumentasi TeknikalTulis dan pratonton dokumentasi API, wiki dan panduan teknikal dalam Markdown sebelum penerbitan.
- Tulis Catatan Blog dalam MarkdownDraf catatan blog dalam Markdown untuk Ghost, Jekyll, Hugo, Hashnode dan platform penerbitan berasaskan Markdown yang lain.
Cara ia berfungsi
Pratonton dipaparkan oleh penghurai Markdown tulisan tangan dibina terus ke dalam alat β tiada marked, tiada remark, tiada pustaka luaran. Ia menoken sumber baris-demi-baris dalam pelayar, menukar sintaks kepada HTML yang kemudian dilalukan melalui penyanitasi sebelum paparan.
- 1Penokenan baris-demi-barisFungsi renderMarkdown tersuai memecah sumber anda pada baris baharu dan melalui satu pas, memadankan blok kod berpagar, tajuk (H1βH6), petikan blok, senarai bertertib dan tidak bertertib, jadual GFM (dengan penjajaran-lajur), garis mendatar, dan perenggan mengikut susunan keutamaan.
- 2Pengembangan sintaks sebarisSetiap baris atau sel dikumpul kemudian diproses oleh inlineMarkdown, rantaian penggantian regex yang mengendalikan tebal (** dan __), condong (* dan _), tebal-condong (***), coret (~~), kod sebaris (), imej (), dan pautan ([text](url)) β imej diselesaikan sebelum pautan supaya awalan ! tidak digunakan secara salah.
- 3Penyanitasian dan penyekatan sumber-jauhHTML mentah dihasilkan oleh pemapar dilalukan melalui penyanitasi (sanitize-html) untuk membuang tag dan atribut tidak selamat seperti <script>, pengendali onerror, dan href javascript:. Pas kedua (neutralizeRemote) menggantikan nilai src imej jauh dengan pemegang tempat secara lalai, mencegah pratonton daripada senyap-senyap menghubungi pelayan luaran sebelum anda pilih-masuk.
- 4Eksport sebagai .md atau .html berdikariMenyalin atau memuat turun Markdown menulis teks sumber mentah. Memuat turun HTML membalut output disanitasi dalam dokumen berdikari dengan helaian gaya sebarisnya sendiri β kelas Tailwind hanya berfungsi di dalam laman, jadi eksport membundel peraturan CSS biasa sebaliknya, menjadikan fail boleh dibaca di mana-mana.
Alat berkaitan
Penukar HTML ke Markdown
Tukar HTML kepada Markdown yang bersih. Mengendalikan tajuk, senarai, pautan, imej, blok kod, jadual, dan petikan blok. Sempurna untuk memindahkan kandungan keluar dari CMS.
Cuba
Penukar Markdown ke HTML
Tukar Markdown kepada HTML yang bersih dengan pratonton langsung. Gunakan pandangan sumber untuk menyalin HTML sedia tampal untuk blog, CMS, atau templat e-mel.
Cuba
Editor Rajah Mermaid
Tulis carta alir, rajah urutan, carta Gantt, dan lain-lain dalam sintaks Mermaid dengan pratonton langsung. Eksport sebagai SVG atau PNG. Berjalan sepenuhnya dalam pelayar anda.
Cuba