📝
Ingyenes Markdown-szerkesztő
Írj és tekintsd meg a Markdownt valós időben. Támogatja a fejléceket, félkövért, dőlt betűt, kódblokkkokat, táblázatokat és listákat.
Betöltés után offline is működik
87 szó · 563 karakter
Markdown
Előnézet
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Üdvözlünk a Markdown szerkesztőben</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Írj <strong>Markdown</strong> szöveget balra, az élő előnézet jobbra jelenik meg.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Funkciók</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>Félkövér</strong>, <em>dőlt</em> és <del>áthúzott</del> szöveg</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 kód</code> és kódblokkok</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">Linkek</a></li><li class="my-0.5">Listák, idézetek, táblázatok és más elemek</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Kódpélda</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">A Markdown-t John Gruber készítette 2004-ben, hogy egyszerűbbé tegye a webes írást.</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">Funkció</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">Támogatott</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Címsorok</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">Listák</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">Táblázatok</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">Kód</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown-gyorssegéd
# Heading 1H1
**bold**Félkövér
*italic*Dőlt
`code`Inline kód
- itemFelsorolás
1. itemSzámozott lista
> quoteIdézetblokk
[text](url)Hivatkozás
Kép
---Elválasztó
Gyakori felhasználások
- API dokumentáció írása Markdown-banVázlat végpont-leírások, kérés/válasz-példák és paraméter-táblázatok Markdown-ban.
- Markdown jegyzeteket írniÍrjon strukturált jegyzeteket Markdown-ban, amelyeket a Notion-ba, az Obsidian-ba, a Bear-ba vagy bármely Markdown-alkalmazásba lehet beilleszteni.
- GitHub README írása Markdown-banVázlat és előnézet a GitHub tárház README-jét élő Markdown renderelésével.
- Műszaki dokumentáció írásaAPI dokumentáció, wikik és műszaki útmutatók írása és előnézete Markdown-ban a közzétételés előtt.
- Blogbejegyzések írása Markdown-banBlogbejegyzések vázlata Markdown-ban a Ghost, Jekyll, Hugo, Hashnode és egyéb Markdown-alapú közzétételi platformokhoz.
Hogyan működik
Az előnézetet egy kézzel írt, közvetlenül az eszközbe épített Markdown-elemző rendereli — nincs marked, nincs remark, nincs külső könyvtár. Sorról sorra tokenizálja a forrást a böngészőben, a szintaxist HTML-lé alakítva, amelyet ezután egy sanitizer (tisztító) dolgoz fel megjelenítés előtt.
- 1Soronkénti tokenizálásAz egyedi renderMarkdown függvény újsorok mentén bontja a forrást, és egyetlen menetben halad végig rajtuk, sorrendben illesztve a kódblokkokat, a fejléceket (H1–H6), az idézeteket, a rendezett és rendezetlen listákat, a GFM táblázatokat (oszlopigazítással), a vízszintes vonalakat és a bekezdéseket.
- 2Beágyazott szintaxis kibontásaMinden összegyűjtött sort vagy cellát ezután az inlineMarkdown dolgozza fel, egy reguláris kifejezés-lánc, amely kezeli a félkövér (** és __), dőlt (* és _), félkövér-dőlt (***), áthúzott (~~), inline kódot, képeket () és linkeket ([szöveg](url)) — a képek feldolgozása a linkek előtt történik, hogy a ! előtag ne vesszen el helytelenül.
- 3Tisztítás (sanitization) és távoli erőforrások blokkolásaA renderer által előállított nyers HTML egy tisztítón (sanitize-html) megy keresztül, amely eltávolítja a nem biztonságos elemeket és attribútumokat, például a <script>, onerror kezelőket és javascript: hivatkozásokat. Egy második lépés (neutralizeRemote) alapértelmezésben helyettesítő értékekkel cseréli le a távoli kép src értékeit, megakadályozva, hogy az előnézet engedélyed nélkül csendben külső szerverekhez kapcsolódjon.
- 4Exportálás .md vagy önálló .html fájlkéntA Markdown másolása vagy letöltése a nyers forrásszöveget írja ki. A HTML letöltése a tisztított kimenetet egy önálló, saját beágyazott stíluslappal rendelkező dokumentumba csomagolja — a Tailwind osztályok csak az oldalon belül működnek, ezért az export sima CSS-szabályokat tartalmaz helyette, így a fájl bárhol olvasható.
Kapcsolódó eszközök
HTML–Markdown konvertáló
Alakíts HTML-t tiszta Markdownná. Kezeli a fejléceket, listákat, linkeket, képeket, kódblokkokat, táblázatokat és idézeteket. Tökéletes tartalom CMS-ekből való kimozgatásához.
Próbálja ki
Markdown–HTML konvertáló
Alakíts Markdownt tiszta HTML-lé élő előnézettel. Használd a forrás nézetet a blogokba, CMS-ekbe vagy e-mail sablonokba beilleszthető HTML másolásához.
Próbálja ki
Mermaid-diagramszerkesztő
Írj folyamatábrákat, szekvenciadiagramokat, Gantt-diagramokat és egyebeket Mermaid szintaxisban élő előnézettel. Exportálj SVG vagy PNG formátumban. Teljes egészében a böngésződben fut.
Próbálja ki