Convertitore da HTML a Markdown

Cosa fa questo convertitore

Questo strumento converte da HTML a Markdown e da Markdown a HTML. L’HTML è il linguaggio con cui sono costruite le pagine web. Il Markdown è un modo più leggero per scrivere la stessa struttura con caratteri normali: # per un titolo, - per una voce di elenco, ** per il grassetto. Passare da uno all’altro capita spesso: sposti un articolo da un CMS a un sito statico, incolli una pagina web in un README, oppure trasformi appunti scritti in Markdown in HTML per il modello di un’email.

La pagina funziona nei due sensi. Da HTML a Markdown usa Turndown, un convertitore molto diffuso, con regole aggiuntive per tabelle e blocchi di codice. Da Markdown a HTML usa marked con il GitHub Flavored Markdown attivo.

Come si usa

1. Scegli la direzione con Da HTML a Markdown o Da Markdown a HTML.
2. Incolla nel riquadro a sinistra, premi Apri file, oppure premi Esempio per provarlo. Il risultato si aggiorna mentre scrivi.
3. Da HTML a Markdown, scegli lo stile dei Titoli (cancelletti o sottolineati), il carattere dei Punti elenco e come scrivere i Blocchi di codice (delimitati o rientrati).
4. Da Markdown a HTML, attiva A capo come <br> se i singoli a capo devono restare tali, come succede nei commenti di GitHub.
5. Passa da Codice ad Anteprima per vedere il risultato visualizzato, poi premi Copia o Scarica.

Esempio da HTML a Markdown

Questo HTML:

<h1>Release notes</h1>
<p>Version <strong>2.4</strong> adds <a href="https://example.com/docs">offline mode</a> and fixes <em>three</em> bugs.</p>
<ul>
  <li>Faster search</li>
  <li>New <code>--quiet</code> flag</li>
</ul>
<pre><code class="language-bash">npm install [email protected]</code></pre>
<table>
  <tr><th>Platform</th><th>Status</th></tr>
  <tr><td>Windows</td><td>Ready</td></tr>
</table>

diventa questo Markdown:

# Release notes

Version **2.4** adds [offline mode](https://example.com/docs) and fixes *three* bugs.

- Faster search
- New `--quiet` flag

```bash
npm install [email protected]
```

| Platform | Status |
| --- | --- |
| Windows | Ready |

La classe language-bash del blocco di codice diventa l’indicazione del linguaggio dopo i tre backtick di apertura, così l’evidenziazione della sintassi continua a funzionare su GitHub e nella maggior parte dei generatori di siti statici. Gli elenchi annidati vengono rientrati sotto la voce che li contiene, e un elenco numerato mantiene i suoi numeri.

Esempio da Markdown a HTML

Questo Markdown:

## Install

Run `npm install` and open **http://localhost:3000**.

- [x] Node 20
- [ ] Docker

produce questo HTML:

<h2>Install</h2>
<p>Run <code>npm install</code> and open <strong><a href="http://localhost:3000">http://localhost:3000</a></strong>.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> Node 20</li>
<li><input disabled="" type="checkbox"> Docker</li>
</ul>

Qui sono all’opera due estensioni di GitHub. L’URL scritto senza link è diventato un link, e le voci dell’elenco di attività sono diventate caselle di controllo. Le tabelle con :-: nella riga divisoria ricevono align="center" sulle loro celle.

Di norma un singolo a capo dentro un paragrafo resta un semplice a capo nel sorgente, che i browser mostrano come uno spazio. Con A capo come <br> attivo, Line one e Line two su righe separate diventano <p>Line one<br>Line two</p>.

Cosa viene eliminato

Il Markdown descrive la struttura, non la grafica. Quando passi da HTML a Markdown:

• I blocchi script, style, noscript e template vengono rimossi.
• Classi, id, stili inline e attributi data vengono eliminati.
• Gli elementi contenitore come div e span spariscono, ma il loro testo resta.
• Le celle di tabella con più paragrafi vengono unite su una sola riga, perché in Markdown una riga di tabella deve stare su una riga. Una barra verticale dentro una cella viene scritta come \|.
• Le celle unite (colspan) vengono completate con celle vuote, così ogni riga ha lo stesso numero di colonne.

Se ti serve un’impaginazione precisa, lascia il contenuto in HTML. La maggior parte dei renderer Markdown accetta blocchi di HTML grezzo.

Consigli

• Quando puoi, copia dal sorgente della pagina, non dalla pagina visualizzata. Copiando il testo visualizzato perdi i tag che servono al convertitore.
• Se l’HTML è minificato o disordinato, il risultato non cambia, perché il convertitore legge la struttura, non gli spazi. Per leggere l’HTML in sé, passalo prima nel formattatore HTML.
• Dopo la conversione, passa il Markdown nel formattatore Markdown per avere tabelle allineate ed enfasi coerente.
• Per un documento Word usa il convertitore da Word a Markdown, che legge direttamente il file .docx.

Altri modi per convertire

• Pandoc converte tra decine di formati dalla riga di comando. pandoc page.html -o page.md è la forma di base.
• Editor: VS Code mostra un’anteprima del Markdown con Ctrl+Maiusc+V. Diverse estensioni aggiungono un comando per incollare HTML come Markdown.
• Codice: la libreria Turndown in JavaScript e il pacchetto markdownify in Python convertono da HTML a Markdown nei tuoi script.

Tutto in questa pagina funziona nel tuo browser. L’HTML che incolli viene letto come documento inerte, quindi niente di ciò che contiene viene eseguito o caricato durante la conversione.