Convertitore da Markdown a HTML

Il convertitore da Markdown a HTML prende il flusso di lavoro di creazione più comune del Web moderno — scrivi in Markdown, pubblica come HTML — e lo rende istantaneo. Incolla qualsiasi Markdown nel riquadro di sinistra e il riquadro di destra mostra l'HTML sottoposto a rendering in tempo reale. Nessun round-trip del server, nessuna registrazione, nessun caricamento di file: marked.js viene eseguito interamente nel tuo browser, analizzando il Markdown in HTML pulito in pochi millisecondi. Usalo per la conversione una tantum di README, l'anteprima di bozze di blog, la migrazione di CMS tra piattaforme con diversi dialetti Markdown o la verifica rapida della correttezza della sintassi prima di effettuare il commit su un generatore di siti statici. Supporta la specifica CommonMark completa più le estensioni GitHub Flavored Markdown (tabelle, elenchi di attività, barrato, link automatici), il che significa che ciò che funziona su GitHub funzionerà anche qui senza sorprese.

Passaggio 1: incolla il testo Markdown nel riquadro di input sinistro. Il convertitore accetta qualsiasi lunghezza, da una singola riga a migliaia di righe di contenuto. Funziona la sintassi CommonMark standard: `#` per le intestazioni, `*testo*` per il corsivo, `testo` per il grassetto, `` `codice` `` per il codice in linea, `[link](url)` per i collegamenti, `-` o `*` per gli elementi degli elenchi puntati, `1.` per gli elenchi numerati, `>` per le citazioni, triplo backtick per i blocchi di codice delimitati. Passaggio 2: guarda il riquadro destro eseguire il rendering dell'HTML in tempo reale mentre digiti o incolli. Le tabelle vengono renderizzate con bordi corretti, le intestazioni ottengono attributi `id` generati automaticamente (per i link ancora), i blocchi di codice preservano i tag di linguaggio e l'HTML in linea passa invariato. Passaggio 3: fai clic su Copia HTML per prelevare il codice sorgente HTML grezzo da incollare in un file `.html`, in un editor rich-text di un CMS o in un modello di sito statico. Fai clic su Copia renderizzato per copiare la vista formattata se la tua destinazione supporta il testo RTF (Word, Google Docs, editor di posta elettronica).

Questo convertitore li ha entrambi abilitati per impostazione predefinita. CommonMark (2014) è la specifica Markdown standardizzata e non ambigua che definisce il comportamento esatto del parser, adottata da GitHub, Reddit, Stack Overflow, Discourse e dalla maggior parte degli strumenti moderni. GitHub Flavored Markdown (GFM) estende CommonMark con cinque aggiunte: tabelle (righe separate da pipe con allineamento), elenchi di attività (`- [ ]` e `- [x]` per le caselle di controllo), testo barrato (`~~testo~~`), link automatici (gli URL grezzi diventano cliccabili senza la sintassi esplicita `[](url)`) e HTML grezzo limitato (alcuni tag filtrati per sicurezza). Poiché i README di GitHub sono la fonte Markdown più comune sul web, la compatibilità con GFM è essenziale: questo convertitore esegue il rendering esattamente di ciò che rende GitHub per lo stesso input. Se hai bisogno di un output CommonMark puro (senza estensioni GFM), puoi disattivare GFM nel menu delle opzioni, ma l'impostazione predefinita funziona per il 95% dei casi d'uso.

Le tabelle GFM utilizzano caratteri pipe (`|`) per definire le colonne e trattini (`-`) nella riga del separatore di intestazione. Sintassi di base: `| Nome | Età |\n|------|-----|\n| Alice | 30 |`. L'allineamento delle colonne è codificato nella riga del separatore: `-:` per destra, `:-:` per centro, `:-` o `-` per sinistra (predefinito). Esempio con allineamento: `| Strumento | Velocità | Gratuito |\n|:-----|------:|:----:|` produce una tabella a 3 colonne con Strumento allineato a sinistra, Velocità allineato a destra, Gratuito centrato. Il renderer emette elementi `<table>`, ``, ``, `<tr>`, `<th>`, `<td>` corretti con attributi `style="text-align:..."` in linea per l'allineamento. I pipe all'inizio e alla fine di ogni riga sono facoltativi ma comunemente aggiunti per leggibilità. Le larghezze delle colonne nel codice sorgente non devono allinearsi: al parser non importa della spaziatura visiva.

