Convertitore da Markdown a HTML

Incolla Markdown e ottieni HTML semantico pulito, <h1> a <h6>, <ul>, <ol>, <table>, <pre><code> con sintassi evidenziata, <blockquote>, URL autolinkati. Scegli documento completo (con <html>, <head> e un foglio di stile minimo) o frammento (solo il contenuto del corpo) a seconda che tu lo stia integrando in una pagina esistente o producendo un file autonomo.

Come convertire Markdown in HTML

  1. 1

    Incolla Markdown

    Documento completo o frammento. La front-matter YAML viene rimossa automaticamente se presente.

  2. 2

    Scegli il set di estensioni

    Solo CommonMark, GFM (tabelle, elenchi di attività, autolink), o GFM + matematica.

  3. 3

    Scegli la modalità di output

    Frammento per l'incorporamento, o documento HTML completo con head e CSS minimo.

  4. 4

    Copia o scarica HTML

    Cattura l'HTML come testo o salvalo come file `.html`.

Tabella di mapping

Markdown HTML
# Heading 1 <h1>Heading 1</h1>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
`code` <code>code</code>
Codice delimitato con lang <pre><code class="language-js">
- item <ul><li>item</li></ul>
1. item <ol><li>item</li></ol>
> quote <blockquote><p>quote</p></blockquote>
[text](url) <a href="url">text</a>
![alt](src) <img src="src" alt="alt">
--- <hr>
Tabella GFM <table><thead>...</thead>...
- [x] done <input type="checkbox" checked disabled>

Evidenziazione della sintassi

I blocchi di codice delimitati con suggerimenti di lingua ottengono un attributo class="language-xxx" sull’elemento <code>. Il convertitore inietta anche l’output tokenizzato da highlight.js quando attivi “pre-evidenziato”, utile se la pagina di destinazione non carica un runtime di evidenziazione.

Documento completo vs. frammento

  • Frammento è solo l’HTML interno, inizia con <h1> o qualunque sia il primo elemento. Incolla in un blocco CMS esistente, corpo di email o componente frontend.
  • Documento completo avvolge il frammento in <!DOCTYPE html>, <html>, <head> con un piccolo foglio di stile predefinito (tipografia, blocchi di codice, tabelle). Salvalo come .html e si apre in qualsiasi browser, senza file extra necessari.

CSS inline vs. esterno

  • Stili inline (attiva/disattiva) mettono tutto il CSS direttamente sugli elementi. Brutto ma infallibile per i modelli di email.
  • Classi (predefinito) mantengono l’HTML pulito e si aspettano che il foglio di stile del tuo sito gestisca lo stile.

Note di accessibilità

  • Le intestazioni vengono renderizzate come <h1><h6> semantici preservando la tua gerarchia. Non saltare livelli nel sorgente.
  • Le immagini senza testo alternativo producono <img alt=""> (un alt vuoto intenzionale per immagini decorative), ma aggiungi testo alternativo a meno che l’immagine non sia davvero decorativa.
  • Le tabelle ottengono un <thead> per la riga dell’intestazione, migliorando la navigazione per i lettori di schermo.

Domande frequenti

Sì. L’HTML grezzo nel sorgente viene passato con i tag script e gli attributi evento rimossi. Se hai bisogno di output non sanitizzato (ti fidi dell’input), c’è un’opzione, non usarla su contenuti forniti dagli utenti.

Gli elenchi di attività GFM (- [x], - [ ]) diventano elementi <input type="checkbox" disabled>. L’attributo disabled impedisce cambiamenti di stato accidentali nella vista renderizzata.

Sì, attiva gli stili inline. Il convertitore inietta un attributo di stile minimo su ogni blocco, che è ciò di cui i client email (Outlook, Gmail) hanno bisogno poiché rimuovono i blocchi <style>.

Attiva l’estensione matematica e i blocchi $x^2$ o $$...$$ vengono renderizzati tramite KaTeX. Il convertitore produce SVG o HTML statici, non è richiesto un runtime MathJax.

No. L’analisi e la generazione di HTML avvengono nel tuo browser. Il sorgente e l’output non lasciano mai il tuo dispositivo.

Strumenti correlati

Strumento disponibile in altre lingue