📝
Editor Markdownu zdarma
Pište a prohlížejte si Markdown v reálném čase. Podporuje nadpisy, tučné písmo, kurzívu, bloky kódu, tabulky a seznamy.
Funguje offline po načtení
88 slova · 538 znaky
Markdown
Náhled
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Vítejte v editoru Markdown</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Napište <strong>Markdown</strong> vlevo, podívejte se na náhled vpravo.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Funkce</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>Tučné</strong>, <em>kurzíva</em> a <del>přeškrtnuté</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">Řádkový kód</code> a blokově uzavřený kód</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">Odkazy</a></li><li class="my-0.5">Seznamy, citace, tabulky a další</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Příklad kódu</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 byl vytvořen Johnem Gruberem v roce 2004, aby se psaní pro web usnadnilo.</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">Funkce</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">Podporováno</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Nadpisy</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">Seznamy</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">Tabulky</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>
Přehled Markdown
# Heading 1H1
**bold**Tučné
*italic*Kurzíva
`code`Vložený kód
- itemOdrážkový seznam
1. itemČíslovaný seznam
> quoteCitace
[text](url)Odkaz
Obrázek
---Oddělovač
Běžná použití
- Psát dokumentaci API v MarkdownKoncepty popisů koncových bodů, příklady žádostí/odpovědí a tabulky parametrů v Markdown.
- Pořizujte poznámky MarkdownPsát strukturované poznámky v Markdown, které lze vkládat do Notion, Obsidian, Bear nebo jakékoli aplikace Markdown.
- Napsat GitHub README v MarkdownuVytváření a náhled vašeho README GitHub repozitáře se živým vykreslovacím Markdownu.
- Napsat Technickou dokumentaciNapsat a náhled API dokumentace, wikis a technických průvodců v Markdownu před publikováním.
- Napsat příspěvky na blogu v MarkdownuVytváření příspěvků na blogu v Markdownu pro Ghost, Jekyll, Hugo, Hashnode a další platformy vydávající Markdown.
Jak to funguje
Náhled vykresluje ručně napsaný parser Markdownu zabudovaný přímo do nástroje — bez marked, bez remark, bez externí knihovny. Tokenizuje zdroj řádek po řádku v prohlížeči, převádí syntaxi na HTML, které se poté před zobrazením předá přes sanitizér.
- 1Tokenizace řádek po řádkuVlastní funkce renderMarkdown rozdělí váš zdroj podle nových řádků a prochází je v jednom průchodu, přičemž prioritně porovnává ohraničené bloky kódu, nadpisy (H1–H6), bloky citací, řazené a neřazené seznamy, tabulky GFM (se zarovnáním sloupců), vodorovné čáry a odstavce.
- 2Rozšíření vnořené syntaxeKaždý shromážděný řádek nebo buňka se poté zpracuje přes inlineMarkdown, řetězec nahrazování regulárními výrazy, který zpracovává tučné (** a __), kurzívu (* a _), tučné kurzívní (***), přeškrtnuté (~~), vložený kód, obrázky () a odkazy ([text](url)) — obrázky se řeší před odkazy, aby předpona ! nebyla nesprávně spotřebována.
- 3Sanitizace a blokování vzdálených zdrojůSurové HTML vytvořené vykreslovačem se předává přes sanitizér (sanitize-html), aby odstranil nebezpečné tagy a atributy jako <script>, obslužné rutiny onerror a odkazy javascript:. Druhý průchod (neutralizeRemote) standardně nahrazuje hodnoty src vzdálených obrázků zástupnými symboly, což zabraňuje tomu, aby náhled tiše kontaktoval externí servery, než se přihlásíte.
- 4Export jako .md nebo samostatné .htmlKopírování nebo stažení Markdownu zapisuje surový zdrojový text. Stažení HTML obaluje sanitizovaný výstup do samostatného dokumentu s vlastním vloženým stylopisem — třídy Tailwind fungují jen uvnitř webu, takže export místo toho zahrnuje obyčejná pravidla CSS, díky čemuž je soubor čitelný kdekoli.
Související nástroje
Převodník HTML na Markdown
Převeďte HTML na čistý Markdown. Zpracovává nadpisy, seznamy, odkazy, obrázky, bloky kódu, tabulky a blokové citace. Ideální pro přesun obsahu z CMS systémů.
Vyzkoušet
Převodník Markdownu na HTML
Převeďte Markdown na čisté HTML s živým náhledem. Použijte zdrojové zobrazení ke zkopírování HTML připraveného k vložení do blogů, CMS nebo e-mailových šablon.
Vyzkoušet
Editor diagramů Mermaid
Pište vývojové diagramy, sekvenční diagramy, Ganttovy diagramy a další v syntaxi Mermaid s živým náhledem. Exportujte jako SVG nebo PNG. Běží zcela ve vašem prohlížeči.
Vyzkoušet