I blocchi di codice delimitati utilizzano tripli backtick (o tilde) per aprire e chiudere: ```\ncodice qui\n```. Aggiungi un suggerimento di linguaggio dopo la delimitazione di apertura per abilitare l'evidenziazione della sintassi quando l'HTML viene pubblicato: ```javascript o ```python o ```bash. Il convertitore produce `<pre><code class="language-X">` dove X è il nome del linguaggio. Questo convertitore non applica autonomamente i colori della sintassi; la colorazione viene eseguita da una libreria separata come highlight.js, Prism.js o Shiki quando l'HTML viene visualizzato sulla tua pagina. Perché dividere? Le librerie di evidenziazione della sintassi pesano ciascuna da 50 KB a 200 KB e aumentano significativamente il peso della pagina; il convertitore rimane leggero emettendo solo il tag del linguaggio e lasciando che la tua pipeline di pubblicazione aggiunga i colori. Tag di linguaggio comuni: javascript, typescript, python, java, csharp, go, rust, ruby, php, html, css, json, yaml, xml, bash, sql, markdown.

L'interfaccia a riquadri divisi — codice sorgente Markdown a sinistra, anteprima HTML a destra — è il flusso di lavoro di creazione standard per scrittori tecnici e sviluppatori. Ti consente di scrivere nel formato Markdown leggero e leggibile vedendo immediatamente il risultato dall'aspetto pubblicato. Rispetto agli editor WYSIWYG (Word, Google Docs): Markdown è più veloce da scrivere (non bisogna raggiungere con il mouse i pulsanti di formattazione), controllabile tramite versionamento (i file di solo testo si confrontano chiaramente in Git), portabile (funziona qualsiasi editor di testo) e produce HTML pulito senza div nidificati gonfi. Rispetto alla scrittura diretta di HTML: Markdown è da 3 a 5 volte più veloce per i contenuti tipici (intestazioni, paragrafi, elenchi, collegamenti), si legge in modo naturale nella forma sorgente e rimuove le decisioni di formattazione dal flusso di scrittura. Usa Markdown per qualsiasi contenuto ricco di testo; passa all'HTML solo quando hai bisogno di un controllo di presentazione dettagliato.

Il convertitore genera HTML5 semantico, ovvero elementi che descrivono il significato del contenuto e non solo l'aspetto. Le intestazioni diventano da `<h1>` a `<h6>` con attributi `id` generati automaticamente per i link ancora. I paragrafi diventano `<p>`. Il grassetto diventa `<strong>` (non `<b>`), il corsivo diventa `<em>` (non `<i>`) — equivalenti semantici che funzionano meglio con gli screen reader e il targeting CSS. Gli elenchi puntati diventano `<ul><li>`, gli elenchi numerati `<ol><li>`. Le citazioni diventano `<blockquote>`. Gli intervalli di codice diventano `<code>`, i blocchi delimitati diventano `<pre><code>`. I link diventano `<a href>`. Le immagini diventano `<img src alt>`. Il risultato è un HTML pulito e accessibile che si inserisce in qualsiasi CMS moderno, generatore di siti statici o file HTML senza modifiche. Nessun stile in linea (eccetto l'allineamento delle tabelle), nessun wrapper `<div>` extra, nessun attributo di classe (eccetto i tag di linguaggio sui blocchi di codice).

I file README sono la fonte Markdown più comune sul web: ogni repository GitHub ne ha uno, la maggior parte dei registri di pacchetti (npm, PyPI, RubyGems) li rende automaticamente. Per convertire un file README.md per un sito di documentazione, incolla il contenuto del file nel convertitore e copia l'output HTML. Correzioni comuni dopo la conversione: (1) Link relativi: i file README spesso usano percorsi relativi (`./docs/install.md`); convertili in URL assoluti per il sito pubblicato. (2) Percorsi delle immagini: stesso problema, le immagini dei README usano `./images/logo.png`; aggiorna all'URL dell'immagine pubblicata. (3) ID ancora: gli ID di intestazione generati automaticamente utilizzano il formato minuscolo con trattini (`Installazione` diventa `id="installazione"`); aggiorna di conseguenza i collegamenti ancora interni. (4) Sintassi specifica del repository: GitHub collega automaticamente i riferimenti ai problemi come `#123` e le menzioni utente come `@username`; questi non si collegano automaticamente al di fuori di GitHub, riscrivili come link espliciti se necessario.

