Convertor de Markdown în HTML

Convertorul din Markdown în HTML preia cel mai comun flux de lucru de scriere de pe web-ul modern — scrie în Markdown, publică ca HTML — și îl face instantaneu. Inserează orice text Markdown în panoul din stânga, iar panoul din dreapta afișează HTML-ul randat în timp real. Fără transferuri pe server, fără înregistrare, fără încărcare de fișiere: marked.js rulează în întregime în browserul tău, analizând Markdown-ul în HTML curat în milisecunde. Folosește-l pentru conversii punctuale de fișiere README, previzualizarea ciornelor de blog, migrarea CMS între platforme cu dialecte Markdown diferite sau verificarea rapidă că sintaxa ta este corectă înainte de a o trimite către un generator de site-uri statice. Acceptă specificația completă CommonMark plus extensiile GitHub Flavored Markdown (tabele, liste de sarcini, text tăiat, linkuri automate) — ceea ce înseamnă că ce funcționează pe GitHub va funcționa și aici fără surprize.

Pasul 1: Inserează textul tău Markdown în panoul de introducere din stânga. Convertorul acceptă orice lungime, de la o singură linie până la mii de linii de conținut. Sintaxa standard CommonMark funcționează: `#` pentru titluri, `*text*` pentru cursiv, `text` pentru îngroșat, `` `code` `` pentru cod în linie, `[link](url)` pentru linkuri, `-` sau `*` pentru elemente de listă neordonată, `1.` pentru liste ordonate, `>` pentru citate, trei caractere de accent grav pentru blocuri de cod delimitat. Pasul 2: Urmărește cum panoul din dreapta randează HTML în timp real pe măsură ce tastezi sau inserezi. Tabelele se afișează cu margini corespunzătoare, titlurile primesc atribute `id` generate automat (pentru linkuri de ancoră), blocurile de cod păstrează etichetele de limbaj, iar HTML-ul în linie trece mai departe. Pasul 3: Fă clic pe Copiere HTML pentru a prelua sursa HTML brută pentru a o insera într-un fișier `.html`, într-un editor de text îmbogățit CMS sau într-un șablon de site static. Farc clic pe Copiere randat pentru a copia vizualizarea formatată dacă ținta ta acceptă text îmbogățit (Word, Google Docs, compozitoare de e-mail).

Acest convertor le are pe ambele activate implicit. CommonMark (2014) este specificația Markdown standardizată și fără ambiguități care definește comportamentul exact al analizorului — adoptată de GitHub, Reddit, Stack Overflow, Discourse și majoritatea uneltelor moderne. GitHub Flavored Markdown (GFM) extinde CommonMark cu cinci elemente suplimentare: tabele (rânduri separate prin pipe cu aliniere), liste de sarcini (`- [ ]` și `- [x]` pentru căsuțe de selectare), text tăiat (`~~text~~`), linkuri automate (URL-urile brute devin clicabile fără sintaxa explicită `[](url)`) și HTML brut restricționat (unele etichete filtrate pentru securitate). Deoarece fișierele README de pe GitHub sunt cea mai comună sursă Markdown de pe web, compatibilitatea cu GFM este esențială — acest convertor randează exact ceea ce randează GitHub pentru aceeași intrare. Dacă ai nevoie de o ieșire pură CommonMark (fără extensii GFM), poți dezactiva GFM în meniul de opțiuni, dar valoarea implicită funcționează pentru 95% dintre cazurile de utilizare.

Tabelele GFM folosesc caractere pipe (`|`) pentru a defini coloanele și cratime (`-`) în rândul separatorului de antet. Sintaxă de bază: `| Nume | Vârstă |\n|------|-----|\n| Ana | 30 |`. Alinierea coloanelor este codificată în rândul separatorului: `-:` pentru dreapta, `:-:` pentru centru, `:-` sau `-` pentru stânga (implicit). Exemplu cu aliniere: `| Instrument | Viteză | Gratuit |\n|:-----|------:|:----:|` produce un tabel cu 3 coloane având instrumentul aliniat la stânga, viteza la dreapta și gratuitul la centru. Motorul de randare scoate elemente corespunzătoare `<table>`, ``, ``, `<tr>`, `<th>`, `<td>` cu atribute `style="text-align:..."` în linie pentru aliniere. Liniile verticale la începutul și sfârșitul fiecărui rând sunt opționale, dar adăugate frecvent pentru lizibilitate. Lățimile coloanelor din sursă nu trebuie să se alinieze — analizorului nu îi pasă de spațierea vizuală.

