Převodník z Markdownu do HTML

Převodník Markdown do HTML bere nejběžnější postup tvorby obsahu na moderním webu — psaní v Markdownu, publikování jako HTML — a činí jej okamžitým. Vložte jakýkoli Markdown do levého panelu a pravý panel zobrazí vyrenderované HTML v reálném čase. Žádné odesílání na server, žádná registrace, žádné nahrávání souborů: marked.js běží zcela ve vašem prohlížeči a převádí Markdown na čisté HTML během milisekund. Použijte jej pro jednorázový převod README, náhled konceptu blogu, migraci CMS mezi platformami s různými dialekty Markdownu nebo rychlé ověření správnosti syntaxe před odesláním do generátoru statických stránek. Podporuje plnou specifikaci CommonMark plus rozšíření GitHub Flavored Markdown (tabulky, seznamy úkolů, přeškrtnutí, automatické odkazy) — což znamená, že to, co funguje na GitHubu, bude fungovat i zde bez překvapení.

Krok 1: Vložte text v Markdownu do levého vstupního panelu. Převodník přijme jakoukoli délku od jediného řádku po tisíce řádků obsahu. Funguje standardní syntaxe CommonMark: `#` pro nadpisy, `*text*` pro kurzívu, `text` pro tučné písmo, `` `kód` `` pro vložený kód, `[odkaz](url)` pro odkazy, `-` nebo `*` pro položky neuspořádaného seznamu, `1.` pro číslované seznamy, `>` pro citace, tři zpětné uvozovky pro ohraničené bloky kódu. Krok 2: Sledujte, jak pravý panel vykresluje HTML v reálném čase, jak píšete nebo vkládáte. Tabulky se zobrazují se správnými okraji, nadpisy získávají automaticky generované atributy `id` (pro kotevní odkazy), bloky kódu zachovávají značky jazyka a vložené HTML prochází beze změn. Krok 3: Kliknutím na Kopírovat HTML získáte čistý zdrojový kód HTML pro vložení do souboru `.html`, editoru rozbaleného textu v CMS nebo šablony statického webu. Kliknutím na Kopírovat vygenerované zkopírujete formátovaný pohled, pokud váš cíl podporuje formátovaný text (Word, Google Dokumenty, e-mailové editory).

Tento převodník má v základu povolené obojí. CommonMark (2014) je standardizovaná, jednoznačná specifikace Markdownu, která definuje přesné chování parseru — přijatá GitHubem, Redditem, Stack Overflow, Discourse a většinou moderních nástrojů. GitHub Flavored Markdown (GFM) rozšiřuje CommonMark o pět prvků: tabulky (řádky oddělené svislítky se zarovnáním), seznamy úkolů (`- [ ]` a `- [x]` pro zaškrtávací políčka), přeškrtnutí (`~~text~~`), automatické odkazy (neformátované URL se stanou klikatelnými bez explicitní syntaxe `[](url)`) a omezené čisté HTML (některé značky jsou filtrovány z bezpečnostních důvodů). Vzhledem k tomu, že soubory README na GitHubu jsou nejběžnějším zdrojem Markdownu na webu, je kompatibilita s GFM zásadní — tento převodník vykresluje přesně to, co vykresluje GitHub pro stejný vstup. Pokud potřebujete čistý výstup CommonMark (bez rozšíření GFM), můžete GFM vypnout v nabídce možností, ale výchozí nastavení funguje pro 95 % případů použití.

Tabulky GFM používají k definování sloupců znaky svislítka (`|`) a v oddělovacím řádku záhlaví pomlčky (`-`). Základní syntaxe: `| Jméno | Věk |\n|------|-----|\n| Alice | 30 |`. Zarovnání sloupců se kóduje v oddělovacím řádku: `-:` pro vpravo, `:-:` pro na střed, `:-` nebo `-` pro vlevo (výchozí). Příklad se zarovnáním: `| Nástroj | Rychlost | Zdarma |\n|:-----|------:|:----:|` vytvoří třísloupcovou tabulku s Nástrojem zarovnaným vlevo, Rychlostí vpravo a Zdarma na střed. Renderér výstupuje správné prvky `<table>`, ``, ``, `<tr>`, `<th>`, `<td>` s atributy inline `style="text-align:..."` pro zarovnání. Svislítka na začátku a konci každého řádku jsou volitelná, ale běžně se přidávají pro čitelnost. Šířky sloupců ve zdroji nemusí lícovat — parseru na vizuálním odsazení nezáleží.

