HTML naar Markdown omzetten

Zo zet je HTML om naar Markdown

1. Kies de richting: HTML → Markdown of Markdown → HTML.
2. Plak je code in het invoervak, of klik op Bestand openen om een .html-, .htm-, .md- of .txt-bestand van je computer te laden (maximaal 10 MB).
3. Pas de opties aan. Voor HTML → Markdown kies je de stijl van de Koppen, het Opsommingsteken en de stijl van de Codeblokken. Voor Markdown → HTML staat HTML opschonen (scripts en event handlers verwijderen) standaard aan.
4. Klik op Omzetten. Het resultaat wordt ook bijgewerkt terwijl je typt.
5. Kopieer of download het resultaat. Richting omdraaien zet het resultaat terug in de invoer, zodat je het de andere kant op kunt omzetten en kunt controleren of heen en terug hetzelfde oplevert.

Het Voorbeeld onder het resultaat laat zien hoe de Markdown wordt weergegeven, zodat je de omzetting in één oogopslag kunt controleren.

Wat de omzetting van HTML naar Markdown doet

De converter leest je HTML met de eigen parser van de browser, in een inert document: scripts draaien niet en afbeeldingen worden niet gedownload. Daarna doorloopt hij de structuur van de pagina en schrijft hij voor elk element het Markdown-equivalent:

• <h1> tot en met <h6> worden koppen. ATX (# Titel) schrijft # tot en met ######; Setext (onderstreept) onderstreept koppen van niveau 1 en 2 met === of --- (niveaus 3 tot en met 6 gebruiken altijd #).
• <strong> en <b> worden **vet**, <em> en <i> worden _cursief_, inline <code> krijgt backticks.
• Links worden [tekst](url "titel") en afbeeldingen worden ![alt](src).
• Lijsten gebruiken het gekozen teken (-, * of +); genummerde lijsten behouden hun start-nummer, en geneste lijsten springen in.
• <pre><code> wordt een codeblok, Fenced (```) of Ingesprongen (4 spaties).
• <blockquote>, <hr> en regeleinden worden ook omgezet.
• <script>, <style>, <iframe>, <noscript> en vergelijkbare elementen worden met hun inhoud verwijderd.

Tekens die anders als Markdown-syntaxis zouden worden gelezen, zoals een * of # aan het begin van een regel, krijgen een backslash ervoor, zodat de tekst letterlijk blijft.

GitHub Flavored Markdown

Met GitHub Flavored Markdown (tabellen, ~~doorhalen~~, takenlijsten) aangevinkt:

• Tabellen worden pipe-tabellen met uitgelijnde kolommen. De kop komt uit een <thead>-rij of een rij die alleen uit <th>-cellen bestaat; is die er niet, dan wordt een lege kopregel toegevoegd, omdat GFM er een vereist. De uitlijning van kolommen wordt gelezen uit align="right" of style="text-align: center". Verticale strepen in cellen worden geëscapet als \|, regeleinden worden <br>, en een colspan wordt aangevuld met lege cellen. Een <caption> wordt als alinea boven de tabel geschreven.
• <del>, <s> en <strike> worden ~~doorgehaald~~.
• Selectievakjes aan het begin van lijstitems worden items van een takenlijst: - [x] klaar, - [ ] te doen.

Markdown heeft geen equivalent voor geneste tabellen, samengevoegde rijen of celopmaak. Een tabel die een andere tabel bevat, blijft als ruwe HTML staan, wat de meeste Markdown-renderers accepteren. Zonder de GFM-optie blijft elke tabel HTML.

Markdown → HTML

In de andere richting wordt de Markdown weergegeven met een parser die CommonMark volgt, met de GFM-extensies als de optie aanstaat. Het resultaat zijn HTML-fragmenten, klaar om in een CMS, een e-mailtemplate of een webpagina te plakken. Is HTML opschonen (scripts en event handlers verwijderen) aangevinkt, dan wordt ruwe HTML in de Markdown opgeschoond: <script>-tags, onclick-attributen en javascript:-links worden verwijderd. Vink het alleen uit voor Markdown die je zelf hebt geschreven.