Blocurile de cod delimitat folosesc trei caractere de accent grav (sau tilde) pentru deschidere și închidere: ```\ncod aici\n```. Adaugă un indiciu de limbaj după delimitatorul de deschidere pentru a activa evidențierea sintaxei atunci când HTML-ul este publicat: ```javascript sau ```python sau ```bash. Convertorul generează `<pre><code class="language-X">` unde X este numele limbajului. Acest convertor nu aplică singur culorile de sintaxă — colorarea este realizată de o bibliotecă separată precum highlight.js, Prism.js sau Shiki atunci când HTML-ul este randat pe pagina ta. De ce această împărțire? Bibliotecile de evidențiere a sintaxei au fiecare între 50KB și 200KB și adaugă o greutate semnificativă paginii; convertorul rămâne suplu generând doar eticheta de limbaj și lăsând fluxul tău de publicare să adauge culorile. Etichete de limbaj comune: javascript, typescript, python, java, csharp, go, rust, ruby, php, html, css, json, yaml, xml, bash, sql, markdown.

Interfața cu panou divizat — sursa Markdown în stânga, previzualizarea HTML în dreapta — este fluxul de lucru standard de scriere pentru scriitorii tehnici și dezvoltatori. Îți permite să scrii în formatul Markdown ușor și lizibil, văzând imediat rezultatul cu aspect publicat. Comparativ cu editoarele WYSIWYG (Word, Google Docs): Markdown se scrie mai repede (fără căutarea butoanelor de formatare cu mouse-ul), poate fi controlat prin versiuni (diferențele de text simplu se văd curat în Git), este portabil (orice editor de text funcționează) și produce HTML curat fără div-uri imbricate umflate. Comparativ cu scrierea directă în HTML: Markdown este de 3-5 ori mai rapid pentru conținutul tipic (titluri, paragrafe, liste, linkuri), se citește în mod natural în formă de sursă și elimină deciziile de formatare din fluxul de scriere. Folosește Markdown pentru orice conținut bogat în text; treci la HTML doar atunci când ai nevoie de un control fin al prezentării.

Convertorul generează HTML5 semantic — elemente care descriu înțelesul conținutului, nu doar aspectul. Titlurile devin de la `<h1>` până la `<h6>` cu atribute `id` generate automat pentru legarea ancorelor. Paragrafele devin `<p>`. Textul îngroșat devine `<strong>` (nu `<b>`), cel cursiv devine `<em>` (nu `<i>`) — echivalente semantice care funcționează mai bine cu cititoarele de ecran și țintirea CSS. Listele neordonate devin `<ul><li>`, cele ordonate `<ol><li>`. Citatele devin `<blockquote>`. Porțiunile de cod devin `<code>`, blocurile delimitate devin `<pre><code>`. Linkurile devin `<a href>`. Imaginile devin `<img src alt>`. Rezultatul este un cod HTML curat și accesibil care se integrează în orice CMS modern, generator de site-uri statice sau fișier HTML fără modificări. Fără stiluri în linie (cu excepția alinierii tabelelor), fără containere `<div>` suplimentare, fără atribute de clasă (cu excepția etichetelor de limbaj de pe blocurile de cod).

Fișierele README sunt cea mai comună sursă Markdown de pe web — fiecare depozit GitHub are unul, iar majoritatea registrelor de pachete (npm, PyPI, RubyGems) le randează automat. Pentru a converti un fișier README.md pentru un site de documentație, inserează conținutul fișierului în convertor și copiază ieșirea HTML. Ajustări frecvente după conversie: (1) Linkuri relative — fișierele README folosesc adesea căi relative (`./docs/install.md`); rescrie-le ca URL-uri absolute pentru site-ul publicat. (2) Căi pentru imagini — aceeași problemă, imaginile din README folosesc `./images/logo.png`; actualizează la URL-ul imaginii publicate. (3) ID-uri de ancoră — ID-urile de titlu generate automat folosesc formatul cu litere mici și cratime (`Installation` devine `id="installation"`); actualizează linkurile de ancoră interne în mod corespunzător. (4) Sintaxă specifică depozitului — GitHub leagă automat referințele la probleme precum `#123` și mențiunile de utilizatori precum `@username`; acestea nu se leagă automat în afara GitHub, așa că rescrie-le ca linkuri explicite dacă este necesar.

