Converti HTML in Markdown pulito

Come convertire HTML in Markdown

1. Aggiungi il tuo HTML. Incolla il codice nella casella, apri un file .html locale oppure copia una sezione di qualsiasi pagina web e incollala: con l’incolla avanzato attivo, il convertitore prende dagli appunti l’HTML formattato invece del semplice testo.
2. Imposta un URL di base se i link sono relativi. Il codice copiato dal sorgente di una pagina ha spesso link come /docs/setup. Inserisci l’indirizzo della pagina e ogni link e immagine relativi diventano assoluti.
3. Scegli lo stile Markdown. Le impostazioni predefinite (titoli ATX, elenchi con trattino, codice recintato, link in linea, GFM attivo) vanno bene per GitHub, GitLab, Obsidian, la maggior parte dei generatori di siti statici e gli strumenti di IA.
4. Copia o scarica. Il risultato si aggiorna mentre scrivi. Copialo negli appunti o salvalo come file .md col nome del primo titolo.

Che cosa viene convertito, elemento per elemento

Il Markdown ha un vocabolario molto più ristretto dell’HTML, quindi il vero compito di un convertitore è decidere in che cosa si trasforma ogni elemento. Ecco che cosa produce lo strumento:

• Titoli <h1>–<h6> diventano da # a ######. Lo stile Setext sottolinea solo H1 e H2, perché la sintassi non prevede altro; da H3 in giù si usa comunque #.
• Grassetto e corsivo (<strong>, <b>, <em>, <i>) usano i delimitatori che scegli.
• Link diventano [testo](url "titolo"), oppure riferimenti numerati raccolti in fondo al documento se scegli i link con riferimento. I link che eseguono script (javascript:) o contengono dati data: vengono ridotti al solo testo.
• Immagini diventano ![alt](src). Vengono recuperate anche le immagini a caricamento differito che tengono l’indirizzo vero in data-src. Le immagini data: incorporate vengono scartate perché un blocco base64 rende illeggibile un file Markdown.
• Elenchi, compresi quelli annidati su più livelli, sono indentati sotto la voce genitore. Gli elenchi numerati mantengono il numero di partenza (start): un elenco che comincia da 4 comincia ancora da 4.
• Citazioni diventano righe con >, comprese le citazioni annidate.
• Codice: il <code> in linea diventa tra apici inversi; i blocchi <pre> diventano blocchi recintati con il linguaggio, se dichiarato (vedi sotto).
• Tabelle diventano tabelle GFM con le barre verticali. Dettagli e limiti sono nella sezione successiva.
• Testo barrato ed elenchi di attività: <del>, <s> e <strike> diventano ~~testo~~; le voci che iniziano con una casella di controllo diventano - [ ] o - [x].
• Rimossi del tutto: <script>, <style>, <noscript>, <template>, iframe, embed, SVG e canvas. I contenitori di layout come <div> e <span> vengono scartati e resta solo il loro testo, ed è proprio questo che rende il Markdown più compatto e più leggibile dell’HTML da cui nasce.

Tabelle: che cosa può contenere il Markdown e che cosa no

La specifica del GitHub Flavored Markdown definisce una tabella come una riga di intestazione, una riga delimitatrice di trattini e le righe del corpo. Tre regole della specifica determinano come si convertono le tabelle HTML:

• La riga di intestazione è obbligatoria. Molte tabelle HTML, soprattutto quelle incollate da fogli di calcolo o da vecchie pagine di CMS, non hanno nessuna cella <th>. Così come sono non possono diventare tabelle con le barre verticali, quindi per impostazione predefinita il convertitore trasforma la prima riga in intestazione. Togli la spunta all’opzione se preferisci lasciare quelle tabelle in HTML.
• In una cella non può stare contenuto di blocco. La specifica stabilisce che in una tabella non si possono inserire elementi di blocco, perciò paragrafi e interruzioni di riga dentro una cella vengono appiattiti su un’unica riga. Gli elenchi nelle celle perdono la struttura; se una tabella contiene contenuti ricchi, valuta di lasciarla in HTML.
• Una barra verticale letterale va preceduta da escape. Un | dentro una cella aprirebbe una nuova colonna, quindi il convertitore lo scrive come \|, che la specifica consente ovunque in una cella, anche dentro il codice in linea.

Le celle unite sono supportate in parte: una cella con colspan="3" è seguita da due celle vuote, così le colonne restano allineate. Le unioni di riga (rowspan) non hanno un equivalente in Markdown e non vengono riprodotte. Un <caption> viene spostato sopra la tabella come paragrafo a sé, e l’allineamento delle colonne dato dagli attributi align diventa :--, :-: o --: nella riga delimitatrice.

Blocchi di codice ed evidenziazione della sintassi

