Markdown live voorbeeld en HTML

Markdown-voorbeeld met tabellen, takenlijsten en afbeeldingen

Verticale streepjes, koppeltekens en dubbele punten zijn genoeg om in Markdown een tabel te bouwen, en dit Markdown-voorbeeld tekent hem terwijl je typt. De bron staat in het linkerpaneel, de weergegeven pagina in het rechter. Gebruik het om een README-concept, een changelog of een ticketopmerking te controleren voordat je die elders plakt. Een teller boven de panelen toont de woorden en tekens van je bron.

Welke syntaxis het voorbeeld weergeeft

De pagina gebruikt de bibliotheek marked in GitHub-flavoured modus. Ze geeft koppen van niveau 1 tot 6, vet, cursief, ~~doorhalen~~, inline code, omheinde codeblokken, citaten, geordende en ongeordende lijsten, geneste lijsten, takenlijsten, horizontale lijnen, links, afbeeldingen en tabellen weer. Een kaal adres als https://example.com wordt een link zonder haakjes. Takenlijsten tonen selectievakjes waarop je niet kunt klikken.

Eén regeleinde in de bron geeft één regeleinde in de uitvoer. Een lege regel begint een nieuwe alinea. Een taallabel na de openende omheining, zoals js, wordt geaccepteerd, maar de code krijgt geen kleuren.

Een tabel schrijven: kopregel, scheidingsregel, dubbele punten

Een tabel heeft een kopregel nodig en daaronder een scheidingsregel van koppeltekens. Dubbele punten in de scheidingsregel bepalen de uitlijning: :-- is links, :-: is gecentreerd en --: is rechts. De buitenste streepjes zijn optioneel. Schrijf \| als een cel een verticaal streepje moet bevatten. Vet, cursief, code en links werken binnen cellen.

Een rij met te weinig cellen krijgt lege cellen aan het eind. Cellen voorbij de kop vallen weg. Een tabel kan direct op een regel tekst volgen, zonder lege regel. Maar een cel bevat maar één regel inline tekst: een lijst of een tweede alinea past niet, en een getypte <br> verschijnt als tekst. Een brede tabel scrolt zijwaarts binnen het voorbeeld.

De twee panelen en de scheidingslijn gebruiken

1. Typ of plak Markdown in het paneel "Markdown-bron". Het paneel "Live voorbeeld" wordt bij elke toetsaanslag bijgewerkt.
2. Sleep de scheidingslijn tussen de panelen met een muis, een vinger of een pen. Dubbelklikken zet hem terug op 50/50. Met het toetsenbord zet je de focus op de scheidingslijn en druk je op Links of Rechts (2 procent), Shift met een pijl (10 procent), Home, End of Enter (herstellen).
3. Druk op "Grote weergave" om het scherm te vullen. De paneelbreedte blijft zoals je hem instelde.
4. Druk op "HTML kopiëren" om de opgeschoonde HTML-body te kopiëren, of op "Opslaan als HTML" om document.html te downloaden met een klein stijlblad dat tabellen bevat.

De breedte blijft tussen 15 en 85 procent. De browser onthoudt hem in de lokale opslag van dit apparaat. Onder 860 px worden de panelen gestapeld en wordt de scheidingslijn verborgen.

Ruwe HTML, links en externe afbeeldingen

HTML die je in de bron typt, wordt als tekst getoond. Hij wordt nooit uitgevoerd. Links behouden alleen deze doelen: http, https, mailto, #anker en relatieve paden. Elke andere link verliest zijn doel.

Externe afbeeldingen worden in het voorbeeld niet geladen, omdat het laden van een afbeelding je browser contact laat maken met de site die haar host. Een plaatshouder met de alternatieve tekst komt in hun plaats. Zet "Externe afbeeldingen laden" aan om ze te zien. Afbeeldingen die zijn ingesloten als data:image/png;base64, (ook JPEG, GIF, WebP, AVIF) worden altijd getoond. De gekopieerde en opgeslagen HTML behoudt elke afbeeldingstag met zijn adres.

Wat ontbreekt en waar je tekst naartoe gaat

Er is geen syntaxiskleuring, geen voetnoten, geen wiskunde, geen emoji-shortcodes zoals :smile: en geen front matter. Een blok tussen twee ----regels verschijnt als een lijn en een kop. De twee panelen scrollen niet samen.

De bibliotheken marked en dompurify worden geladen wanneer de pagina opent. Als het laden mislukt, toont het voorbeeld een melding. Daarna wordt je Markdown in de browser omgezet en nergens naartoe gestuurd. Je kunt dit controleren in het netwerkpaneel. Het klembord wordt alleen gebruikt als je op "HTML kopiëren" drukt, en een bestand wordt alleen gemaakt als je op "Opslaan als HTML" drukt.

Veelgestelde vragen (FAQ)