Převodník Markdown na HTML — Převádějte Markdown na HTML online _

Co je převod Markdown na HTML?

Markdown je lehký plain-text formát, který používá minimální interpunkci (# pro nadpisy, * pro důraz, - pro položky seznamu) k zakódování strukturované prózy. GitHub Flavored Markdown (GFM) rozšiřuje původní CommonMark spec o tabulky, přeškrtnutí, seznamy úkolů a automatické odkazy. HTML je vykreslená forma, kterou prohlížeč zobrazuje. Převod Markdown na HTML umožňuje psát v lehké syntaxi a doručovat na vykreslený povrch (README, stránka statického webu, tělo e-mailu) bez ručního psaní tagů.

Které GitHub Flavored Markdown funkce jsou podporovány?

Zabalený parser marked@12.0.2 podporuje celou GFM nadmnožinu: ATX-style nadpisy # až ######, uspořádané a neuspořádané seznamy s vnořením, tučné **text** a kurzíva *text*, přeškrtnutí ~~text~~, inline odkazy [text](url) a inline obrázky ![alt](src), ohraničené kódy s volitelnými jazykovými tagy (```js), inline kódové span `code`, tabulky s hlavičkami, GFM seznamy úkolů - [ ] / - [x], blokové citace >, horizontální pravidla --- a automatické odkazy. Každý se vykresluje v náhledovém panelu stejně, jako to vykresluje GitHub.

Jak funguje převod Markdown na HTML?

Každý převod probíhá lokálně ve vašem prohlížeči pomocí dvou zabalených knihoven — žádné CDN, žádné fetch, žádná telemetrie. Hlavní kroky jsou:

1. Parse: marked.parse(source) přečte váš Markdown a vytvoří HTML řetězec. Parser běží v GFM režimu, takže tabulky, seznamy úkolů, přeškrtnutí a automatické odkazy jsou všechny rozpoznány.
2. Sanitizace: HTML výstup je prohnán přes DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) před přiřazením do innerHTML. DOMPurify je stejný XSS sanitizer používaný Mozilla MDN, Atlassian a Microsoft 365 — parsuje HTML, prochází DOM a odstraňuje <script> elementy, všechny atributy obsluhy událostí on* a javascript: URI schémata.
3. Vykreslení: sanitizované HTML je zapsáno do náhledového panelu přes innerHTML a surové HTML je zobrazeno v druhém panelu přes read-only <textarea>, abyste mohli zkopírovat markup. Živý režim debounce vstup o 150 ms, takže náhled se aktualizuje při psaní bez přetěžování parseru.

Proč převádět Markdown na HTML s tímto nástrojem?

• Soukromí: každé parsování, sanitizace a vykreslení probíhá ve vašem prohlížeči. Váš Markdown (nevydané blogové příspěvky, interní návrhy dokumentace, důvěrný obsah README) se nikdy nedostane na naše servery.
• XSS-bezpečný standardně: vykreslený náhledový panel prohání každý HTML řetězec přes DOMPurify před innerHTML, takže zbloudilý <script> tag nebo obsluha onerror= uvnitř surového HTML ve vašem Markdown vytvoří inertní náhled. Surový panel zobrazuje nesantizovaný výstup pro kontrolu, sedící uvnitř <textarea> přes value — nikdy není spuštěn.
• GFM-kompletní: tabulky, přeškrtnutí, seznamy úkolů a automatické odkazy se vykreslují stejně, jako je vykresluje GitHub. Markdown pipe-table se stává HTML <table> s <thead> a <tbody> — žádné ztracené řádky, žádná zploštělá struktura.

Jaká jsou běžná použití převodu Markdown na HTML?

Přeměna Markdown na HTML se objevuje napříč dokumentací, statickým webem a psaním e-mailů:

• Psaní GitHub README: tvorba projektového README lokálně jako Markdown a náhled vykresleného HTML před pushnutím. Náhled odpovídá GFM rendereru GitHubu pro tabulky, seznamy úkolů a ohraničené kódy.
• Obsah statického webu: vložení Markdown příspěvku a získání HTML pro CMS pole nebo šablonovací engine, který očekává markup spíše než Markdown zdroj.
• E-mailové šablony: psaní těla transakčního e-mailu jako Markdown a převod na HTML pro šablonovací engine poskytovatele e-mailových služeb. Výstup je čisté sémantické HTML — žádné inline styly, žádné zvláštnosti e-mailových klientů.

