§

Lipește Markdown

§

Brut

§

Previzualizare

Previzualizarea este sanitizată prin DOMPurify — tagurile script, gestionarii de evenimente și URI-urile javascript: sunt eliminate înainte de redare.

Markdown este lingua franca a documentației software americane și britanice. Fiecare README GitHub, răspuns Stack Overflow și comentariu Reddit trece printr-un parser Markdown, iar cele peste 100M+ postări ale dezvoltatorilor pe Stack Overflow se bazează pe CommonMark pentru o redare de încredere. Laboratoarele federale americane rulează conducte MkDocs și Sphinx care transformă fișierele sursă Markdown în portaluri de documentație statică, în timp ce creatorii de conținut GOV.UK redactează pagini de servicii în Markdown înainte de publicare. Notion, Obsidian și Bear oferă note prima facie Markdown pentru milioane de utilizatori americani și britanici, iar buletinele informative Substack compilează schițe Markdown în emailuri HTML. Transformarea Markdown-ului în HTML curat este o muncă zilnică pentru scriitori tehnici, întreținători de open-source și ingineri de platformă pe ambele piețe.

Ce este conversia Markdown în HTML?

Markdown este un format ușor de text simplu care folosește punctuație minimă (# pentru titluri, * pentru accent, - pentru elemente de listă) pentru a codifica proză structurată. GitHub Flavored Markdown (GFM) extinde specificația originală CommonMark cu tabele, text tăiat, liste de sarcini și linkuri automate. HTML este forma redată pe care browserul o afișează. Convertirea Markdown în HTML îți permite să scrii în sintaxa ușoară și să livrezi către o suprafață redată (un README, o pagină de site static, un corp de email) fără a scrie manual tagurile.

Ce funcții GitHub Flavored Markdown sunt suportate?

Parserul marked@12.0.2 inclus suportă supermulțimea completă GFM: titluri ATX # până la ######, liste ordonate și neordonate cu imbricare, bold **text** și italic *text*, text tăiat ~~text~~, linkuri inline [text](url) și imagini inline ![alt](src), blocuri de cod delimitate cu etichete opționale de limbaj (```js), porțiuni de cod inline `cod`, tabele cu conducte cu rânduri de antet, liste de sarcini GFM - [ ] / - [x], citate bloc >, reguli orizontale --- și linkuri automate. Fiecare se redă în panoul de previzualizare la fel cum le redă GitHub.

Cum funcționează conversia Markdown în HTML?

Fiecare conversie rulează local în browserul tău folosind două biblioteci incluse — fără CDN, fără fetch, fără telemetrie. Pașii principali sunt:

  1. Parsare: marked.parse(sursă) citește Markdown-ul tău și produce un șir HTML. Parserul rulează în modul GFM, astfel încât tabelele, listele de sarcini, textul tăiat și linkurile automate sunt toate recunoscute.
  2. Sanitizare: ieșirea HTML este procesată prin DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) înainte de a fi atribuită innerHTML-ului. DOMPurify este același sanitizator XSS folosit de Mozilla MDN, Atlassian și Microsoft 365 — parsează HTML-ul, parcurge DOM-ul și elimină elementele <script>, fiecare atribut de gestionare a evenimentelor on* și schemele URI javascript:.
  3. Redare: HTML-ul sanitizat este scris în panoul de previzualizare prin innerHTML, iar HTML-ul brut este afișat în al doilea panou printr-un <textarea> doar pentru citire, astfel încât să poți copia markup-ul. Modul live debouncează intrarea la 150 ms, astfel încât previzualizarea să se actualizeze pe măsură ce tastezi, fără a suprasolicita parserul.

De ce să convertești Markdown în HTML cu această unealtă?

  • Confidențialitate: fiecare pas de parsare, sanitizare și redare are loc în browserul tău. Markdown-ul tău (postări de blog nereleasate, schițe de documentație internă, conținut confidențial de README) nu ajunge niciodată la serverele noastre.
  • XSS-sigur implicit: panoul de previzualizare redat rulează fiecare șir HTML prin DOMPurify înainte de innerHTML, astfel încât un tag <script> rătăcit sau un gestionar onerror= din interiorul HTML-ului brut din Markdown-ul tău produce o previzualizare inertă. Panoul brut arată ieșirea nesanitizată pentru inspecție, stând într-un <textarea> prin value — niciodată executat.
  • GFM-complet: tabelele, textul tăiat, listele de sarcini și linkurile automate se redau toate la fel cum le redă GitHub. Un tabel Markdown cu conducte devine un <table> HTML cu <thead> și <tbody> — fără rânduri pierdute, fără structură aplatizată.

Care sunt aplicațiile comune ale conversiei Markdown în HTML?

