π
Libreng Markdown Editor
Sumulat at i-preview ang Markdown sa real time. Sinusuportahan ang mga heading, bold, italic, code block, talahanayan, at listahan.
Gumagana offline kapag na-load na
102 mga salita Β· 614 mga karakter
Markdown
Preview
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Maligayang pagdating sa Markdown Editor</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Magsulat ng <strong>Markdown</strong> sa kaliwa, makita ang live preview sa kanan.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Mga feature</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>Bold</strong>, <em>italic</em>, at <del>strikethrough</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">Inline code</code> at fenced code blocks</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">Links</a></li><li class="my-0.5">Mga listahan, blockquotes, tables, at higit pa</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Halimbawa ng code</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">Ang Markdown ay ginawa ni John Gruber noong 2004 upang mas madali ang pagsusulat para sa 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">Feature</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">Suportado</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Mga heading</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">Mga listahan</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">Mga talahanayan</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">Code</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr></tbody></table>
Cheatsheet ng Markdown
# Heading 1H1
**bold**Bold
*italic*Italic
`code`Inline code
- itemListahang May Bullet
1. itemListahang May Numero
> quoteBlockquote
[text](url)Link
Larawan
---Divider
Mga karaniwang gamit
- Magsulat ng API Documentation sa MarkdownMag-draft ng endpoint descriptions, request/response examples, at parameter tables sa Markdown.
- Gumanap ng Markdown NotesMagsulat ng structured notes sa Markdown na maaaring i-paste sa Notion, Obsidian, Bear, o anumang Markdown app.
- Sumulat ng GitHub README sa MarkdownI-draft at preview ang iyong GitHub repository README gamit ang live Markdown rendering.
- Sumulat ng Technical DocumentationSumulat at preview ang API docs, wikis, at technical guides sa Markdown bago i-publish.
- Sumulat ng Blog Posts sa MarkdownI-draft ang blog posts sa Markdown para sa Ghost, Jekyll, Hugo, Hashnode, at ibang Markdown-based publishing platforms.
Paano ito Gumagana
Nire-render ang preview ng isang hand-written na Markdown parser na nakapaloob mismo sa tool β walang marked, walang remark, walang panlabas na library. Tino-tokenize nito ang source bawat linya sa browser, kino-convert ang syntax sa HTML na ipinapasa sa sanitizer bago ipakita.
- 1Tokenization bawat linyaHinahati ng custom na renderMarkdown function ang source mo sa mga newline at dinadaanan sa iisang pagdaan, itinutugma ang fenced code block, heading (H1βH6), blockquote, ordered at unordered list, GFM table (na may column alignment), horizontal rule, at talata ayon sa pagkakasunod ng priyoridad.
- 2Pagpapalawak ng inline syntaxPagkatapos, pinoproseso ang bawat nakolektang linya o cell ng inlineMarkdown, isang serye ng regex replacement na humahawak sa bold (** at __), italic (* at _), bold-italic (***), strikethrough (~~), inline code (), larawan (), at link ([text](url)) β nire-resolve ang mga larawan bago ang mga link para hindi mali ang pagkonsumo sa ! prefix.
- 3Sanitization at pagharang sa remote resourceIpinapasa ang raw na HTML mula sa renderer sa isang sanitizer (sanitize-html) para alisin ang mga hindi ligtas na tag at attribute gaya ng <script>, onerror handler, at javascript: href. Pinapalitan ng ikalawang pagdaan (neutralizeRemote) ng placeholder ang mga remote na src ng larawan bilang default, para hindi tahimik na tumawag ang preview sa mga panlabas na server bago ka pumayag.
- 4I-export bilang .md o standalone na .htmlAng pagkopya o pag-download ng Markdown ay nagsusulat ng raw na source text. Ang pag-download ng HTML ay binabalot ang na-sanitize na output sa isang self-contained na dokumento na may sariling inline stylesheet β gumagana lang ang mga Tailwind class sa loob ng site, kaya plain na CSS rule ang isinasama sa export, kaya nababasa ang file kahit saan.
Mga Kaugnay na Tool
HTML sa Markdown Converter
I-convert ang HTML sa malinis na Markdown. Hinahawakan ang mga heading, listahan, link, larawan, code block, talahanayan, at blockquote. Perpekto para sa paglipat ng nilalaman mula sa mga CMS.
Subukan
Markdown sa HTML Converter
I-convert ang Markdown sa malinis na HTML na may live preview. Gamitin ang source view para kopyahin ang handa nang i-paste na HTML para sa mga blog, CMS, o email template.
Subukan
Editor ng Mermaid Diagram
Sumulat ng mga flowchart, sequence diagram, Gantt chart, at iba pa sa Mermaid syntax na may live preview. I-export bilang SVG o PNG. Tumatakbo nang buo sa iyong browser.
Subukan