I blocchi di codice recintati possono portare una stringa informativa dopo la recinzione di apertura, come ```python, che i renderer usano per colorare il codice. Il convertitore cerca il linguaggio dove lo mettono gli evidenziatori: le classi language-* e lang-* (Prism, highlight.js e la maggior parte dei renderer Markdown), il contenitore highlight-source-* di GitHub e gli attributi data-lang o data-language. Un <pre> senza un elemento <code> interno viene comunque trattato come blocco di codice e non come prosa con escape.

Il testo del codice viene preso alla lettera, quindi il markup dell’evidenziatore (tutti quegli elementi <span> colorati) sparisce senza toccare il codice. Se il codice stesso contiene una serie di tre apici inversi, la recinzione viene fatta più lunga di quella serie, perché la specifica richiede che la recinzione di chiusura sia lunga almeno quanto quella di apertura: così la documentazione sul Markdown scritta in Markdown resta integra.

Le opzioni, spiegate

Titoli ATX o Setext

I titoli ATX (# Titolo) funzionano per tutti e sei i livelli e sono quelli che si aspetta quasi ogni strumento. I titoli Setext sottolineano il testo con === o ---; alcune guide di stile li preferiscono per H1 e H2, ma non possono esprimere H3 e i livelli inferiori.

Link in linea o con riferimento

I link in linea tengono ogni URL accanto al suo testo, adatti a documenti brevi e a prompt per l’IA. I link con riferimento spostano gli URL in un elenco numerato in fondo, così i paragrafi lunghi restano leggibili in un editor di solo testo; è un’abitudine diffusa nei repository di documentazione.

Escape dei caratteri Markdown

Testi come 2024. Un buon anno o nome_file_qui verrebbero letti per errore come elenco o come corsivo, quindi il convertitore fa l’escape di quei caratteri con le barre rovesciate. È corretto per tutto ciò che verrà interpretato e visualizzato. Se l’output finisce in una chat con un modello di IA, in un indice di ricerca o in un appunto di solo testo, togli la spunta all’escape per ottenere un testo più pulito.

URL di base

Gli URL relativi hanno senso solo nella pagina da cui provengono. Con un URL di base impostato, ../images/chart.png su https://esempio.it/blog/articolo diventa https://esempio.it/images/chart.png, risolto con le stesse regole che usano i browser.

Convertire un’intera pagina web

Questo convertitore non scarica gli URL. Una pagina nel tuo browser non può leggere l’HTML di un altro sito a meno che quel sito non lo consenta, e molte pagine moderne assemblano il contenuto con JavaScript dopo il caricamento, quindi un download lato server darebbe spesso un guscio vuoto. Copiare dalla pagina già visualizzata evita entrambi i problemi: seleziona l’articolo, copia, incolla qui. Ottieni il testo che vedi davvero, con link e formattazione, senza la navigazione, i banner dei cookie o la pubblicità che non hai selezionato. Per estrarre invece tutti i link di una pagina, usa l’estrattore di link.

Problemi comuni e soluzioni

• Una tabella compare come HTML nell’output. GFM è disattivato, oppure la promozione dell’intestazione è disattivata e la tabella non ha una riga di intestazione. Riattiva una delle due opzioni.
• I link puntano al posto sbagliato. Erano relativi. Aggiungi l’indirizzo della pagina come URL di base.
• Le interruzioni di riga sembrano strane. Un <br> diventa due spazi finali e un a capo, l’interruzione di riga forzata di CommonMark. Alcuni editor eliminano gli spazi finali al salvataggio, e questo la trasforma di nuovo in un’interruzione morbida.
• Manca del testo. Se l’HTML viene da «Visualizza sorgente» su un sito molto basato su JavaScript, il contenuto potrebbe non essere affatto nel markup. Copia invece dalla pagina visualizzata.
• Tutto è un unico paragrafo. La sorgente usava elementi <div> invece di <p> per i paragrafi. Il Markdown conosce solo gli elementi semantici, quindi una pagina costruita con div stilizzati si converte in semplici blocchi di testo.

Perché convertire HTML in Markdown?

Il Markdown conserva ciò che porta significato (titoli, enfasi, link, elenchi, tabelle, citazioni e codice) e scarta il markup di layout e gli stili in linea. È quindi più facile da modificare, da rivedere nel controllo di versione, da portare in una base di conoscenza come Obsidian o in un sito di documentazione, o da passare a un modello di IA senza sprecarne il contesto in attributi class. Gli sviluppatori lo usano per migrare contenuti di un CMS in un sito statico; chi scrive lo usa per spostare le bozze fra editor; chi fa ricerca lo usa per tenere copie pulite delle fonti. Se le fonti le raccogli invece di convertirle, Marqly può organizzare i link di ricerca (pagina in inglese) in un’unica libreria ricercabile, e la pagina sul flusso di lavoro per sviluppatori (in inglese) mostra come documenti e frammenti salvati restano ritrovabili.

Privato per costruzione

Il convertitore è la libreria open source Turndown con il suo plugin per il Markdown in stile GitHub, più la gestione di tabelle, codice e link propria di questa pagina, tutto incluso nella pagina. Funziona offline una volta caricata, e il testo incollato, i file e le impostazioni restano sul tuo dispositivo. Per un controllo rapido delle dimensioni prima o dopo la conversione, anche il calcolatore del tempo di lettura conta parole e caratteri in locale.