Migro i contenuti per vivere, nel senso che chiunque abbia gestito un sito WordPress per un decennio alla fine lo fa Quando ho spostato un lotto di vecchi post da un generatore di pagine e in un sistema di documenti basato su Markdown, ho scoperto cosa & quot; HTML" pulito; significa davvero in natura: <p> tag con stili in linea, vuoti <span>s avvolgendo singole parole, <div>s tre livelli in profondità intorno a un paragrafo, e l'etichetta occasionale che semplicemente non è mai stato chiuso Incollando che in un campo Markdown mi ha dato un muro di parentesi angolari letterali Copia-incollando il reso il testo ha perso ogni collegamento, intestazione e elenco Nessuna delle due scorciatoie ha funzionato e ho finito per pulire a mano gli articoli per un pomeriggio prima di avere una sensibilità al riguardo.
Diventare sensati significava trattare HTML-to-Markdown come quello che è: una trasformazione strutturata con un insieme chiaro di regole, non un copia-incolla Un elemento di intestazione diventa un # linea. Il grassetto diventa **. Un collegamento diventa [text](url). Una tabella diventa una tabella pipe Una volta che hai quelle mappature e un parser abbastanza tollerante per sopravvivere al markup del mondo reale, la conversione è noiosa e affidabile - che è esattamente quello che vuoi Costruisco [Toolz.dev] (/e metto un browser-based Convertitore HTML a Markdown lì si applicano queste regole, ma questa guida riguarda le regole stesse in modo da capire come dovrebbe essere l'output e perché.
tl; dr: Per convertire HTML in Markdown, mappa gli elementi del blocco sui loro equivalenti Markdown (
<h2>→##,<ul><li>→-,<blockquote>→>,<pre><code>→ un blocco recintato), mappa gli elementi in linea (<strong>→**,<em>→*,<a>→[text](href),<img>→), gira<table>in una tabella pipe Markdown aromatizzata GitHub, decodifica le entità HTML riportandole a caratteri reali e rilascia<script>/<style>. Usa un parser tollerante ai tag non chiusi, e fallo nel browser in modo che i tuoi contenuti non vengano mai caricati.
Perché convertire HTML in Markdown a tutti?
Markdown è il formato portatile del moderno web degli sviluppatori File README, siti di documentazione, blog statici (contenuti Hugo, Jekyll, Astro, Next.js), app di note come Obsidian e Bear, problemi GitHub e sempre più spesso i suggerimenti e il contesto che forniamo ai modelli AI: tutti parlano Markdown It' è testo semplice, si differenzia nettamente in Git e sopravvive allo spostamento da un sistema all'altro senza trascinare con sé una pila di markup di presentazione.
L'HTML, al contrario, è ciò che tu finire con ogni volta che il contenuto passa attraverso un browser o un editor WYSIWYG Copia una sezione da una pagina web, esporta da un CMS, estrai il corpo di un articolo da un'API o prendi il testo formattato da un campo rich-text e ottieni HTML - solitamente HTML disordinato, pieno di elementi wrapper e stili in linea che non vuoi' t desidera in un documento pulito La conversione è il bridge da & quot; contenuto intrappolato nel markup" della presentazione; a & quot; contenuto Posso effettuare la versione, modificare e ripubblicare ovunque."
Gli scenari ricorrono costantemente una volta che li noti Migrazione di un blog da WordPress o Medium Tirando fuori la documentazione da un sistema di aiuto HTML legacy Trasformare un articolo raschiato in una nota Markdown Conversione di una newsletter via email' s HTML in una bozza Markdown Alimentazione di una pagina web's contenuto a un LLM come contesto pulito invece di HTML grezzo che spreca token su <div> zuppa. In ogni caso le alternative manuali - ridigitare o copiare il testo renderizzato e ricostruire la formattazione a mano - sono lente e con perdita. Un convertitore basato su regole non è nessuno dei due.
Come fa HTML mappa a Markdown?
La mappatura si divide naturalmente in due strati: struttura a livello di blocco e formattazione in linea.
Elementi blocco definisci lo scheletro di document's e ciascuno ha una controparte Markdown diretta:
<h1>–<h6>diventare#da parte a parte######linee di intestazione.<p>diventa un paragrafo separato da righe vuote.<ul>/<li>diventare-elenchi puntati;<ol>/<li>diventare1.gli elenchi numerati e gli elenchi nidificati rientrano in due spazi.<blockquote>prefissi ogni riga con>.<hr>diventa---.<pre><code>diventa un blocco di codice recintato con tripli backtick.<table>diventa un tavolo per pipe Markdown dal sapore GitHub.
Elementi in linea decorare il testo all'interno di quei blocchi:
<strong>e<b>diventare**bold**.<em>e<i>diventare*italic*.<code>diventa`inline code`.<a href="...">diventa[link text](href), mantenendo iltitleattributo quando presente.<img>diventa.<del>e<s>diventare~~strikethrough~~(un'estensione Markdown aromatizzata GitHub).<br>diventa una rottura della linea dura: due spazi finali prima della nuova linea.
Eseguire quelle regole su un blocco reale di HTML e la struttura sopravvive intatta Dato questo input:
<article>
<h1>Getting Started</h1>
<p>Convert <strong>HTML</strong> into clean <em>Markdown</em>.</p>
<ul>
<li>Paste from a CMS</li>
<li>Get portable output</li>
</ul>
<pre><code class="language-js">const md = convert(html)</code></pre>
</article>
ottieni:
# Getting Started
Convert **HTML** into clean *Markdown*.
- Paste from a CMS
- Get portable output
```js
const md = convert(html)
```
Vale la pena richiamare due dettagli in quell'output. Primo, il <article> wrapper non ha contribuito nulla - contenitori strutturali come <article>, <section>, e <div> sono trasparenti; il convertitore ricorre in loro e rende i loro figli come blocchi In secondo luogo, la recinzione del codice ha raccolto js come lingua. Quello's perché il <code> elemento portato class="language-js", gli evidenziatori della sintassi della convenzione usano, e un buon convertitore legge quella classe per etichettare la recinzione It's una piccola cosa che fa la differenza tra un blocco di codice che evidenzia sul tuo sito di documenti e uno che fa' t.
Cosa fa sopravvivere un convertitore all'HTML del mondo reale?
Le regole di cui sopra sono la parte facile Il motivo per cui i convertitori regex arrotolati a mano falliscono - e I & #39; ne ho scritti e buttati via un paio - è che il vero HTML rompe costantemente le ipotesi Tre problemi emergono ancora e ancora.
Tag non chiusi. I browser notoriamente perdonano: <p>one<p>two rende come due paragrafi perché a <p> si chiude implicitamente quando si apre un altro elemento di blocco e <li>a<li>b è due elementi di elenco per lo stesso motivo Un parser ingenuo che chiude solo gli elementi su un esplicito </p> anniderà il secondo paragrafo all'interno del primo e mangerà tutto a valle Un convertitore robusto applica le stesse regole implicite-end-tag che definisce la specifica HTML: l'apertura di un elemento a livello di blocco chiude un paragrafo aperto; l'apertura di un <li> chiude il precedente Il mio convertitore fa questo, motivo per cui incollare l'uscita CMS sciatta di solito funziona e basta.
<script> e <style> blocchi. Questi contengono codice e CSS, non contenuto, e il loro contenuto deve essere preso alla lettera (a < all'interno JavaScript non è un tag) e poi è caduto interamente Dimentica di special-case loro e si ottiene sorgente JavaScript sanguinante nel vostro Markdown.
Entità HTML. I contenuti Web sono disseminati di &, ©, —, e riferimenti numerici come ’. In Markdown - che è testo semplice - si vogliono i caratteri veri e propri: &, ©, —, e un vero apostrofo Decodifica di entità nominate e numeriche non è opzionale; saltalo e il tuo Markdown pulito si legge come view-source.
Questo è il motivo per cui ho smesso di provare a convertire HTML con find-and-replace e ho costruito invece un parser tollerante adeguato. Tokenizza l'HTML in un albero: gestisce commenti, elementi vuoti come <br> e <img>, nomi di tag maiuscoli e attributi non citati - e poi cammina su quell'albero emettendo Markdown. In particolare, fa' t fare affidamento sul browser' s DOM, il che significa che la stessa logica viene eseguita anche su un server, ma il profitto pratico per te è semplice: fa' t gettare sul markup disordinato di cui sono fatti i siti Web reali.
Come si usa il convertitore?
Su Toolz.dev/tools/html-to-markdown, incolla il tuo HTML nel riquadro di sinistra e il Markdown appare a destra mentre digiti - there' non c'è caricamento e nessun pulsante Converti per cercare Carica il campione se vuoi vedere ogni costrutto supportato contemporaneamente.
Alcune opzioni coprono le preferenze comuni Scegli il tuo carattere elenco (-, *, o +) per elenchi non ordinati che corrispondono allo stile del tuo progetto's. Mantieni GitHub Flavored Markdown attivo per tabelle e barrato, o disattivato se il tuo target accetta solo CommonMark. Attiva/disattiva & quot; mantieni link" spento quando vuoi la prosa ma non gli URL - utili per trasformare un articolo ricco di link in testo di lettura pulito - e & quot; mantieni immagini" spento per spogliare completamente le immagini La riga delle statistiche mostra parole, intestazioni, collegamenti, immagini, blocchi di codice e un tempo di lettura stimato, che è un rapido controllo di integrità che la struttura si è imbattuta prima di incollare il risultato da qualche parte.
Come per tutto sul sito, la conversione è al 100% lato client Il parser è semplice JavaScript in esecuzione nel browser, quindi le pagine incollate, la documentazione interna e le bozze non pubblicate non vengono mai inviate da nessuna parte That' è il giusto default per il lavoro sui contenuti - dovresti' t dover caricare una bozza su un server stranger' s solo per riformattarlo - e significa che lo strumento continua a funzionare offline Approfondisco il motivo per cui l'elaborazione lato browser è importante nel Guida agli strumenti per la privacy dei dati.
HTML vs Markdown: quando usare quale
Convertirsi tra loro è facile; sapere cosa vuoi è la vera decisione.
| Aspetto | HTML | Contrassegno |
|---|---|---|
| Scopo primario | Rendering in un browser | Scrittura e memorizzazione del testo |
| Leggibilità come fonte | Povero (tag-heavy) | Ottimo (si legge come testo semplice) |
| Differenze GIT | Rumoroso | Pulire |
| Portabilità tra i sistemi | Basso | Alto |
| Controllo preciso del layout | Pieno | Limitato dal design |
| Dove vive | Pagine web, uscita WYSIWYG | README, doc, note, siti statici |
| Curva di apprendimento | Osteiforme | minuto |
Markdown scambia deliberatamente il controllo del layout per semplicità, motivo per cui vince per i contenuti che scrivi, version e muovi, e perde quando hai bisogno di una presentazione a livello di pixel Converti HTML in Markdown quando lo fai' ri acquisisce o migra contento; mantieni HTML quando tu' stai costruendo un pagina. E quando devi andare nella direzione opposta - Markdown in HTML per un campo CMS o un modello di posta elettronica - il Convertitore da markdown a HTML è l'immagine speculare di questo strumento e condivide le stesse convenzioni, quindi i due viaggi di andata e ritorno in modo pulito per strutture comuni.
Dove questo si inserisce in un flusso di lavoro di contenuto
La conversione del formato raramente è l'intero lavoro; it's un passo Dopo aver convertito un articolo in Markdown I'll di solito eseguire il testo attraverso un contatore parole per verificare la lunghezza rispetto a una destinazione e se la fonte aveva entità HTML che necessitano di codifica per qualche altra destinazione, il Codificatore/decodificatore di entità HTML gestisce il contrario Quando I & #39; m ripulire HTML scritto a mano prima della conversione, an Minifier HTML elimina prima il rumore Questi piccoli strumenti si incatenano in una pipeline ripetibile, che è l'intera idea alla base di come penso a un toolkit basato su browser: ho esposto questa filosofia nel Guida al kit per gli sviluppatori web E il più ampio Guida agli strumenti di codifica.
Errori comuni nella conversione di HTML in Markdown
Copia-incolla del testo renderizzato invece di convertire l'HTML. Perdi link, intestazioni ed elenchi: tutta la struttura Converti il markup effettivo.
Ignorando la classe di lingua del codice. Se i tuoi blocchi recintati escono senza una lingua e don' t evidenziare, il convertitore ha lasciato cadere il class="language-x" suggerimento. Uno bravo lo legge.
Supponendo che CommonMark e GFM siano gli stessi. Le tabelle e la barra sono estensioni di GitHub Flavored Markdown, non CommonMark di base Se la tua destinazione è rigorosa CommonMark, una tabella ha vinto' t render - converti con GFM off e gestisci le tabelle in un altro modo.
Fidarsi di un convertitore che carica i tuoi contenuti. Un sacco di & quot;free" convertitori online PUBBLICA IL TUO HTML su un server Per qualsiasi cosa non pubblicata o interna, quel & #39;s una perdita Usa uno strumento lato client.
FAQ
Come faccio a convertire HTML in Markdown?
Incolla il tuo HTML nell'editor e il Markdown viene visualizzato immediatamente - non c'è nessun file da caricare e nessun pulsante di conversione da premere Regola lo stile del punto elenco o la gestione dei collegamenti se preferisci, quindi copia il Markdown o scaricalo come file 'md.
Il convertitore gestisce le tabelle?
Sì. Con GitHub Flavored Markdown abilitato, un HTML viene trasformato in una tabella pipe Markdown: la prima riga diventa l'intestazione, viene inserita una riga del divisore e le righe rimanenti diventano il corpo I caratteri pipe all'interno delle celle vengono eliminati in modo che non rompano la tabella.
Cosa succede ai link e alle immagini?
Le ancore diventano [testo link](href) e le immagini diventano , preservando l'attributo title quando presente Se disattivi & quot; mantieni link& quot; il testo di ancoraggio viene mantenuto ma l'URL viene eliminato, e spegnendo & quot; mantieni immagini& quot; rimuove interamente le immagini - utile quando vuoi solo la prosa.
I blocchi di codice e il codice in linea vengono conservati?
SÌ. UN block becomes a fenced code block, and if the code element carries a class like "language-js" that language is added to the fence. Inline spans are wrapped in backticks, and the code text itself is never escaped or reformatted, so snippets stay exactly as written.
Will it work on messy HTML copied from a website?
That is what it is built for. The parser is tolerant of unclosed tags, uppercase element names, unquoted attributes and stray comments, and it strips