Ohraničené bloky kódu používají k otevření a zavření tři zpětné uvozovky (nebo vlnovky): ```\nkód zde\n```. Po otevíracím ohraničení přidejte nápovědu jazyka, abyste umožnili zvýraznění syntaxe při publikování HTML: ```javascript nebo ```python nebo ```bash. Převodník vypisuje `<pre><code class="language-X">`, kde X je název jazyka. Samotný převodník neaplikuje barvy syntaxe — barvení provádí samostatná knihovna jako highlight.js, Prism.js nebo Shiki při vykreslení HTML na vaší stránce. Proč to rozdělovat? Knihovny pro zvýrazňování syntaxe mají každá 50–200 KB a výrazně zvyšují velikost stránky; převodník zůstává štíhlý tím, že vypisuje pouze značku jazyka a ponechává přidání barev na vašem publikačním řetězci. Běžné značky jazyků: javascript, typescript, python, java, csharp, go, rust, ruby, php, html, css, json, yaml, xml, bash, sql, markdown.

Rozhraní s rozděleným panelem — zdrojový Markdown vlevo, náhled HTML vpravo — je standardní pracovní postup pro technické pisatele a vývojáře. Umožňuje vám psát v lehkém, čitelném formátu Markdown a zároveň okamžitě vidět výsledek tak, jak bude publikován. V porovnání s editory WYSIWYG (Word, Google Dokumenty): Markdown se píše rychleji (žádné sahání po myši kvůli tlačítkům formátování), je verzovatelný (čistý text lze snadno porovnávat v Gitu), přenosný (funguje jakýkoli textový editor) a generuje čisté HTML bez zbytečně zanořených prvků div. Ve srovnání s přímým psaním HTML: Markdown je 3–5× rychlejší pro běžný obsah (nadpisy, odstavce, seznamy, odkazy), čte se přirozeně ve zdrojové podobě a odstraňuje rozhodování o formátování z procesu psaní. Používejte Markdown pro jakýkoli textově náročný obsah; na HTML přejděte pouze tehdy, když potřebujete detailní kontrolu nad prezentací.

Převodník výstupuje sémantické HTML5 — prvky, které popisují význam obsahu, nikoli pouze vzhled. Nadpisy se mění na `<h1>` až `<h6>` s automaticky generovanými atributy `id` pro kotevní odkazy. Odstavce se mění na `<p>`. Tučné písmo se mění na `<strong>` (ne `<b>`), kurzíva na `<em>` (ne `<i>`) — sémantické ekvivalenty, které lépe fungují s čtečkami obrazovky a cílením CSS. Neuspořádané seznamy se mění na `<ul><li>`, uspořádané seznamy na `<ol><li>`. Citace se mění na `<blockquote>`. Řádkový kód se mění na `<code>`, ohraničené bloky na `<pre><code>`. Odkazy se mění na `<a href>`. Obrázky se mění na `<img src alt>`. Výsledkem je čisté, přístupné HTML, které lze bez úprav vložit do jakéhokoli moderního CMS, generátoru statických stránek nebo souboru HTML. Žádné řádkové styly (kromě zarovnání tabulek), žádné obalové prvky `<div>` navíc, žádné atributy tříd (kromě značek jazyka v blocích kódu).

Soubory README jsou nejběžnějším zdrojem Markdownu na webu — každý repozitář na GitHubu jeden má, většina registrů balíčků (npm, PyPI, RubyGems) je vykresluje automaticky. Chcete-li převést README.md pro dokumentační web, vložte obsah souboru do převodníku a zkopírujte HTML výstup. Běžné úpravy po převodu: (1) Relativní odkazy — soubory README často používají relativní cesty (`./docs/install.md`); přepište je na absolutní URL pro publikovaný web. (2) Cesty k obrázkům — stejný problém, obrázky v README používají `./images/logo.png`; aktualizujte je na publikovanou URL obrázku. (3) ID kotev — automaticky generovaná ID nadpisů používají formát malých písmen a pomlček (`Installation` se změní na `id="installation"`); odpovídajícím způsobem aktualizujte interní kotevní odkazy. (4) Syntaxe specifická pro repozitář — GitHub automaticky odkazuje na hlášení problémů jako `#123` a zmínky uživatelů jako `@username`; ty se mimo GitHub automaticky neodkazují, v případě potřeby je přepište jako explicitní odkazy.

Generátory statických stránek (SSG) zpracovávají soubory Markdown do HTML stránek během sestavení, takže ruční převod obvykle není potřeba — uložíte soubory `.md` do repozitáře a SSG se postará o zbytek. Běžné SSG a jejich zpracování Markdownu: Jekyll (Ruby) výchozím způsobem používá kramdown, kompatibilní s CommonMark s některými prvkami GFM. Hugo (Go) používá Goldmark, plný CommonMark + GFM + rozšíření. Next.js MDX (JavaScript) používá remark/rehype a umožňuje vkládat komponenty React do Markdownu. Eleventy (JavaScript) výchozím způsobem používá markdown-it. Astro (JavaScript) používá remark a podporuje MDX. Gatsby (JavaScript) používá gatsby-plugin-mdx s remarkem. Tento převodník je nejužitečnější pro: (a) jednorázové převody mimo pracovní postup SSG, (b) ověření, že se váš Markdown vykresluje správně před odesláním, (c) migraci obsahu mezi SSG, které používají různé dialekty Markdownu.