Generatoarele de site-uri statice (SSG) procesează fișierele Markdown în pagini HTML în momentul construirii, așa că conversia manuală nu este de obicei necesară — trimiți fișiere `.md` în depozitul tău, iar SSG-ul se ocupă de restul. SSG-uri comune și modul în care gestionează Markdown: Jekyll (Ruby) folosește kramdown implicit, compatibil cu CommonMark cu o parte din GFM. Hugo (Go) folosește Goldmark, CommonMark complet + GFM + extensii. Next.js MDX (JavaScript) folosește remark/rehype, permițându-ți să încorporezi componente React în Markdown. Eleventy (JavaScript) folosește markdown-it implicit. Astro (JavaScript) folosește remark și acceptă MDX. Gatsby (JavaScript) folosește gatsby-plugin-mdx cu remark. Acest convertor este cel mai util pentru: (a) conversii punctuale în afara unui flux de lucru SSG, (b) verificarea faptului că Markdown-ul tău se randează corect înainte de trimitere, (c) migrarea conținutului între SSG-uri care folosesc dialecte Markdown diferite.

Șase probleme frecvente. (1) Întreruperi moi de linie în interiorul paragrafelor — liniile noi simple se comprimă în spații conform CommonMark, nu în `<br>`. Folosește două spații finale sau o linie goală pentru o întrerupere explicită. (2) Blocuri de cod indentate (indentare de 4 spații) vs delimitate (trei caractere de accent grav) — ambele funcționează, dar cele delimitate sunt recomandate deoarece păstrează etichetele de limbaj. (3) Liste imbricate cu indentare greșită — CommonMark necesită 2 sau 4 spații, iar combinarea taburilor și a spațiilor strică randarea pe unele motoare de analiză. (4) HTML în linie eliminat de motoarele de randare mai stricte — GitHub și Reddit filtrează multe etichete pentru securitate; ceea ce funcționează în acest convertor s-ar putea să nu funcționeze peste tot. (5) Titluri fără linie goală înainte/după — majoritatea motoarelor de analiză le tolerează, dar CommonMark recomandă linii goale pentru claritate. (6) Text tăiat cu un singur semn tildă — tilda unică nu funcționează, este nevoie de `~~tilde duble~~`. Când depanezi, verifică ce dialect vorbește platforma țintă (CommonMark? GFM? ceva personalizat?) înainte de a presupune că acest convertor greșește.

Acest convertor rulează 100% în browserul tău — textul tău Markdown nu părăsește niciodată pagina. Convertoarele Markdown bazate pe server înregistrează de obicei fiecare conversie în scopuri analitice și pot stoca datele de intrare pentru cache sau monitorizarea erorilor. Pentru majoritatea conversiilor obișnuite acest lucru nu este o problemă, dar dezvoltatorii și scriitorii tehnici inserează în mod regulat conținut care nu trebuie să se scurgă: chei API în exemple de cod, documentație internă, specificații tehnice proprietare, ciorne de articole sub NDA, date ale clienților în documentația de asistență. Conversia pe partea de client elimină complet riscul de scurgere. Pentru a verifica: deschide fila Rețea din DevTools ale browserului, inserează textul Markdown, apasă pe conversie — vei vedea zero cereri trimise în exterior în timpul conversiei. Biblioteca marked.js se încarcă o singură dată când se deschide pagina (vizibil la încărcarea inițială a paginii); după aceea, toată conversia este locală. Pentru intrări Markdown nesigure din surse terțe, igienizează codul HTML randat cu DOMPurify înainte de a-l injecta într-o pagină pentru a preveni atacurile XSS.

Referință rapidă de sintaxă. Titluri: `# H1` până la `###### H6`. Text îngroșat: `text`. Italic: `*text*` sau `_text_`. Îngroșat+italic: `*text*`. Tăiat prin mijloc (GFM): `~~text~~`. Cod în linie: `` `code` ``. Link: `[text](https://url.com)`. Imagine: ``. Autolink (GFM): `https://example.com` (URL brut, fără paranteze pătrate). Listă neordonată: `- item` sau `* item` sau `+ item`. Listă ordonată: `1. item`. Listă imbricată: indentare cu 2 spații. Citat: `> citat text`. Citat pe mai multe linii: adaugă prefixul `>` la fiecare linie. Bloc de cod delimitat: trei accent grave (deschidere și închidere) cu etichetă opțională de limbaj. Bloc de cod indentat: 4 spații sau 1 tab la începutul liniei. Linie orizontală: `---` sau `***` pe propria linie. Tabel (GFM): `| col1 | col2 |\n|------|------|\n| val1 | val2 |`. Listă de sarcini (GFM): `- [ ] todo` și `- [x] done`. Trecere HTML: orice etichetă HTML funcționează în linie. Întrerupere de linie dură: două spații finale. Caracter de evadare special: bară inversă înainte, de ex. `\*not italic\*`. Folosește convertorul pentru orice caz care te confuzează — previzualizarea live arată exact cum se afișează fiecare șablon.