Cos'è la conversione Markdown in HTML?
Markdown è un formato di testo semplice leggero che usa una punteggiatura minima (# per le intestazioni, * per l'enfasi, - per gli elementi di elenco) per codificare prosa strutturata. GitHub Flavored Markdown (GFM) estende la specifica CommonMark originale con tabelle, testo barrato, liste di attività e autolink. HTML è la forma renderizzata che il browser visualizza. Convertire Markdown in HTML ti permette di scrivere nella sintassi leggera e pubblicare verso una superficie renderizzata — un README, una pagina di sito statico, il corpo di un'email — senza scrivere le tag a mano.
Quali funzionalità di GitHub Flavored Markdown sono supportate?
Il parser incluso marked@12.0.2 supporta l'intero superset GFM: intestazioni in stile ATX da # a ######, elenchi ordinati e non ordinati con annidamento, grassetto **testo** e corsivo *testo*, barrato ~~testo~~, link inline [testo](url) e immagini inline , blocchi di codice recintati con tag di linguaggio opzionale (```js), span di codice inline `code`, tabelle con pipe e riga di intestazione, liste di attività GFM - [ ] / - [x], citazioni in blocco >, righe orizzontali --- e autolink. Ognuno si renderizza nel pannello di anteprima nello stesso modo in cui GitHub lo renderizza.
Come funziona la conversione Markdown in HTML?
Ogni conversione viene eseguita localmente nel tuo browser utilizzando due librerie incluse — niente CDN, niente fetch, niente telemetria. I passaggi principali sono:
- Analizzare:
marked.parse(source)legge il tuo Markdown e produce una stringa HTML. Il parser è eseguito in modalità GFM, quindi tabelle, liste di attività, testo barrato e autolink sono tutti riconosciuti. - Sanitizzare: l'output HTML passa attraverso
DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })prima di essere assegnato ainnerHTML. DOMPurify è lo stesso sanitizzatore XSS usato da Mozilla MDN, Atlassian e Microsoft 365 — analizza l'HTML, attraversa il DOM e rimuove gli elementi<script>, ogni attributo di gestoreon*e gli schemi URIjavascript:. - Renderizzare: l'HTML sanitizzato viene scritto nel pannello di anteprima tramite
innerHTML, e l'HTML grezzo viene mostrato nel secondo pannello tramite un<textarea>di sola lettura per copiare il markup. La modalità live applica un debounce di 150 ms all'input affinché l'anteprima si aggiorni mentre digiti senza sovraccaricare il parser.
Perché convertire Markdown in HTML con questo strumento?
- Privacy: ogni passaggio di analisi, sanitizzazione e rendering avviene nel tuo browser. Il Markdown — inclusi post di blog non pubblicati, bozze di documentazione interna e contenuti README riservati — non raggiunge mai i nostri server.
- Sicuro contro XSS per impostazione predefinita: il pannello di anteprima renderizzata fa passare ogni stringa HTML attraverso DOMPurify prima di
innerHTML, quindi una tag<script>o un gestoreonerror=all'interno dell'HTML grezzo nel tuo Markdown produce un'anteprima inerte. La scheda grezza mostra l'output non sanitizzato per ispezione, all'interno di un<textarea>tramitevalue— mai eseguita. - GFM completo: tabelle, barrato, liste di attività e autolink si renderizzano come GitHub li renderizza. Una tabella Markdown con pipe diventa un
<table>HTML con<thead>e<tbody>— senza righe perse, senza struttura appiattita.
Quali sono le applicazioni comuni della conversione Markdown in HTML?
Convertire Markdown in HTML è ricorrente in documentazione, lavoro con siti statici e redazione di email:
- Redazione di README su GitHub: scrivere un README di progetto localmente come Markdown e visualizzarne l'anteprima prima del push. L'anteprima corrisponde al renderer GFM di GitHub per tabelle, liste di attività e codice recintato.
- Contenuto per sito statico: incollare un post in Markdown e ottenere l'HTML per un campo CMS o un motore di template che si aspetta markup invece di sorgente Markdown.
- Modelli di email: scrivere il corpo di un'email transazionale come Markdown e convertirlo in HTML per il motore di template del provider email. L'output è HTML semantico puro — niente stili inline, niente stranezze di client email incorporate.
Come si presenta un esempio di conversione Markdown in HTML?
Incollando # Titolo\n\n- elemento 1\n- elemento 2\n\n[link](https://example.com) si produce un pannello di anteprima contenente <h1>Titolo</h1>, un elenco non ordinato a due elementi e un <a href="https://example.com">link</a>. La scheda grezza mostra la stringa HTML esatta per copiarla direttamente in un template. Una tabella pipe con una riga di allineamento |---|---| diventa un <table> completo con <thead> e <tbody> — confermando che le tabelle GFM si renderizzano come GitHub le renderizza.
Questo convertitore Markdown in HTML viene eseguito interamente nel mio browser?
Sì. Ogni passaggio di analisi, sanitizzazione e rendering viene eseguito localmente come JavaScript all'interno della tua scheda del browser. Le librerie incluse — marked@12.0.2 e DOMPurify@3.1.7 — sono servite dalla stessa origine della pagina, quindi nessuna dipendenza da CDN, niente fetch, niente XMLHttpRequest, niente navigator.sendBeacon sull'input. Lo strumento funziona anche offline una volta caricata la pagina, perché è un bundle statico HTML/CSS/JS con le librerie vendor copiate accanto. I post non pubblicati, i documenti interni e i README riservati restano sul tuo dispositivo.
Il pannello di anteprima renderizzata è sicuro contro XSS?
Sì. Ogni stringa HTML assegnata a innerHTML passa prima attraverso DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify è il sanitizzatore XSS open source mantenuto da Cure53; è la stessa libreria utilizzata da Mozilla MDN, Atlassian e Microsoft 365 per irrobustire l'HTML fornito dall'utente. Il profilo html predefinito rimuove gli elementi <script>, ogni attributo gestore di evento on* (onerror, onclick, ecc.), gli schemi URI javascript: dentro href / src e le espressioni CSS note come pericolose. Incollare <img src=x onerror=alert(1)> produce un'anteprima dove document.querySelector('#output-preview img[onerror]') restituisce null e nessun avviso viene attivato.
Le tabelle GFM sono supportate?
Sì. La direzione Markdown → HTML gestisce nativamente le tabelle con pipe tramite la modalità GFM di marked — una riga di intestazione separata da una riga di allineamento |---|---|, seguita da righe di dati, produce una <table> con <thead> + <tbody>. Il barrato (~~testo~~ → <del>testo</del>) e le liste di attività (- [ ] / - [x] → <input type="checkbox">) si renderizzano come GitHub li renderizza.
Il mio Markdown viene convertito fedelmente?
Per l'insieme canonico di funzionalità GFM — intestazioni da h1 a h6, elenchi ordinati e non ordinati con annidamento, grassetto / corsivo / barrato, link inline, immagini inline, blocchi di codice recintati con tag di linguaggio, span di codice inline, tabelle con pipe, liste di attività, citazioni in blocco, righe orizzontali e autolink — l'output HTML è stabile e corrisponde al renderer di GitHub. Alcuni comportamenti da notare: l'HTML inline grezzo dentro Markdown (ad es. <sub>testo</sub>) passa invariato nell'output, e le intestazioni setext di CommonMark (sottolineature ===) e le intestazioni ATX (# Titolo) producono lo stesso <h1>. Sono comportamenti documentati di marked, non bug. Se hai bisogno della direzione inversa, usa lo strumento HTML in Markdown.
L'evidenziazione della sintassi nei blocchi di codice recintati è supportata?
Non in v1. I blocchi di codice recintati vengono renderizzati con font monospace e uno sfondo discreto, ma senza evidenziazione dei token per linguaggio. Aggiungere l'evidenziazione della sintassi richiederebbe di includere Prism o highlight.js, ciascuno dei quali aggiunge 15–40 KB più un file di grammatica per linguaggio e una matrice di temi che andrebbe allineata con la palette Workshop Terminal. Per ora, il renderer si concentra sulla correttezza e sulla sicurezza XSS; se ci sarà domanda da parte degli utenti per l'evidenziazione inline, un interruttore opt-in è un seguito praticabile.
Questo Convertitore Markdown in HTML viene fornito con marked@12.0.2 e DOMPurify@3.1.7 incluse dalla stessa origine, supporta l'intero insieme di funzionalità GFM e sanitizza ogni stringa HTML renderizzata prima che tocchi il DOM. Nessun upload, nessuna CDN, nessuna telemetria — ogni byte resta nel tuo browser.