Šest běžných úskalí. (1) Měkké zalomení řádků uvnitř odstavců — podle CommonMarku se jednotlivé nové řádky sloučí do mezer, nikoli na `<br>`. Pro explicitní zalomení použijte dvě mezery na konci řádku nebo prázdný řádek. (2) Odsazené bloky kódu (odsazení 4 mezerami) vs. ohraničené (tři zpětné uvozovky) — fungují obojí, ale doporučují se ohraničené, protože zachovávají značky jazyka. (3) Zanořené seznamy se špatným odsazením — CommonMark vyžaduje 2 nebo 4 mezery, míchání tabulátorů a mezer rozbíjí vykreslování na některých parserech. (4) Vložené HTML odstraněné přísnějšími renderery — GitHub a Reddit filtrují mnoho značek z bezpečnostních důvodů; to, co funguje v tomto převodníku, nemusí fungovat všude. (5) Nadpisy bez prázdného řádku před/za — většina parserů to toleruje, ale CommonMark doporučuje prázdné řádky pro přehlednost. (6) Přeškrtnutí s jednotlivými vlnovkami — jedna vlnovka nefunguje, jsou potřeba `~~dvě vlnovky~~`. Při řešení problémů zkontrolujte, jaký dialekt cílová platforma používá (CommonMark? GFM? něco vlastního?), než začnete předpokládat, že je převodník chybný.

Tento převodník běží ze 100 % ve vašem prohlížeči — váš text v Markdownu stránku nikdy neopustí. Serverové převodníky Markdownu obvykle zaznamenávají každý převod pro analytické účely a mohou vstup ukládat kvůli vyrovnávací paměti nebo sledování chyb. Pro většinu běžných převodů to není problém, ale vývojáři a techničtí redaktoři pravidelně vkládají obsah, který by neměl uniknout: API klíče v ukázkách kódu, interní dokumentaci, chráněné technické specifikace, koncepty příspěvků na blogu pod dohodou o mlčenlivosti (NDA) nebo zákaznická data v dokumentaci podpory. Převod na straně klienta riziko úniku zcela eliminují. Pro ověření stačí otevřít záložku Síť (Network) ve vývojářských nástrojích prohlížeče, vložit Markdown a kliknout na převést — během převodu neuvidíte žádné odchozí požadavky. Knihovna marked.js se načte pouze jednou při otevření stránky (což je vidět při počátečním načtení); poté probíhá veškerý převod lokálně. Pokud zpracováváte nedůvěryhodný vstup v Markdownu ze zdrojů třetích stran, před vložením vygenerovaného HTML do stránky použijte DOMPurify k jeho ošetření, abyste zabránili útokům typu XSS.

Rychlý přehled syntaxe. Nadpisy: `# H1` až `###### H6`. Tučné: `text`. Kurzíva: `*text*` nebo `_text_`. Tučné a kurzíva: `*text*`. Přeškrtnuté (GFM): `~~text~~`. Vložený kód: `` `kód` ``. Odkaz: `[text](https://url.com)`. Obrázek: ``. Automatický odkaz (GFM): `https://example.com` (čistá URL, bez závorek). Neuspořádaný seznam: `- položka`, `* položka` nebo `+ položka`. Uspořádaný seznam: `1. položka`. Vnořený seznam: odsazení o 2 mezery. Citace: `> citovaný text`. Víceřádková citace: předpona `>` na každém řádku. Ostrůvkový blok kódu (fenced code block): tři zpětné uvozovky (otevření a zavření) s volitelným označením jazyka. Odsazený blok kódu: 4 mezery nebo 1 tabulátor na začátku řádku. Vodorovná čára: `---` nebo `***` na samostatném řádku. Tabulka (GFM): `| sl1 | sl2 |\n|-----|-----|\n| hod1 | hod2 |`. Seznam úkolů (GFM): `- [ ] úkol` a `- [x] hotovo`. Přímý zápis HTML: jakýkoli HTML tag funguje přímo v textu. Pevný konec řádku: dvě mezery na konci. Smazání významu speciálního znaku (escape): zpětné lomítko před znakem, např. `\*není kurzíva\*`. Pokud si nejste jistí, použijte převodník — živý náhled vám přesně ukáže, jak se daný vzor zobrazí.