Markdown HTML Konverter — Markdown Átalakítása HTML-be Online _

Mi az a Markdown HTML-be konvertálás?

A Markdown egy könnyű, egyszerű szöveges formátum, amely minimális írásjeleket használ (# a címsorokhoz, * a kiemeléshez, - a lista elemekhez) a strukturált próza kódolásához. A GitHub Flavored Markdown (GFM) kiterjeszti az eredeti CommonMark specifikációt táblázatokkal, áthúzással, feladatlistákkal és automatikus linkekkel. A HTML a megjelenített forma, amelyet a böngésző megjelenít. A Markdown HTML-lé konvertálása lehetővé teszi, hogy a könnyű szintaxisban szerkessz, és a megjelenített felületre (README, statikus oldal, e-mail törzs) szállíts anélkül, hogy kézzel kellene megírnod a címkéket.

Mely GitHub Flavored Markdown funkciók támogatottak?

A mellékelt marked@12.0.2 elemző támogatja a teljes GFM szuperhalmazt: ATX stílusú címsorok #-tól ######-ig, rendezett és rendezetlen listák beágyazással, félkövér **szöveg** és dőlt *szöveg*, áthúzás ~~szöveg~~, inline linkek [szöveg](url) és inline képek ![alt](forrás), keretezett kódblokkok opcionális nyelvcímkékkel (```js), inline kódrészletek `kód`, csőtáblázatok fejléc sorokkal, GFM feladatlisták - [ ] / - [x], idézetek >, vízszintes elválasztók --- és automatikus linkek. Mindegyik ugyanúgy jelenik meg az előnézeti panelen, ahogy a GitHub megjeleníti.

Hogyan működik a Markdown HTML-be konvertálás?

Minden konvertálás helyben fut a böngésződben két mellékelt könyvtár segítségével — nincs CDN, nincs fetch, nincs telemetria. A magas szintű lépések:

1. Elemzés: a marked.parse(forrás) beolvassa a Markdown-odat, és előállít egy HTML karakterláncot. Az elemző GFM módban fut, így a táblázatok, feladatlisták, áthúzások és automatikus linkek mind felismerésre kerülnek.
2. Tisztítás: a HTML kimenet áthalad a DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) függvényen, mielőtt az innerHTML-hez rendelődne. A DOMPurify ugyanaz az XSS-tisztító, amelyet a Mozilla MDN, az Atlassian és a Microsoft 365 használ — elemzi a HTML-t, bejárja a DOM-ot, és eltávolítja a <script> elemeket, minden on* eseménykezelő attribútumot és javascript: URI séma.
3. Megjelenítés: a tisztított HTML az innerHTML-en keresztül az előnézeti panelre íródik, a nyers HTML pedig a második panelen jelenik meg egy írásvédett <textarea>-n keresztül, így átmásolhatod a jelölést. Az élő mód 150 ms-ra szűri a bemenetet, így az előnézet gépelés közben frissül anélkül, hogy túlterhelné az elemzőt.

Miért érdemes Markdown-t HTML-be konvertálni ezzel az eszközzel?

• Adatvédelem: minden elemzési, tisztítási és megjelenítési lépés a böngésződben történik. A Markdown-od (kiadatlan blogbejegyzések, belső dokumentációtervezetek, bizalmas README tartalom) soha nem éri el a szervereinket.
• Alapértelmezés szerint XSS-biztonságos: a megjelenített előnézeti panel minden HTML karakterláncot áthúz a DOMPurify-ön az innerHTML előtt, így egy eltévedt <script> címke vagy onerror= kezelő a Markdown-ban lévő nyers HTML-ben semleges előnézetet eredményez. A nyers panel a tisztítatlan kimenetet mutatja ellenőrzésre, egy <textarea>-n belül a value-n keresztül — soha nem kerül végrehajtásra.
• GFM-teljes: a táblázatok, áthúzások, feladatlisták és automatikus linkek mind úgy jelennek meg, ahogy a GitHub megjeleníti őket. Egy Markdown csőtáblázatból <table> lesz <thead> és <tbody> részekkel — nincs eldobott sor, nincs ellaposított szerkezet.

Mik a Markdown HTML-be konvertálás gyakori alkalmazásai?

A Markdown HTML-lé alakítása a dokumentáció, a statikus oldalak és az e-mail szerkesztés területén jelenik meg:

• GitHub README írás: egy projekt README helyi megfogalmazása Markdown-ban és a megjelenített HTML előnézete a push előtt. Az előnézet megegyezik a GitHub GFM megjelenítőjével a táblázatok, feladatlisták és keretezett kód esetében.
• Statikus oldal tartalom: egy Markdown bejegyzés beillesztése és a HTML kiemelése egy CMS mezőhöz vagy egy sablonmotorhoz, amely jelölést vár, nem Markdown forrást.
• E-mail sablonok: egy tranzakciós e-mail törzsének megírása Markdown-ban és konvertálása HTML-be az e-mail szolgáltató sablonmotorja számára. A kimenet egyszerű szemantikus HTML — nincsenek inline stílusok, nincsenek e-mail kliens furcsaságok.

