π
Editor Markdown gratis
Tulis dan pratinjau Markdown secara real time. Mendukung judul, tebal, miring, blok kode, tabel, dan daftar.
Berfungsi offline setelah dimuat
96 kata Β· 582 karakter
Markdown
Pratinjau
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Selamat datang di Editor Markdown</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Tulis <strong>Markdown</strong> di sebelah kiri, lihat pratinjau langsung di sebelah kanan.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Fitur</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>miring</em>, dan <del>coret</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">Kode sebaris</code> dan blok kode yang dibatasi</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">Tautan</a></li><li class="my-0.5">Daftar, kutipan blok, tabel, dan banyak lagi</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Contoh kode</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 dibuat oleh John Gruber pada tahun 2004 untuk membuat penulisan untuk web lebih mudah.</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">Fitur</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">Didukung</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Judul</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">Daftar</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">Tabel</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">Kode</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr></tbody></table>
Lembar contekan Markdown
# Heading 1H1
**bold**Tebal
*italic*Miring
`code`Kode sebaris
- itemDaftar berpoin
1. itemDaftar bernomor
> quoteKutipan blok
[text](url)Tautan
Gambar
---Pemisah
Penggunaan umum
- Tulis Dokumentasi API dalam MarkdownDraf deskripsi endpoint, contoh permintaan/respons, dan tabel parameter dalam Markdown.
- Buat Catatan dalam MarkdownTulis catatan terstruktur dalam Markdown yang dapat ditempel ke Notion, Obsidian, Bear, atau aplikasi Markdown apa pun.
- Tulis README GitHub dalam MarkdownBuat draf dan pratinjau README repositori GitHub Anda dengan rendering Markdown langsung.
- Tulis Dokumentasi TeknisTulis dan pratinjau docs API, wiki, dan panduan teknis dalam Markdown sebelum dipublikasikan.
- Tulis Posting Blog dalam MarkdownBuat draf posting blog dalam Markdown untuk Ghost, Jekyll, Hugo, Hashnode, dan platform penerbitan berbasis Markdown lainnya.
Cara kerja
Pratinjau dirender oleh parser Markdown tulisan tangan yang dibangun langsung ke dalam alat ini β tanpa marked, tanpa remark, tanpa library eksternal. Ini mentokenisasi sumber baris-demi-baris di browser, mengonversi sintaks menjadi HTML yang kemudian diteruskan melalui sanitizer sebelum ditampilkan.
- 1Tokenisasi baris-demi-barisFungsi renderMarkdown khusus membagi sumber Anda pada baris baru dan menelusurinya dalam satu lintasan, mencocokkan blok kode berpagar, heading (H1βH6), blockquote, daftar berurut dan tak-berurut, tabel GFM (dengan perataan-kolom), garis horizontal, dan paragraf dalam urutan prioritas.
- 2Ekspansi sintaks inlineSetiap baris atau sel yang dikumpulkan kemudian diproses oleh inlineMarkdown, rangkaian penggantian regex yang menangani tebal (** dan __), miring (* dan _), tebal-miring (***), coret (~~), kode inline (), gambar (), dan tautan ([teks](url)) β gambar diselesaikan sebelum tautan sehingga awalan ! tidak salah terkonsumsi.
- 3Sanitisasi dan pemblokiran sumber-daya jarak jauhHTML mentah yang dihasilkan renderer diteruskan melalui sanitizer (sanitize-html) untuk menghapus tag dan atribut tidak aman seperti <script>, penangan onerror, dan href javascript:. Lintasan kedua (neutralizeRemote) mengganti nilai src gambar jarak jauh dengan placeholder secara default, mencegah pratinjau diam-diam menghubungi server eksternal sebelum Anda memilih untuk mengizinkannya.
- 4Ekspor sebagai .md atau .html mandiriMenyalin atau mengunduh Markdown menulis teks sumber mentah. Mengunduh HTML membungkus keluaran yang disanitasi dalam dokumen mandiri dengan stylesheet inline-nya sendiri β kelas Tailwind hanya berfungsi di dalam situs, sehingga ekspor menyertakan aturan CSS biasa sebagai gantinya, membuat file dapat dibaca di mana saja.
Alat terkait
Konverter HTML ke Markdown
Konversi HTML ke Markdown yang bersih. Menangani judul, daftar, tautan, gambar, blok kode, tabel, dan blockquote. Sempurna untuk memindahkan konten dari CMS.
Coba
Konverter Markdown ke HTML
Konversi Markdown ke HTML bersih dengan pratinjau langsung. Gunakan tampilan sumber untuk menyalin HTML siap tempel untuk blog, CMS, atau template email.
Coba
Editor Diagram Mermaid
Tulis diagram alur, diagram urutan, diagram Gantt, dan lainnya dalam sintaks Mermaid dengan pratinjau langsung. Ekspor sebagai SVG atau PNG. Berjalan sepenuhnya di browser Anda.
Coba