Transformarea Markdown-ului în HTML apare frecvent în documentație, lucrul cu site-uri statice și redactarea de emailuri:

  • Redactare README GitHub: redactarea unui README de proiect local ca Markdown și previzualizarea HTML-ului redat înainte de a publica. Previzualizarea corespunde renderului GFM al GitHub pentru tabele, liste de sarcini și cod delimitat.
  • Conținut pentru site-uri statice: lipirea unei postări Markdown și extragerea HTML-ului pentru un câmp CMS sau un motor de șabloane care așteaptă markup în loc de sursă Markdown.
  • Șabloane de email: scrierea corpului unui email tranzacțional ca Markdown și convertirea în HTML pentru motorul de șabloane al furnizorului de servicii email. Ieșirea este HTML semantic simplu — fără stiluri inline, fără particularități de client email adăugate.

Cum arată un exemplu de conversie Markdown în HTML?

Lipirea # Titlu\n\n- element 1\n- element 2\n\n[link](https://example.com) produce un panou de previzualizare care conține <h1>Titlu</h1>, o listă neordonată cu două elemente și un <a href="https://example.com">link</a>. Panoul brut arată șirul HTML exact, astfel încât să îl poți copia direct într-un șablon. Un tabel cu conducte cu un rând de aliniere |---|---| devine un <table> complet cu <thead> și <tbody> — confirmând că tabelele GFM se redau la fel cum le redă GitHub.

Acest convertor Markdown în HTML rulează în întregime în browserul meu?

Da. Fiecare pas de parsare, sanitizare și redare rulează local ca JavaScript în fila browserului tău. Bibliotecile incluse — marked@12.0.2 și DOMPurify@3.1.7 — sunt livrate din aceeași origine ca pagina, deci nu există dependență de CDN, niciun fetch, niciun XMLHttpRequest, niciun navigator.sendBeacon pe intrare. Uneltele funcționează și offline odată ce pagina s-a încărcat, deoarece este un pachet static HTML/CSS/JS cu bibliotecile vendor copiate alături. Postările nereleasate, documentele interne și README-urile confidențiale rămân pe dispozitivul tău.

Este panoul de previzualizare redat sigur împotriva XSS?

Da. Fiecare șir HTML atribuit innerHTML-ului trece prin DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) mai întâi. DOMPurify este sanitizatorul XSS open-source întreținut de Cure53; este aceeași bibliotecă folosită de Mozilla MDN, Atlassian și Microsoft 365 pentru a întări HTML-ul furnizat de utilizator. Profilul implicit html elimină elementele <script>, fiecare atribut de gestionare a evenimentelor on* (onerror, onclick, etc.), schemele URI javascript: din href / src și expresiile CSS cunoscute ca periculoase. Dacă Markdown-ul tău încorporează <img src=x onerror=alert(1)> brut, previzualizarea unde document.querySelector('#output-preview img[onerror]') returnează null și nu se declanșează nicio alertă.

Tabelele GFM sunt suportate?

Da. Direcția Markdown → HTML gestionează nativ tabelele cu conducte prin modul GFM al marked — un rând de antet separat de un rând de aliniere |---|---|, urmat de rânduri de date, produce un <table> cu <thead> + <tbody>. Textul tăiat (~~text~~<del>text</del>) și listele de sarcini (- [ ] / - [x]<input type="checkbox">) se redau la fel cum le redă GitHub.

Se va converti Markdown-ul meu fără pierderi?

Pentru setul de funcții GFM canonic (titluri h1 până la h6, liste ordonate și neordonate cu imbricare, bold / italic / text tăiat, linkuri inline, imagini inline, blocuri de cod delimitate cu etichete de limbaj, porțiuni de cod inline, tabele cu conducte, liste de sarcini, citate bloc, reguli orizontale și linkuri automate), ieșirea HTML este stabilă și corespunde renderului GitHub. Câteva comportamente utile de știut: HTML-ul inline brut din interiorul Markdown-ului tău (de exemplu, <sub>text</sub>) trece în ieșire neschimbat, iar titlurile CommonMark setext (=== subliniere) și titlurile ATX (# Titlu) produc ambele același <h1>. Acestea sunt comportamente documentate ale marked, nu erori. Dacă ai nevoie de revers, transformarea HTML-ului redat înapoi în Markdown, folosește unealta HTML în Markdown.

Evidențierea sintaxei în blocurile de cod delimitate este suportată?

Nu în v1. Blocurile de cod delimitate se redau cu font monospațiat și un fundal subtil, dar fără evidențierea tokenurilor per limbaj. Adăugarea evidențierii sintaxei ar necesita includerea Prism sau highlight.js, fiecare adăugând 15–40 KB plus un fișier gramatical per limbaj și o matrice de teme care ar necesita alinierea cu paleta Terminal Workshop. Deocamdată, renderul se concentrează pe corectitudine și siguranță XSS; dacă există cerere din partea utilizatorilor pentru evidențiere inline, un comutator opțional este o urmărire realizabilă.

Acest Convertor Markdown în HTML include marked@12.0.2 și DOMPurify@3.1.7 din aceeași origine, suportă setul complet GFM și sanitizează fiecare șir HTML redat înainte de a atinge DOM-ul. Fără încărcare, fără CDN, fără telemetrie — fiecare octet rămâne în browserul tău.