Ik migreer content voor de kost, in die zin dat iedereen die een WordPress site voor een decennium heeft gerund uiteindelijk doet Toen ik een partij oude berichten uit een paginabuilder en in een Markdown-gebaseerd docs systeem verplaatste, ontdekte ik wat & quot; clean HTML" echt betekent in het wild: <p> tags met inline stijlen, leeg <span>s inpakken van enkele woorden, <div>s drie niveaus diep rond een alinea, en af en toe een tag die gewoon nooit gesloten was Dat in een Markdown veld plakken gaf me een muur van letterlijke hoek haakjes Kopieer-plakken de uitgegeven tekst verloor elke link, kop en lijst Geen van beide snelkoppelingen werkte, en uiteindelijk heb ik een middag lang artikelen met de hand schoongemaakt voordat ik er verstandig over werd.
Verstandig worden betekende HTML-naar-Markdown behandelen als wat het is: een gestructureerde transformatie met een duidelijke set regels, geen copy-paste Een kopelement wordt een # lijn. Stoutmoedig wordt **. Een link wordt [text](url). Een tabel wordt een pijptafel Als je eenmaal die mappings hebt en een parser die tolerant genoeg is om real-world markup te overleven, is de conversie saai en betrouwbaar - en dat is precies wat je wilt Ik bouw [Toolz.dev] (/en zet een browser-based HTML naar Markdown converter daar dat deze regels toepast, maar deze gids gaat over de regels zelf, zodat je begrijpt hoe de uitvoer eruit moet zien en waarom.
tl;dr: Om HTML naar Markdown te converteren, wijst u blokelementen toe aan hun Markdown-equivalenten (
<h2>→##,<ul><li>→-,<blockquote>→>,<pre><code>→ een omheind blok), kaart inline elementen (<strong>→**,<em>→*,<a>→[text](href),<img>→), draaien<table>decodeer HTML-entiteiten terug naar echte tekens in een Markdown-pijptabel met GitHub-smaak en zet ze neer<script>/<style>. Gebruik een parser die tolerant is voor niet-gesloten tags en doe dit in de browser, zodat uw inhoud nooit wordt geüpload.
Waarom überhaupt HTML naar Markdown converteren?
Markdown is het draagbare formaat van het moderne ontwikkelaarsweb. README-bestanden, documentatiesites, statische blogs (Hugo, Jekyll, Astro, Next.js-inhoud), noteer apps zoals Obsidian en Bear, GitHub-problemen en in toenemende mate de aanwijzingen en context die we aan AI-modellen doorgeven - ze spreken allemaal Markdown. Het en#39; is platte tekst, het diffundeert netjes in Git en het overleeft terwijl het van het ene systeem naar het andere wordt verplaatst zonder er een stapel presentatiemarkeringen mee te slepen.
HTML daarentegen is wat jij eindigen met telkens wanneer content door een browser of een WYSIWYG-editor gaat Kopieer een sectie van een webpagina, exporteer van een CMS, haal de hoofdtekst van een artikel uit een API of pak geformatteerde tekst uit een veld met rijke tekst, en je krijgt HTML - meestal rommelige HTML, vol wrapperelementen en inline-stijlen die je niet hebt 't wilt in een schoon document De conversie is de bridge van & quot; content gevangen in presentatie markup" naar " inhoud Ik kan overal versie, bewerken en opnieuw publiceren."
De scenario's komen constant terug zodra je ze opmerkt Migreren van een blog uit WordPress of Medium Documentatie uit een legacy HTML-helpsysteem trekken Een geschraapt artikel omzetten in een Markdown-notitie Een e-mailnieuwsbrief converteren' s HTML in een Markdown-concept Een webpagina feeding' s content naar een LLM als schone context in plaats van onbewerkte HTML die tokens verspilt op <div> soep. in elk geval zijn de handmatige alternatieven - opnieuw typen of kopiëren van weergegeven tekst en het opnieuw opbouwen van de opmaak met de hand - langzaam en verliesgevend. Een op regels gebaseerde converter is geen van beide.
Hoe wordt HTML toegewezen aan Markdown?
De mapping splitst zich op natuurlijke wijze in twee lagen: structuur op blokniveau en inline-opmaak.
Blokelementen definieer het document's skelet, en elk heeft een directe Markdown-tegenhanger:
<h1>tentamen<h6>worden#doorgaand######koplijnen.<p>wordt een alinea gescheiden door lege regels.<ul>/<li>worden-opsommingstekens lijsten;<ol>/<li>worden1.genummerde lijsten en geneste lijsten inspringen met twee spaties.<blockquote>geeft elke regel een voorvoegsel met>.<hr>HALD---.<pre><code>wordt een omheind codeblok met drievoudige backticks.<table>wordt een GitHub Flavoured Markdown pijptafel.
Inline-elementen versier tekst binnen die blokken:
<strong>en<b>worden**bold**.<em>en<i>worden*italic*.<code>HALD`inline code`.<a href="...">HALD[link text](href), het behouden van detitleattribuut indien aanwezig.<img>HALD.<del>en<s>worden~~strikethrough~~(een Markdown-extensie met GitHub-smaak).<br>wordt een harde lijnbreuk - twee achterliggende ruimtes vóór de nieuwe lijn.
Voer die regels uit over een echt blok HTML en de structuur overleeft intact Gegeven deze 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>
je krijgt:
# Getting Started
Convert **HTML** into clean *Markdown*.
- Paste from a CMS
- Get portable output
```js
const md = convert(html)
```
Twee details in die output zijn de moeite waard om te noemen. Ten eerste, de <article> wrapper droeg niets bij - structurele containers zoals <article>, <section>, en <div> zijn transparant; de converter keert terug in hen en geeft hun kinderen weer als blokken Ten tweede, de code hek opgepakt js als taal. Dat's omdat de <code> element gedragen class="language-js", de conventie syntaxis highlighters gebruiken, en een goede converter leest die klasse om het hek te labelen. It' is een klein ding dat het verschil maakt tussen een codeblok dat op uw docs site wordt gemarkeerd en een dat doet't.
Wat zorgt ervoor dat een converter HTML uit de echte wereld overleeft?
De regels hierboven zijn het makkelijke deel De reden dat handgerolde regex converters falen - en I' een paar hebben geschreven en weggegooid - is dat echte HTML voortdurend aannames verbreekt Drie problemen komen steeds weer naar voren.
Niet-gesloten tags. Browsers zijn beroemd vergevingsgezind: <p>one<p>two geeft als twee paragrafen weer omdat a <p> impliciet sluit wanneer een ander blokelement wordt geopend, en <li>a<li>b is om dezelfde reden twee lijstitems Een naïeve parser die alleen elementen op een expliciete </p> nestelt de tweede alinea in de eerste en verminkt alles stroomafwaarts. Een robuuste converter past dezelfde impliciete eindtagregels toe die de HTML-specificatie definieert: het openen van een element op blokniveau sluit een open paragraaf; het openen van een <li> sluit de vorige Mijn converter doet dit, daarom werkt slordige CMS-uitgang plakken meestal gewoon.
<script> en <style> blocks. Deze bevatten code en CSS, geen inhoud, en de inhoud ervan moet woordelijk worden overgenomen (a < inside JavaScript is geen tag) en vervolgens volledig laten vallen Vergeet ze in een speciaal geval te plaatsen en u krijgt een JavaScript-bron die in uw Markdown bloedt.
HTML-entiteiten. Webinhoud is bezaaid met &, ©, —, , en numerieke referenties zoals ’. In Markdown - wat platte tekst is - wil je de werkelijke karakters: &, ©, —, en een echte apostrof Het decoderen van benoemde en numerieke entiteiten is niet optioneel; sla het over en uw schone Markdown leest als view-source.
Dit is de reden waarom ik stopte met het converteren van HTML met zoeken en vervangen en in plaats daarvan een goede tolerante parser bouwde. Het tokeniseert de HTML in een boom - het verwerken van opmerkingen, lege elementen zoals <br> en <img>, hoofdletters tag namen, en niet geciteerde attributen - en dan loopt die boom emitterende Markdown Opvallend, het doet 't vertrouwen op de browser' s DOM, wat betekent dat dezelfde logica draait op een server ook, maar de praktische uitbetaling voor u is eenvoudig: het doet ' t gooien op de rommelige markup die echte websites zijn gemaakt van.
Hoe gebruik ik de converter?
On Toolz.dev/tools/html-to-markdown, plak je HTML in het linkerdeelvenster en de Markdown verschijnt aan de rechterkant terwijl je typt - there' s geen upload en geen knop Converteren om naar te zoeken Laad het voorbeeld als je elk ondersteund construct in één keer wilt zien.
Een paar opties dekken de gemeenschappelijke voorkeuren Kies je bullet-teken (-, *, of +) voor ongeordende lijsten die overeenkomen met uw project' s stijl Houd GitHub Flavoured Markdown aan voor tabellen en doorhalen, of uit als uw doelwit alleen CommonMark accepteert Schakel & quot; link & quot; uit wanneer u het proza wilt, maar niet de URL's - handig om van een link-zwaar artikel schone leestekst te maken - en & quot;houd afbeeldingen en quot; geheel uit om afbeeldingen te strippen De rij met statistieken toont woorden, koppen, links, afbeeldingen, codeblokken en een geschatte leestijd, wat een snelle controle op gezond verstand is die de structuur tegenkwam voordat u het resultaat ergens plakt.
Zoals met alles op de site, de conversie is 100% client-side De parser is gewoon JavaScript draaien in uw browser, dus geplakte pagina's, interne documentatie, en ongepubliceerde concepten worden nooit ergens verzonden Dat & #39; is de juiste standaard voor inhoud werk - je zou moeten& #39; t moet een concept uploaden naar een vreemde & #39; s server alleen maar om het opnieuw te formatteren - en het betekent dat de tool blijft werken offline Ik ga dieper over waarom browser-side verwerking van belang is in de Handleiding voor gegevensprivacytools.
HTML vs Markdown: wanneer welke te gebruiken
Het is gemakkelijk om tussen hen te converteren; weten wat je wilt is de echte beslissing.
| Aspect | HTML | Markdown |
|---|---|---|
| Primair doel | Renderen in een browser | Tekst schrijven en opslaan |
| Leesbaarheid als bron | Arm (tag-zwaar) | Uitstekend (leest als platte tekst) |
| Git diffs | Lawaaierig | Clean |
| Draagbaarheid over systemen | Laag | High |
| Nauwkeurige lay-outcontrole | Volledige | Beperkt door ontwerp |
| Waar het leeft | Webpagina's, WYSIWYG-uitvoer | README's, documenten, notities, statische sites |
| Leercurve | Steil | protocol |
Markdown ruilt opzettelijk lay-outcontrole in voor eenvoud, daarom wint het voor inhoud die u schrijft, versie maakt en beweegt, en verliest het wanneer u presentatie op pixelniveau nodig heeft HTML naar Markdown converteren wanneer u ' bezig met vastleggen of migreren genoegen; HTML behouden wanneer u ' bezig met het bouwen van een page. En wanneer u de andere kant op moet - Markdown in HTML voor een CMS-veld of e-mailsjabloon - de Markdown naar HTML-converter is het spiegelbeeld van deze tool en deelt dezelfde conventies, dus de twee retourvluchten netjes voor gemeenschappelijke structuren.
Waar dit past in een content workflow
Conversie van formaten is zelden de hele taak; it's één stap Nadat ik een artikel heb omgezet naar Markdown I' zal de tekst meestal door een woordenteller om de lengte te controleren aan de hand van een doel, en als de bron HTML-entiteiten had die terugcodering nodig hebben voor een andere bestemming, is de HTML-entiteitscodeerder/decoder verwerkt het omgekeerde Wanneer I'm handgeschreven HTML opruimen vóór conversie, een HTML-minifier stript eerst de ruis Deze kleine tools keten samen in een herhaalbare pijplijn, dat is het hele idee achter hoe ik denk over een browser-gebaseerde toolkit - Ik heb die filosofie uiteengezet in de Handleiding voor webontwikkelaars en de bredere Handleiding voor coderingshulpmiddelen.
Veelvoorkomende fouten bij het converteren van HTML naar Markdown
Gerenderde tekst kopiëren in plaats van de HTML te converteren. U verliest links, koppen en lijsten - de hele structuur Converteer de daadwerkelijke opmaak.
Het negeren van de code taalklasse. Als uw omheinde blokken eruit komen zonder taal en don't markeren, liet de converter de class="language-x" hint. Een goede leest het.
Ervan uitgaande dat CommonMark en GFM hetzelfde zijn. Tabellen en doorhalen zijn GitHub Flavoured Markdown-extensies, geen kern CommonMark. Als uw bestemming strikt CommonMark is, wordt een tabel gewonnen't renderen - converteren met GFM uit en tabellen op een andere manier verwerken.
Vertrouwen op een converter die uw inhoud uploadt. Veel "free" online converters POST uw HTML naar een server Voor alles wat niet gepubliceerd of intern is, is dat' een lek Gebruik een client-side tool.
FAQ
Hoe converteer ik HTML naar Markdown?
Plak je HTML in de editor en de Markdown verschijnt onmiddellijk - er is geen bestand om te uploaden en geen knop om te converteren om op te drukken Pas de opsommingsstijl of linkafhandeling aan als je wilt, kopieer vervolgens de Markdown of download deze als een .md bestand.
Gaat de converter tafels?
Ja. Met GitHub Flavoured Markdown ingeschakeld, een HTML wordt omgezet in een Markdown-pijptabel: de eerste rij wordt de header, een deelrij wordt ingevoegd en de overige rijen worden de body. Pijptekens in cellen worden ontsnapt, zodat ze de tabel niet breken.
Wat gebeurt er met links en afbeeldingen?
Ankers worden [tekst koppelen](href) en beelden worden , behoud van het titelattribuut indien aanwezig Als u " links" houdt; de ankertekst wordt bewaard maar de URL wordt verwijderd, en zet " keep images" verwijdert afbeeldingen volledig - handig wanneer u alleen het proza wilt.
Worden codeblokken en inline-code bewaard?
Ja. A 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