Scrivi o incolla Markdown e ottieni HTML pulito in tempo reale. Anteprima live, export HTML, supporto GFM (GitHub Flavored Markdown).
Scrivi o incolla il tuo Markdown nel pannello sinistro. L'HTML equivalente viene generato in tempo reale nel pannello destro, con anteprima renderizzata. Puoi copiare l'HTML grezzo o scaricare il file .html. Tutto avviene nel browser, nessun dato viene inviato a server.
Markdown è un linguaggio di markup leggero creato da John Gruber nel 2004 con l'obiettivo di scrivere testo formattato usando caratteri semplici e leggibili anche nel sorgente grezzo. La filosofia è che il documento Markdown sia leggibile senza rendering, a differenza di HTML. È usato da GitHub, Reddit, Notion, Obsidian, Jekyll, Hugo e praticamente ogni piattaforma di documentazione moderna.
| Sintassi | Risultato | Note |
|---|---|---|
# Titolo | H1 — titolo principale | Un solo H1 per pagina (SEO) |
## Titolo | H2 — sezione | Gerarchia: sempre in ordine |
### Titolo | H3 — sottosezione | Fino a H6 (######) |
Titolo | H1 alternativo | Stile "setext", meno usato |
Titolo | H2 alternativo | Stile "setext", meno usato |
| Sintassi | Risultato | Note |
|---|---|---|
**testo** o __testo__ | Grassetto | → <strong> |
*testo* o _testo_ | Corsivo | → <em> |
***testo*** | Grassetto + corsivo | Triplice asterisco |
~~testo~~ | GFM — non CommonMark puro | |
`codice` | Inline code | → <code> |
| Riga vuota tra paragrafi | Paragrafo separato | → <p>...</p> |
| Due spazi a fine riga | Interruzione di riga | → <br> |
> testo | Citazione blockquote | → <blockquote> |
| Sintassi | Risultato | Note |
|---|---|---|
- elemento o * elemento | Lista non ordinata | → <ul><li> |
1. elemento | Lista ordinata | → <ol><li>; i numeri non contano |
| Rientro di 2-4 spazi | Lista annidata | Funziona sia per ul che ol |
- [x] fatto | Task list spuntata ✓ | GFM — checkbox interattivo |
- [ ] da fare | Task list vuota □ | GFM — usato su GitHub |
| Sintassi | Risultato | Note |
|---|---|---|
[testo](https://url.com) | Link inline | → <a href> |
[testo](url "Titolo") | Link con tooltip | Titolo in virgolette opzionale |
[testo][id] + [id]: url | Link di riferimento | Definizione separata in fondo |
<https://url.com> | Autolink | URL cliccabile diretto |
 | Immagine | → <img alt>; alt obbligatorio per SEO |
 | Immagine con titolo | Appare come tooltip al passaggio |
| Sintassi | Risultato | Note |
|---|---|---|
`codice` | Codice inline | → <code> |
| Tre backtick + linguaggio | Blocco codice con evidenziazione | es. ```javascript |
| Tre backtick senza linguaggio | Blocco codice generico | → <pre><code> |
| Rientro di 4 spazi | Blocco codice (stile legacy) | Meno usato dei backtick |
| Sintassi | Risultato | Note |
|---|---|---|
| Col1 | Col2 | | Riga tabella | Pipe separano le colonne |
| --- | --- | | Separatore header | Obbligatorio dopo la prima riga |
| :--- | | Allineamento a sinistra | Due punti a sinistra |
| ---: | | Allineamento a destra | Due punti a destra |
| :---: | | Allineamento centrato | Due punti su entrambi i lati |
| Sintassi | Risultato | Note |
|---|---|---|
--- o *** o ___ | Linea orizzontale | → <hr>; almeno 3 caratteri |
\*testo\* | Asterisco letterale *testo* | Backslash escapa i caratteri speciali |
<!-- commento --> | Commento HTML | Non appare nel rendering |
| HTML diretto nel testo | HTML preservato | La maggior parte dei parser lo mantiene |
1. Scrivi o incolla il Markdown. Usa il pannello sinistro. Puoi partire da zero oppure incollare un README, un articolo da un CMS, note da Obsidian o Notion. Il tool aggiorna la preview in tempo reale — ogni carattere digitato si riflette immediatamente nell'HTML e nell'anteprima.
2. Controlla l'anteprima renderizzata. Clicca su "Preview" nel pannello destro per vedere come apparirà il contenuto nel browser. Verifica che i titoli siano nella giusta gerarchia (un solo H1, poi H2, poi H3), che i link siano cliccabili e che le tabelle abbiano le colonne allineate correttamente. Errori comuni: dimenticare la riga separatore |---|---| nelle tabelle, o usare underscore singolo _testo_ all'interno di parole (si comporta diversamente da *testo* in alcuni parser).
3. Passa alla tab "HTML". Clicca su "HTML" per vedere il markup generato. Questo è l'HTML pronto da incollare nel tuo CMS, nel template, in un'email HTML o in qualsiasi altro contesto. L'HTML prodotto non include <html>, <head> o <body> — è solo il frammento del contenuto, pronto da inserire in una pagina esistente.
4. Copia o scarica. Il pulsante "Copia HTML" copia il markup negli appunti. Il pulsante "Scarica .html" genera un file HTML completo con un template base (doctype, charset, stili minimi) — apribile direttamente in qualsiasi browser.
5. Casi d'uso frequenti. Da Notion o Obsidian a HTML: esporta le tue note in Markdown, incollale qui e ottieni HTML pulito. Per email HTML: scrivi il contenuto in Markdown, converti, poi incolla nell'editor HTML della tua piattaforma di email marketing — attenzione alle tabelle, che in alcune piattaforme vanno stilizzate con attributi inline. Per blog post: scrivi in Markdown, verifica la struttura dei titoli per il SEO, copia l'HTML nel CMS. Per documentazione tecnica: usa blocchi codice con il linguaggio specificato (```python, ```bash) per attivare il syntax highlighting con Prism.js o Highlight.js.
Caratteri speciali e escape. Per mostrare un carattere Markdown come letterale (es. un asterisco senza che diventi corsivo), precededilo con un backslash: \*testo\* mostra *testo* senza formattazione. Caratteri che richiedono escape: \ ` * _ { } [ ] ( ) # + - . !. Per mostrare un backslash letterale usa \\.
CommonMark è la specifica standardizzata (2014) che risolve le ambiguità del Markdown originale. GFM (GitHub Flavored Markdown) estende CommonMark con tabelle, task list (- [x]), syntax highlighting nei blocchi codice e autolink. MDX è Markdown con JSX — usato nei progetti React/Next.js per componenti interattivi nei file .mdx. Questo tool usa marked.js con supporto GFM.
Molti CMS (Ghost, Hugo, Jekyll, Eleventy, Astro) usano Markdown come formato nativo e lo convertono in HTML al momento del build. Per il SEO, assicurati che la conversione generi: un solo <h1> per pagina; heading in ordine gerarchico (h1 → h2 → h3); attributo alt per le immagini; link con testo descrittivo invece di "clicca qui". Tutti questi elementi sono controllabili nel Markdown sorgente — il tool mostra l'HTML risultante per verifica.
Il Markdown standard non supporta attributi HTML come class. Le estensioni come Pandoc o il plugin remark-attr permettono la sintassi {.myclass}. In alternativa, puoi inserire HTML diretto nel Markdown — la maggior parte dei parser lo preserva: <div class="box">contenuto</div>.
Sì — librerie come Turndown (JavaScript) o html2text (Python) convertono HTML in Markdown. Non è incluso in questo tool ma è un'operazione comune per "estrarre" contenuto da pagine web o CMS legacy in formato Markdown modificabile.
Il tool genera i blocchi <pre><code class="language-js"> con la classe corretta per il linguaggio specificato. Per applicare il syntax highlighting visivo nell'HTML finale, aggiungi la libreria highlight.js o Prism.js al tuo progetto — leggono automaticamente le classi generate.
reStructuredText (RST) è lo standard nell'ecosistema Python (Sphinx per la documentazione): più rigoroso, con una specifica formale, note a piè di pagina native e direttive personalizzate. Markdown è più semplice e molto più diffuso nel resto del mondo. Per documentazione Python usa RST; per tutto il resto usa Markdown.
Markdown li gestisce automaticamente: < e & dentro al testo normale vengono escapati in < e & nell'HTML generato. Se vuoi inserire HTML grezzo, puoi farlo direttamente — il parser lo lascia passare senza modifiche.