Jak vypadá příklad převodu Markdown na HTML?

Vložení # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) vytvoří náhledový panel obsahující <h1>Title</h1>, dvou-položkový neuspořádaný seznam a <a href="https://example.com">link</a>. Surový panel zobrazuje přesný HTML řetězec, takže jej můžete zkopírovat přímo do šablony. Pipe-table s řádkem zarovnání |---|---| se stává plným <table> s <thead> a <tbody> — potvrzuje, že GFM tabulky se vykreslují stejně jako na GitHubu.

Běží tento převodník Markdown na HTML zcela v mém prohlížeči?

Ano. Každé parsování, sanitizace a vykreslení probíhá lokálně jako JavaScript uvnitř vaší záložky. Zabalené knihovny — marked@12.0.2 a DOMPurify@3.1.7 — jsou dodávány ze stejné domény jako stránka, takže není žádná CDN závislost, žádné fetch, žádné XMLHttpRequest, žádné navigator.sendBeacon na vstupu. Nástroj také funguje offline po načtení stránky, protože je to statický HTML/CSS/JS balíček s vendor knihovnami zkopírovanými vedle. Nevydané příspěvky, interní dokumenty a důvěrné README zůstávají na vašem zařízení.

Je vykreslený náhledový panel XSS-bezpečný?

Ano. Každý HTML řetězec přiřazený do innerHTML prochází nejprve přes DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify je open-source XSS sanitizer udržovaný Cure53; je to stejná knihovna používaná Mozilla MDN, Atlassian a Microsoft 365 k zabezpečení uživatelského HTML. Výchozí profil html odstraňuje <script> elementy, všechny atributy obsluhy událostí on* (onerror, onclick, atd.), javascript: URI schémata uvnitř href / src a známé nebezpečné CSS výrazy. Pokud váš Markdown vloží surové <img src=x onerror=alert(1)>, náhled, kde document.querySelector('#output-preview img[onerror]') vrací null a žádné alert se nespustí.

Jsou GFM tabulky podporovány?

Ano. Směr Markdown → HTML zpracovává pipe tables nativně přes GFM režim marked — hlavičkový řádek oddělený řádkem zarovnání |---|---|, následovaný datovými řádky, vytváří <table> s <thead> + <tbody>. Přeškrtnutí (~~text~~ → <del>text</del>) a seznamy úkolů (- [ ] / - [x] → <input type="checkbox">) se vykreslují stejně jako na GitHubu.

Převede se můj Markdown bezztrátově?

Pro kanonickou GFM sadu funkcí (nadpisy h1 až h6, uspořádané a neuspořádané seznamy s vnořením, tučné / kurzíva / přeškrtnutí, inline odkazy, inline obrázky, ohraničené kódy s jazykovými tagy, inline kódové span, pipe tables, seznamy úkolů, blokové citace, horizontální pravidla a automatické odkazy) je HTML výstup stabilní a odpovídá rendereru GitHubu. Pár chování stojí za zmínku: surové inline HTML uvnitř vašeho Markdown (např. <sub>text</sub>) prochází do výstupu nezměněno a CommonMark setext nadpisy (=== podtržení) i ATX nadpisy (# Title) oba produkují stejné <h1>. Toto jsou dokumentovaná chování marked, ne chyby. Pokud potřebujete opačný směr, převedení vykresleného HTML zpět na Markdown, použijte nástroj HTML na Markdown.

Je podporováno zvýraznění syntaxe v ohraničených kódech?

Ve v1 ne. Ohraničené kódy se vykreslují s neproporcionálním písmem a jemným pozadím, ale bez zvýraznění tokenů podle jazyka. Přidání zvýraznění syntaxe by vyžadovalo zabalení Prism nebo highlight.js, každý přidává 15–40 KB plus gramatický soubor na jazyk a matici témat, která by vyžadovala sladění s Workshop Terminal paletou. Prozatím se renderer zaměřuje na korektnost a XSS-bezpečnost; pokud bude uživatelský zájem o inline zvýraznění, přepínač opt-in je řešitelný follow-up.

Tento Převodník Markdown na HTML se dodává s marked@12.0.2 a DOMPurify@3.1.7 zabalenými na stejné doméně, podporuje celou GFM sadu funkcí a sanitizuje každý vykreslený HTML řetězec před tím, než se dotkne DOM. Žádné nahrávání, žádné CDN, žádná telemetrie — každý bajt zůstává ve vašem prohlížeči.