Hogyan néz ki egy Markdown HTML-be példa?

A # Cím\n\n- elem 1\n- elem 2\n\n[link](https://example.com) beillesztése egy előnézeti panelt eredményez, amely <h1>Cím</h1>-t, egy kételemű rendezetlen listát és egy <a href="https://example.com">link</a>-et tartalmaz. A nyers panel a pontos HTML karakterláncot mutatja, így közvetlenül bemásolhatod egy sablonba. Egy csőtáblázat egy |---|---| igazítási sorral teljes <table>-vé válik <thead> és <tbody> részekkel — megerősítve, hogy a GFM táblázatok úgy jelennek meg, ahogy a GitHub megjeleníti őket.

Ez a Markdown HTML konverter teljes mértékben a böngészőmben fut?

Igen. Minden elemzési, tisztítási és megjelenítési lépés helyben fut JavaScriptként a böngészőlapodon belül. A mellékelt könyvtárak — marked@12.0.2 és DOMPurify@3.1.7 — ugyanarról a forrásról érkeznek, mint az oldal, így nincs CDN függőség, nincs fetch, nincs XMLHttpRequest, nincs navigator.sendBeacon a bemeneten. Az eszköz offline is működik, miután az oldal betöltődött, mert ez egy statikus HTML/CSS/JS csomag, a szállítói könyvtárakkal együtt. A kiadatlan bejegyzések, belső doksik és bizalmas README-k az eszközödön maradnak.

A megjelenített előnézeti panel XSS-biztonságos?

Igen. Minden az innerHTML-hez rendelt HTML karakterlánc először áthalad a DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) függvényen. A DOMPurify a Cure53 által karbantartott nyílt forráskódú XSS-tisztító; ez ugyanaz a könyvtár, amelyet a Mozilla MDN, az Atlassian és a Microsoft 365 használ a felhasználó által megadott HTML megerősítésére. Az alapértelmezett html profil eltávolítja a <script> elemeket, minden on* eseménykezelő attribútumot (onerror, onclick stb.), javascript: URI sémákat az href / src belsejében és ismerten veszélyes CSS kifejezéseket. Ha a Markdown-od beágyazott nyers <img src=x onerror=alert(1)>-et tartalmaz, az előnézetben a document.querySelector('#output-preview img[onerror]') null-t ad vissza, és nem indul el riasztás.

Támogatottak a GFM táblázatok?

Igen. A Markdown → HTML irány natívan kezeli a csőtáblázatokat a marked GFM módján keresztül — egy fejléc sor, amelyet egy |---|---| igazítási sor követ, majd adatsorok, <table>-t eredményez <thead> + <tbody> részekkel. Az áthúzás (~~szöveg~~ → <del>szöveg</del>) és a feladatlisták (- [ ] / - [x] → <input type="checkbox">) ugyanúgy jelennek meg, ahogy a GitHub megjeleníti őket.

A Markdown-om veszteségmentesen konvertálódik?

A kanonikus GFM funkciókészlethez (címsorok h1-től h6-ig, rendezett és rendezetlen listák beágyazással, félkövér / dőlt / áthúzás, inline linkek, inline képek, keretezett kódblokkok nyelvcímkékkel, inline kódrészletek, csőtáblázatok, feladatlisták, idézetek, vízszintes elválasztók és automatikus linkek) a HTML kimenet stabil és megegyezik a GitHub megjelenítőjével. Néhány viselkedés, amit érdemes tudni: a nyers inline HTML a Markdown-odon belül (pl. <sub>szöveg</sub>) változatlanul áthalad a kimenetre, és a CommonMark setext címsorok (=== aláhúzások) és ATX címsorok (# Cím) ugyanazt a <h1>-et eredményezik. Ezek dokumentált marked viselkedések, nem hibák. Ha a fordított irányra van szükséged, a megjelenített HTML visszahúzására Markdown-ba, használd a HTML Markdown-ba eszközt.

Támogatott a szintaxiskiemelés a keretezett kódblokkokban?

A v1-ben nem. A keretezett kódblokkok fix szélességű betűtípussal és halvány háttérrel jelennek meg, de nyelvspecifikus token kiemelés nélkül. A szintaxiskiemelés hozzáadásához be kellene csomagolni a Prism vagy highlight.js könyvtárat, amelyek mindegyike 15–40 KB-ot ad hozzá, plusz egy nyelvspecifikus nyelvtani fájlt és egy téma mátrixot, amelyet össze kellene hangolni a Workshop Terminal palettájával. Egyelőre a megjelenítő a helyességre és az XSS-biztonságra összpontosít; ha van felhasználói igény az inline kiemelésre, egy opcionális kapcsoló egy kezelhető következő lépés.

Ez a Markdown HTML Konverter a marked@12.0.2 és DOMPurify@3.1.7 könyvtárakkal együtt érkezik, amelyek ugyanarról a forrásról vannak becsomagolva, támogatja a teljes GFM funkciókészletet, és minden megjelenített HTML karakterláncot megtisztít, mielőtt az a DOM-hoz ér. Nincs feltöltés, nincs CDN, nincs telemetria — minden bájt a böngésződben marad.