De eenvoudige syntaxis van Markdown maakt het een uitstekend alternatief voor HTML. De taal heeft altijd het insluiten van HTML ondersteund, maar nu kun je de andere kant op gaan en Markdown insluiten in HTML.

Met behulp van een eenvoudige bibliotheek kunt u ingesloten Markdown in uw webpagina's hosten en deze direct naar de juiste HTML laten converteren.

Wat doet md-block?

Uw huidige proces kan inhouden dat u Markdown-bestanden met de hand maakt en ze vervolgens omzet in HTML. Zo werken veel moderne CMS-applicaties. Of u kunt een raamwerk gebruiken zoals Hoekig om Markdown in pagina's weer te geven.

De md-block-bibliotheek is niet strikt een alternatief; in plaats daarvan vervult het een iets andere use-case. Het converteert inline Markdown naar zijn equivalente HTML. U kunt Markdown op verzoek insluiten in uw HTML-bestanden en op de client weergeven.

Hier is hoe dat eruit zou kunnen zien:

<html>
<hoofd>...</head>
<lichaam>
<md-blok>
# Koers
Sommige *embedded* Markdown die `md-block` voor je kan converteren!
</md-block>
</body>
</html>
instagram viewer

Het is een goed idee om uw ingesloten Markdown-code links uit te lijnen, zonder enige inspringing. Dit komt omdat leidende witruimte significant kan zijn in Markdown, in tegenstelling tot HTML.

De bibliotheek introduceert zijn eigen aangepaste HTML-element, md-blok. Hoewel dit element niet is onderdeel van de HTML-standaard, dit is een geldige techniek. De Web Components-standaard (MDN) bevat een API genaamd Custom Elements. Deze API ondersteunt dynamische registratie van aangepaste elementen met behulp van JavaScript.

Voordat de md-block-bibliotheek wordt geladen, wordt deze pagina op een vertrouwde manier weergegeven:

Natuurlijk kun je het md-block-element zo opmaken dat het er meer uitziet als in een teksteditor. Met voorgeformatteerde witruimte en een monospace-lettertype is het op zijn minst een beetje gemakkelijker te lezen:

<stijl>md-blok { witruimte: pre; font-familie: monospace; }</style>

Misschien wilt u dit soort uitvoer als u een zelfstudie over Markdown schrijft. Hiermee kunt u de Markdown-syntaxis uitleggen terwijl u eenvoudig uw voorbeeld Markdown kunt bewerken:

Maar de feesttruc van md-block is om die Markdown om te zetten in definitieve HTML.

Zelfs met standaard browserstijlen wordt de inhoud nu weergegeven net als uw normale HTML, ook al heeft u deze naar de browser gestuurd als Markdown:

Hoe md-block te gebruiken

Zodra je de md-block-bibliotheek aan je pagina hebt toegevoegd, kun je je Markdown in md-blok elementen. De bibliotheek formatteert vervolgens uw Markdown automatisch en u kunt Markdown naar wens blijven insluiten.

Er zijn echter een paar variaties op dit proces.

Bron het script op afstand of installeer het zelf

De eenvoudigste manier om aan de slag te gaan, is door naar de bibliotheek te verwijzen vanaf de officiële md-block-website:

<scripttype="module" src="https://md-block.verou.me/md-block.js"></script>

Dit is misschien niet de meest efficiënte aanpak, maar het is zeker de snelste. Voeg deze code toe aan je hoofd en uw pagina zal automatisch alles in een md-block-element naar HTML weergeven:

U kunt dat JavaScript-bestand natuurlijk downloaden en op uw eigen site hosten. Of u kunt het installeren via npm:

npm installeren md-blok

Markdown-blokken vs. Inline afwaardering

Het standaardelement, genoemd naar de bibliotheek zelf, is md-blok. Maar je kunt ook een md-span element voor inline Markdown, zoals tekst in het midden van een zin:

De use case voor inline Markdown komt waarschijnlijk minder vaak voor, maar je kunt het toch gebruiken:

<p>Een HTML-paragraaf met <md-span>*cursief*</md-span> tekst.</p>

Markdown-codeblokken syntaxis markeren met prisma

Prisma is een syntaxis-highlighter die Lea Verou, maker van md-block, mede heeft gemaakt. U kunt het gebruiken om vooraf opgemaakte codeblokken in een webpagina te markeren, inclusief de blokken die door md-block worden gegenereerd.

Dus met deze HTML:

<html>
<lichaam>
<md-blok>
```javascript'
functievierkant(nummer) {
opbrengst nummer * nummer;
}
```
</md-block>
<script src="prism.js"></script>
</body>
</html>

Je ziet mooi opgemaakte code met syntactisch bewuste markering:

Uw mogelijkheden om online te schrijven zijn zojuist vergroot

Hoe je md-block gebruikt, is aan jou, maar er is veel potentieel voor inventieve oplossingen die het gebruiken. Je zou het kunnen gebruiken om een ​​zeer lichtgewicht CMS uit te voeren voor schrijvers die zeker Markdown gebruiken, maar geen HTML.

Markdown is een perfecte taal voor een algemeen publiek. De acceptatie door tools zoals Slack zal het gebruik hoogstwaarschijnlijk nog verder verhogen.