Convertitore da Markdown a HTML
Converti Markdown in HTML nel tuo browser — GitHub Flavored Markdown completo, anteprima dal vivo, evidenziazione della sintassi. Esporta un frammento, un documento completo o HTML inline per le email. 100% privato, senza upload.
CSS personalizzato
Cos'è la conversione da Markdown a HTML?
La conversione da Markdown a HTML trasforma un documento di solo testo scritto in Markdown — con `#` per i titoli, `**grassetto**`, `- ` per gli elenchi e `[testo](url)` per i link — nell'HTML che browser, sistemi di gestione dei contenuti e client email mostrano davvero. Il Markdown è pensato per essere leggibile così com'è e facile da scrivere, ma un browser non capisce `# Titolo`; capisce <h1>Titolo</h1>. La conversione colma questo divario.
Dietro le quinte, un processore Markdown analizza prima il tuo sorgente in un albero della sintassi astratta (AST) — una rappresentazione strutturata in cui un titolo, un paragrafo, un elenco e un blocco di codice sono nodi distinti con il loro contenuto e i loro attributi. Poi serializza quell'albero in HTML, emettendo i tag corretti e il nesting. Lavorare attraverso un AST, anziché scambiare il testo con espressioni regolari, è ciò che permette al convertitore di gestire elenchi annidati, tabelle e HTML incorporato in modo corretto e prevedibile. Le due grammatiche riconosciute sono il CommonMark, lo standard preciso, e il GitHub Flavored Markdown (GFM), che lo estende con tabelle, elenchi di attività, barrato e autolink.
Il motivo per cui converti è che quasi ogni destinazione di pubblicazione vuole HTML, non Markdown. Un generatore di siti statici, un campo rich-text di un CMS, un template email e una scheda del browser renderizzano tutti HTML. Quindi il flusso di lavoro tipico è scrivere nel comodo Markdown — un README, documentazione, una bozza di articolo, appunti — e convertire in HTML al momento della pubblicazione. Questo strumento esegue quella conversione localmente e mostra un'anteprima dal vivo, così vedi il risultato renderizzato e puoi copiare l'HTML esatto nella forma che ti serve: un frammento, una pagina completa o markup con stili inline pronto per le email.
L'operazione inversa — da HTML a Markdown — è altrettanto utile quando stai migrando contenuti web esistenti in un sistema basato su Markdown. Per questo, passa alla scheda HTML → Markdown o apri il convertitore da HTML a Markdown dedicato.
Markdown in:
# Release Notes
We shipped **tables** and `code`:
| Feature | Status |
| ------- | ------ |
| GFM | Done |
- [x] Parse to an AST
- [ ] Profit
HTML out:
<h1>Release Notes</h1>
<p>We shipped <strong>tables</strong> and <code>code</code>:</p>
<table>
<thead><tr><th>Feature</th><th>Status</th></tr></thead>
<tbody><tr><td>GFM</td><td>Done</td></tr></tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> Parse to an AST</li>
<li class="task-list-item"><input type="checkbox" disabled> Profit</li>
</ul> Caratteristiche principali
Anteprima dal vivo a pannelli affiancati
Digita Markdown a sinistra e guardalo renderizzato a destra in tempo reale, con l'output HTML che si costruisce sotto man mano che procedi. L'anteprima viene renderizzata in un iframe sandboxed, così quello che vedi è ciò che mostrerà un browser — e gli script incollati non possono girare.
GitHub Flavored Markdown completo
Non solo CommonMark — l'intero superset GFM: tabelle con pipe, elenchi di attività (`- [x]`), barrato (`~~`), URL trasformati automaticamente in link e blocchi di codice recintati. Un README o un'issue scritti per GitHub vengono renderizzati qui esattamente come lì.
Evidenziazione della sintassi
Etichetta un blocco di codice recintato con il suo linguaggio (```js, ```python, ```sql) e il convertitore lo evidenzia, avvolgendo i token in span con una classe di linguaggio sull'elemento <code>. Abbinalo a un foglio di stile di evidenziazione sulla tua pagina per il colore.
Tre formati di output
Esporta un frammento HTML (markup del corpo per un template o un CMS), un documento completo (una pagina autonoma salvabile come .html) o HTML Email inline con gli stili spostati su ogni elemento così Outlook e altri client lo renderizzano correttamente.
Pannello CSS personalizzato
Inietta il tuo CSS nell'anteprima dal vivo per adattarti alla tipografia di un sito o imitare lo stile README di GitHub. Scrivi regole come h1 { color: #0969da; } e l'anteprima si aggiorna all'istante, senza toccare l'HTML pulito che copi fuori.
Promemoria della sintassi GFM
Un riferimento rapido per la sintassi che produce HTML: `# H1` → titolo, `**grassetto**` → <strong>, `*corsivo*` → <em>, `- voce` → elenco, `1. voce` → elenco ordinato, `[testo](url)` → link, `` `codice` `` → codice inline, ` ```lang ` → codice recintato, `> citazione` → blockquote, `| a | b |` → tabella, `- [ ]` → elenco di attività, `~~testo~~` → barrato.
100% privato, nel browser
Ogni conversione gira localmente con JavaScript — il tuo Markdown e l'HTML non lasciano mai il tuo dispositivo, non raggiungono mai un server e funzionano senza connessione dopo il caricamento della pagina. Sicuro per documentazione non pubblicata, README interni e note di rilascio sotto embargo.
Esempi
Tabella GFM in una <table> HTML
| Strumento | Velocità | | --------- | -------- | | GFM | Veloce |
<table> <thead><tr><th>Strumento</th><th>Velocità</th></tr></thead> <tbody><tr><td>GFM</td><td>Veloce</td></tr></tbody> </table>
Le tabelle con pipe del GitHub Flavored Markdown non fanno parte del CommonMark puro, ma questo convertitore le riconosce ed emette una <table> semantica corretta con <thead> e <tbody> — pronta da stilizzare o da inserire in un CMS.
Elenco di attività in HTML con caselle di spunta
- [x] Scrivi il README - [ ] Convertilo in HTML
<ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" checked disabled> Scrivi il README</li> <li class="task-list-item"><input type="checkbox" disabled> Convertilo in HTML</li> </ul>
La sintassi GFM degli elenchi di attività `- [x]` / `- [ ]` diventa vere caselle di spunta disabilitate, esattamente come GitHub renderizza una checklist — così un README copiato appare uguale sulla tua pagina.
Blocco di codice recintato in <pre><code> evidenziato
```js const html = md.render(src) ```
<pre><code class="language-js"><span class="hljs-keyword">const</span> html = md.render(src) </code></pre>
Aggiungi un linguaggio dopo i backtick di apertura e il convertitore applica l'evidenziazione della sintassi, avvolgendo i token in span con una classe language-js sull'elemento <code>. Abbinalo a un foglio di stile di evidenziazione e il codice si colora.
Un README in un documento HTML completo
# Il Mio Progetto Una breve descrizione e un [link](https://example.com).
<!doctype html> <html lang="it"> <head><meta charset="utf-8"><title>Il Mio Progetto</title></head> <body> <h1>Il Mio Progetto</h1> <p>Una breve descrizione e un <a href="https://example.com">link</a>.</p> </body> </html>
Cambia l'output su Documento completo e il convertitore avvolge l'HTML renderizzato in una pagina completa con un <head> e il charset — un file .html autonomo che puoi aprire in qualsiasi browser o scaricare direttamente.
Come convertire Markdown in HTML
- 1
Digita o incolla il tuo Markdown
Inserisci il tuo Markdown — un README, note di rilascio, il corpo di un'issue — nel pannello di input. È supportato l'intero GitHub Flavored Markdown: tabelle, elenchi di attività, barrato, autolink e blocchi di codice recintati. L'anteprima dal vivo e l'output HTML si aggiornano mentre scrivi, tutto nel tuo browser.
- 2
Scegli un formato di output
Scegli Frammento HTML per incollare in un template o in un CMS, Documento completo per una pagina .html autonoma, o Email inline per HTML con stili inline che sopravvive a Outlook. Aggiungi tag di linguaggio ai blocchi di codice per l'evidenziazione della sintassi e usa il pannello CSS personalizzato per stilizzare l'anteprima.
- 3
Copia o scarica
Clicca Copia per prendere l'HTML, o Scarica per salvarlo come file. Per invertire la conversione, passa alla scheda HTML → Markdown e incolla il tuo HTML per riottenere Markdown pulito.
Insidie comuni
HTML senza escape ingoiato nella prosa
Il Markdown lascia passare l'HTML grezzo, quindi una parentesi angolare che intendevi come testo — come scrivere di un <Component> o di un generico List<T> — viene analizzata come tag HTML e sparisce dall'output. Effettua l'escape della parentesi con una barra rovesciata o un'entità HTML, oppure avvolgi il testo in uno span di codice così viene reso letteralmente.
Usa il componente <Header> per avvolgere le pagine. <!-- <Header> viene analizzato come tag e svanisce -->
Usa il componente `<Header>` per avvolgere le pagine. <!-- i backtick lo mantengono letterale: renderizza <Header> -->
Pipe della tabella disallineate o malformate
Una tabella GFM ha bisogno di una riga di intestazione, una riga delimitatrice di trattini e almeno un pipe per riga. Dimenticare la riga delimitatrice, o avere un numero di colonne diverso da quello dell'intestazione, rompe la tabella — ricade in un semplice paragrafo di pipe. Le celle non devono allinearsi visivamente, ma ogni riga deve avere lo stesso numero di colonne.
| Nome | Ruolo | | Alice | Admin | <!-- nessuna riga delimitatrice |---|---|: non è una tabella -->
| Nome | Ruolo | | ---- | ----- | | Alice | Admin | <!-- riga delimitatrice presente: renderizza una tabella -->
Blocco di codice senza linguaggio
Un blocco di codice recintato senza stringa informativa di linguaggio viene reso come un <pre><code> senza classe di linguaggio, quindi non riceve alcuna evidenziazione della sintassi. Il codice appare comunque, solo monocromatico. Aggiungi il linguaggio subito dopo i backtick di apertura per abilitare l'evidenziazione; uno spazio tra i backtick e il nome la disabilita.
``` const x = 1 ``` <!-- nessun linguaggio → nessuna evidenziazione -->
```js const x = 1 ``` <!-- language-js → evidenziato -->
Usare un frammento dove serve un documento completo
Copiare l'output del frammento HTML e salvarlo direttamente come file .html produce una pagina senza doctype, senza charset e senza <html>/<head>/<body>. I browser spesso la renderizzano comunque, ma la modalità quirks e il charset mancante possono rompere i caratteri accentati e il layout. Quando l'HTML deve essere autonomo, passa al formato Documento completo.
<h1>Titolo</h1> <p>Salvato come page.html — nessun doctype, nessun charset.</p>
<!doctype html> <html lang="it"><head><meta charset="utf-8"><title>Titolo</title></head> <body><h1>Titolo</h1><p>Pagina completa e autonoma.</p></body></html>
Casi d'uso comuni
- Pubblica in un sito statico o in un CMS
- Scrivi i tuoi contenuti in Markdown, converti in un frammento HTML e incollalo in un template di sito statico o in un campo rich-text di un CMS. Ottieni markup semantico pulito — titoli, elenchi, tabelle — senza che la pagina che lo avvolge intralci.
- Visualizza un README in anteprima prima del push
- Incolla il tuo README.md e guarda l'anteprima dal vivo renderizzarlo con GFM completo — tabelle, elenchi di attività, codice recintato — così individui una tabella rotta o un blocco di codice mancante prima del commit, non dopo che GitHub lo ha mostrato al mondo.
- Trasforma appunti in una pagina web condivisibile
- Appunti di una riunione, un documento di design o una bozza scritta in Markdown diventano una pagina HTML completa con un clic. Scegli Documento completo, scarica il file .html e hai qualcosa che puoi aprire in qualsiasi browser o ospitare ovunque.
- Crea HTML con stili inline sicuro per le email
- I client email rimuovono i blocchi <style>, quindi scrivi il tuo messaggio in Markdown ed esporta il formato Email inline, che sposta il CSS su ogni elemento come attributo style. Il risultato viene renderizzato correttamente in Outlook e in altri client che ignorano gli stili a livello di documento.
- Converti un file .md in un file .html scaricabile
- Ti serve una versione HTML autonoma e senza connessione di un documento Markdown? Incollalo, scegli Documento completo e clicca Scarica — ottieni un file .html autonomo con un doctype e un charset corretti, senza bisogno di alcuno strumento di build o riga di comando.
- Incorpora documentazione renderizzata in un'app
- Stai generando documentazione, changelog o contenuti di aiuto da Markdown memorizzato nel tuo repository? Usa questo strumento per vedere esattamente quale HTML produce un dato sorgente Markdown, così puoi far corrispondere il renderer della tua app e stilizzare l'output perché si adatti.
Dettagli tecnici
- CommonMark vs GitHub Flavored Markdown
- Il CommonMark è la specifica Markdown rigorosa e non ambigua che definisce esattamente come si analizzano titoli, enfasi, elenchi, link e blocchi di codice. Il GitHub Flavored Markdown (GFM) è un superset rigoroso: mantiene tutto ciò che il CommonMark definisce e aggiunge quattro estensioni — tabelle con pipe, elementi di elenco di attività (`- [x]`), barrato (`~~testo~~`) e URL nudi trasformati automaticamente in link. Poiché il GFM aggiunge soltanto funzionalità, qualsiasi documento CommonMark valido è anche GFM valido. Questo convertitore implementa il superset GFM, così i documenti scritti per l'una o l'altra grammatica vengono renderizzati correttamente.
- Rendering sandboxed sicuro rispetto agli XSS
- Il Markdown permette intenzionalmente HTML grezzo incorporato, il che significa che un documento Markdown può contenere un tag <script> o un gestore di eventi come onerror. L'anteprima dal vivo si difende renderizzando dentro un <iframe sandbox=""> con lo scripting disabilitato, così il contenuto attivo nel tuo input non può girare mentre lo visualizzi in anteprima — importante quando stai convertendo Markdown da una fonte non affidabile. L'HTML serializzato che lo strumento produce è la resa fedele del tuo input; se prevedi di pubblicare HTML derivato da Markdown non affidabile, passalo attraverso un sanificatore come DOMPurify sul tuo server prima di servirlo.
- Compatibilità dell'HTML per le email
- L'HTML delle email viene renderizzato da un mosaico di motori dal supporto CSS notoriamente limitato. Outlook su Windows usa il motore di rendering di Word e ignora i blocchi <style> nell'head del documento, quindi qualsiasi stile basato su classi sparisce silenziosamente; l'approccio affidabile sono gli attributi style inline su ogni elemento, che è ciò che produce l'output Email inline. Le immagini sono un'altra trappola: molti client bloccano le immagini remote finché il destinatario non acconsente, quindi incorporare immagini piccole come data URI le renderizza subito, mentre immagini remote grandi potrebbero non apparire affatto. Mantieni il markup semplice e collaudalo sui client di destinazione.
- Evidenziazione sincrona nel browser
- Quando un blocco di codice recintato porta una stringa informativa di linguaggio (```js), il convertitore esegue un evidenziatore sincrono sul suo contenuto, tokenizzando il sorgente e avvolgendo ogni token in uno <span> con una classe come hljs-keyword o hljs-string, più una classe language-js sull'elemento <code>. L'evidenziazione è solo strutturale — aggiunge classi, non colori — quindi la pagina di destinazione ha bisogno di un foglio di stile di evidenziazione corrispondente per renderizzare la palette. Poiché gira in modo sincrono nel browser, l'HTML evidenziato appare nell'istante in cui digiti, senza alcuna chiamata di rete.
Buone pratiche
- Scegli il formato di output per la destinazione
- Adatta il formato al punto in cui l'HTML è diretto. Un campo CMS o un template ha già una pagina che lo avvolge, quindi incolla un frammento HTML. Un file che vuoi aprire direttamente in un browser ha bisogno di un documento completo con doctype e charset. Un'email ha bisogno di Email inline così gli stili sopravvivono ai client che rimuovono i blocchi <style>. Incollare la forma sbagliata è l'errore evitabile più comune.
- Etichetta sempre i blocchi di codice con un linguaggio
- Scrivi il linguaggio subito dopo i backtick di apertura — ```js, ```python, ```sql — senza spazi, così il convertitore può evidenziare il blocco e aggiungere la classe di linguaggio corretta. Un blocco recintato nudo produce codice senza stile né evidenziazione. Usa un linguaggio che l'evidenziatore riconosce; un nome sconosciuto o scritto male ricade su testo semplice.
- Sanifica prima di pubblicare Markdown non affidabile
- L'anteprima è sandboxed, ma l'HTML che lo strumento emette è una resa fedele — incluso qualsiasi HTML grezzo o <script> nell'input. Se quel Markdown proveniva da utenti o da un'altra fonte non affidabile e intendi servire il risultato ad altre persone, passa prima l'HTML attraverso un sanificatore come DOMPurify sul tuo server. La sandbox protegge te durante la conversione, non i tuoi visitatori dopo la pubblicazione.
- Mantieni l'HTML delle email semplice e inline
- Per le email, preferisci il formato Email inline, mantieni il tuo layout semplice ed evita le funzionalità CSS che Outlook e altri client scartano. Incorpora le immagini piccole come data URI così vengono renderizzate anche quando le immagini remote sono bloccate, e inviati sempre un test prima di un invio più ampio — il rendering delle email è la destinazione meno tollerante che l'HTML abbia.
- Effettua l'escape dei caratteri HTML letterali nel testo
- Se vuoi che un < o un & letterale appaia come testo anziché essere interpretato come tag o entità, effettuane l'escape con una barra rovesciata (\<) o un'entità HTML (<). Il Markdown lascia passare l'HTML grezzo, quindi un <example> senza escape nella prosa può essere ingoiato come tag sconosciuto e svanire dall'output renderizzato.
Domande frequenti
Supporta il GitHub Flavored Markdown (GFM)?
Come ottengo HTML con stili inline sicuro per le email?
Qual è la differenza tra un frammento HTML e un documento completo?
L'HTML renderizzato è sicuro da visualizzare in anteprima rispetto agli XSS?
Posso aggiungere il mio CSS all'anteprima?
I miei file o il mio testo vengono caricati su un server?
Funziona senza connessione?
Come converto un file Markdown (.md) in un file HTML?
Perché il mio blocco di codice non è evidenziato?
Posso riconvertire l'HTML in Markdown?
Strumenti correlati
Vedi tutti gli strumenti →Decodificatore e codificatore Base64
Codifica e formattazione
Decodifica e codifica Base64 online gratis. Conversione in tempo reale con pieno supporto UTF-8 ed emoji. 100% privato — gira nel tuo browser. Nessuna registrazione.
Convertitore da Base64 a immagine
Codifica e formattazione
Decodifica una stringa Base64 o un data URI in un'immagine nel tuo browser. Anteprima, dimensioni e MIME, poi scarica come PNG, JPG, GIF, SVG. Nessun upload.
Convertitore CSV in JSON
Codifica e formattazione
Converti CSV in JSON nel browser. RFC 4180, inferenza tipi, riga header, sicuro per big-int. 100% privato, nessun upload.
Convertitore da HTML a Markdown
Codifica e formattazione
Converti HTML in Markdown pulito nel tuo browser — tabelle GFM, elenchi di attività e link. Scegli titoli ATX/Setext e link inline o di riferimento. Ottimo per migrare contenuti o alimentare gli LLM. 100% privato.
Convertitore da immagine a Base64
Codifica e formattazione
Converti immagini in data URI Base64 nel tuo browser — PNG, JPG, GIF, WebP, SVG, ICO. Copia l'output HTML, CSS, Markdown e JSON. 100% privato, nessun upload.
JSON Diff (Confronta)
Codifica e formattazione
Confronta due file JSON istantaneamente nel browser. Evidenziazione affiancata, output JSON Patch RFC 6902, ignora campi rumorosi come timestamp e ID. 100% privato, nessun upload.