Markdown-preview
Zie je Markdown weergegeven terwijl je typt, in je browser, met alle ruwe HTML ge-escapet in plaats van uitgevoerd.
Draait volledig in je browser. Er wordt niets geüpload, gelogd of opgeslagen.
De HTML die dit oplevert
Schrijf links Markdown en lees het rechts. Alles gebeurt in je browser, dus een concept dat je nog aan niemand wilt laten zien, hoeft niet eerst aan een server te worden getoond.
Hoe het werkt
Het document wordt regel voor regel in blokken gelezen — koppen, alinea's, lijsten, citaten, code, tabellen — en daarna wordt de tekst van elk blok gelezen op inline-elementen: nadruk, codefragmenten, links en afbeeldingen. Alles wat de renderer niet herkent, blijft tekst.
Ruwe HTML wordt ge-escapet in plaats van doorgelaten. Typ je een tag, dan zie je de tag. Dat is een bewuste afwijking van de meeste renderers, die een geselecteerde subset toestaan, en de reden is dat het goed selecteren van die subset een klus is die in veel grotere projecten keer op keer is misgegaan.
Een link wordt alleen gemaakt als het adres begint met een schema uit een korte lijst, gecontroleerd op de gedecodeerde vorm van het adres en niet op wat er getypt is. Wordt hij geweigerd, dan blijft de tekst staan en de link niet, zodat je kunt zien dat er iets was.
Voorbeelden
| Geval | Invoer | Resultaat |
|---|---|---|
| Nadruk en inline code | **bold**, *italic* and `code`. | <p><strong>bold</strong>, <em>italic</em> and <code>code</code>.</p> |
Veelgestelde vragen
Wordt mijn document ergens naartoe gestuurd?
Nee. De renderer is JavaScript dat op deze pagina draait. Er wordt niets geüpload, niets gelogd en niets opgeslagen: je kunt de netwerkverbinding verbreken en de tool blijft werken.
Waarom verschijnt mijn HTML als tekst?
Omdat die met opzet ge-escapet wordt. Markdown staat toe dat een document HTML bevat, en die HTML doorlaten betekent beslissen welke tags en welke attributen veilig zijn — een beslissing die subtiel is, die verandert naarmate browsers veranderen en waarin projecten met veel meer middelen meer dan eens de mist in zijn gegaan. Alles escapen kent die manier van falen niet. De prijs is dat een document dat op inline HTML leunt er niet uitziet zoals op GitHub, en dat is de afweging die hier gemaakt is.
Is het precies CommonMark?
Nee, en ja zeggen zou misleidend zijn. Het is een subset, plus de tabellen, takenlijsten en doorhalingen van GitHub Flavored Markdown. Het dekt koppen, alinea's, nadruk, codefragmenten en codeblokken, links, afbeeldingen, geneste lijsten, citaten en horizontale lijnen. Referentielinks, voetnoten en HTML-blokken zijn niet geïmplementeerd.
Waarom verschijnen externe afbeeldingen niet?
Omdat deze pagina zichzelf niet toestaat afbeeldingen van andere sites te laden. Er een downloaden zou die server vertellen dat je dit document leest, en hoe laat, en dat is precies het lek dat een lokale preview moet voorkomen. De afbeeldingstag staat in de HTML-uitvoer, dus hij werkt waar je die plakt: hij wordt alleen niet van hieruit opgevraagd.
Wat gebeurt er met een link als javascript:…?
Die wordt geen link. Het schema wordt vergeleken met een korte lijst — http, https, mailto, tel, ftp, of geen schema bij een relatief pad — en de controle gebeurt op het gedecodeerde adres, omdat een browser de entiteiten in een attribuut oplost voordat hij ermee aan de slag gaat. De linktekst blijft zichtbaar, zodat je kunt zien wat er stond.
Goed om te weten
- De HTML die de preview toont, is de HTML die de tool je geeft. Er is één uitvoer, niet een veilige om te tonen en een andere om te kopiëren.
- Koppen krijgen geen id-attribuut. Een id uit je document zou dezelfde naamruimte delen als die van deze pagina, en een botsing zou de pagina rond de preview breken.
- Links naar andere sites krijgen rel="nofollow noopener noreferrer", zodat een pagina die je van hieruit opent geen enkele controle over deze pagina krijgt.