I generatori di siti statici (SSG) elaborano i file Markdown in pagine HTML al momento della compilazione, quindi la conversione manuale di solito non è necessaria: esegui il commit dei file `.md` nel tuo repository e l'SSG gestisce il resto. SSG comuni e la loro gestione del Markdown: Jekyll (Ruby) usa kramdown per impostazione predefinita, compatibile con CommonMark con alcune funzioni GFM. Hugo (Go) usa Goldmark, CommonMark completo + GFM + estensioni. Next.js MDX (JavaScript) usa remark/rehype, ti consente di incorporare componenti React in Markdown. Eleventy (JavaScript) usa markdown-it per impostazione predefinita. Astro (JavaScript) usa remark e supporta MDX. Gatsby (JavaScript) usa gatsby-plugin-mdx con remark. Questo convertitore è più utile per: (a) conversioni una tantum al di fuori di un flusso di lavoro SSG, (b) verifica che il tuo Markdown venga renderizzato correttamente prima del commit, (c) migrazione di contenuti tra SSG che utilizzano diversi dialetti Markdown.

Sei errori comuni. (1) Interruzioni di riga morbide all'interno dei paragrafi: i singoli ritorni a capo collassano in spazi secondo CommonMark, non `<br>`. Usa due spazi finali o una riga vuota per un'interruzione esplicita. (2) Blocchi di codice indentati (rientro di 4 spazi) rispetto a quelli delimitati (triplo backtick): entrambi funzionano, ma quelli delimitati sono consigliati perché preservano i tag di linguaggio. (3) Elenchi nidificati con indentazione errata: CommonMark richiede 2 o 4 spazi; mischiare tabulazioni e spazi interrompe il rendering su alcuni parser. (4) HTML in linea rimosso da renderer più severi: GitHub e Reddit filtrano molti tag per sicurezza; ciò che funziona in questo convertitore potrebbe non funzionare ovunque. (5) Intestazioni senza riga vuota prima/dopo: la maggior parte dei parser tollera questa mancanza, ma CommonMark consiglia righe vuote per chiarezza. (6) Testo barrato con singole tilde: la singola tilde non funziona, richiede `~~doppie tilde~~`. Durante il debug, controlla quale dialetto parla la piattaforma di destinazione (CommonMark? GFM? qualcosa di personalizzato?) prima di dare per scontato che il convertitore sia difettoso.

Questo convertitore funziona al 100% nel tuo browser: il tuo testo in Markdown non lascia mai la pagina. I convertitori Markdown lato server di solito registrano ogni conversione per scopi di analisi e potrebbero memorizzare gli input per la cache o il monitoraggio degli errori. Per la maggior parte delle conversioni occasionali questo non è un problema, ma gli sviluppatori e i technical writer incollano regolarmente contenuti che non dovrebbero trapelare: chiavi API negli esempi di codice, documentazione interna, specifiche tecniche proprietarie, bozze di post per blog sotto NDA, dati dei clienti nella documentazione di supporto. La conversione lato client elimina del tutto il rischio di fuga di dati. Per verificare: apri la scheda Rete degli strumenti di sviluppo del browser, incolla il Markdown, fai clic su converti: vedrai zero richieste in uscita durante la conversione. La libreria marked.js si carica una volta all'apertura della pagina (visibile nel caricamento iniziale della pagina); dopodiché, tutta la conversione è locale. Per input Markdown non affidabili provenienti da fonti di terze parti, igienizza l'HTML reso con DOMPurify prima di iniettarlo in una pagina per prevenire attacchi XSS.

Guida rapida di riferimento alla sintassi. Intestazioni: da `# H1` a `###### H6`. Grassetto: `testo`. Corsivo: `*testo*` o `_testo_`. Grassetto+corsivo: `*testo*`. Barrato (GFM): `~~testo~~`. Codice in linea: `` `codice` ``. Link: `[testo](https://url.com)`. Immagine: ``. Link automatico (GFM): `https://example.com` (URL grezzo, senza parentesi). Elenco non ordinato: `- elemento` o `* elemento` o `+ elemento`. Elenco ordinato: `1. elemento`. Elenco nidificato: rientrare con 2 spazi. Citazione in blocco: `> testo citato`. Citazione multilinea: anteporre `>` a ogni linea. Blocco di codice delimitato: tre backtick (apertura e chiusura) con etichetta di lingua opzionale. Blocco di codice rientrante: 4 spazi o 1 tab all'inizio della riga. Riga orizzontale: `---` o `***` sulla propria riga. Tabella (GFM): `| col1 | col2 |\n|------|------|\n| val1 | val2 |`. Elenco di attività (GFM): `- [ ] da fare` e `- [x] fatto`. Passaggio HTML: qualsiasi tag HTML funziona in linea. Interruzione di riga forzata: due spazi finali. Carattere speciale di escape: barra rovesciata prima, ad es. `\*non corsivo\*`. Usa la calcolatrice online per qualsiasi caso che ti confonde: l'anteprima dal vivo mostra esattamente come viene visualizzato ciascun pattern.