Markdowns enkle syntaks gjør det til et utmerket alternativ til HTML. Språket har alltid støttet innbygging av HTML, men nå kan du gå den andre veien og bygge inn Markdown i HTML.

Ved å bruke et enkelt bibliotek kan du være vert for innebygd Markdown på nettsidene dine og få den konvertert til riktig HTML på et øyeblikk.

Hva gjør md-block?

Din nåværende prosess kan innebære å lage Markdown-filer for hånd, og deretter konvertere dem til HTML. Slik fungerer mange moderne CMS-applikasjoner. Eller du kan bruke et rammeverk som Kantet for å gjengi Markdown til sider.

md-blokkbiblioteket er strengt tatt ikke et alternativ; i stedet oppfyller den en litt annen brukssituasjon. Den konverterer inline Markdown til tilsvarende HTML. Du kan bygge inn Markdown i HTML-filene dine og gjengi den på klienten på forespørsel.

Slik kan det se ut:

<html>
<hode>...</head>
<kropp>
<md-blokk>
# Overskrift
Noen *innebygde* Markdown som `md-block` kan konvertere for deg!
</md-block>
</body>
</html>

Det er en god idé å venstrejustere den innebygde Markdown-koden, uten noen innledende innrykk. Dette er fordi ledende mellomrom kan være betydelig i Markdown, i motsetning til HTML.

Biblioteket introduserer sitt eget tilpassede HTML-element, md-blokk. Selv om dette elementet ikke er det del av HTML-standarden, dette er en gyldig teknikk. Web Components-standarden (MDN) inkluderer et API kalt Custom Elements. Denne APIen støtter dynamisk registrering av tilpassede elementer ved hjelp av JavaScript.

Før du laster inn md-block-biblioteket, vil denne siden gjengi på en kjent måte:

Selvfølgelig kan du style md-block-elementet slik at det ser mer ut som det ville gjort i et tekstredigeringsprogram. Med forhåndsformatert mellomrom og en monospace-font er det i det minste litt lettere å lese:

<stil>md-block { white-space: pre; font-familie: monospace; }</style>

Du vil kanskje ha denne typen utdata hvis du skriver en opplæring på Markdown. Den lar deg forklare Markdown-syntaksen samtidig som du enkelt kan redigere eksempelet Markdown:

Men md-blocks partytriks er å konvertere den Markdown til endelig HTML.

Selv med standard nettleserstiler, vises innholdet nå akkurat som din vanlige HTML, selv om du sendte det til nettleseren som Markdown:

Hvordan bruke md-block

Når du har lagt til md-block-biblioteket på siden din, kan du skrive inn Markdown md-blokk elementer. Biblioteket vil da formatere Markdown automatisk, og du kan fortsette å bygge inn Markdown etter behov.

Det er imidlertid noen få varianter av denne prosessen.

Hent skriptet eksternt eller installer det selv

Den enkleste måten å komme i gang på er å referere til biblioteket fra den offisielle md-block-nettsiden:

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

Dette er kanskje ikke den mest effektive tilnærmingen, men det er definitivt den raskeste. Bare legg til denne koden til din hode og siden din vil automatisk gjengi alt i et md-block-element til HTML:

Du kan selvfølgelig laste ned den JavaScript-filen og være vert for den på ditt eget nettsted. Eller du kan installere den via npm:

npm installere md-blokkere

Markdown-blokker vs. Inline Markdown

Standardelementet, oppkalt etter selve biblioteket, er md-blokk. Men du kan også bruke en md-span element for inline Markdown, for eksempel tekst i midten av en setning:

Brukstilfellet for inline Markdown er sannsynligvis mindre vanlig, men du kan fortsatt bruke det likevel:

<s>Et HTML-avsnitt som inneholder <md-span>*kursiv*</md-span> tekst.</s>

Slik syntakser du Markdown-kodeblokker med prisme

Prisme er en syntaks highlighter som Lea Verou, skaperen av md-block, var med på å lage. Du kan bruke den til å markere forhåndsformaterte kodeblokker på en nettside, inkludert de som md-block genererer.

Så, med denne HTML:

<html>
<kropp>
<md-blokk>
```javascript
funksjontorget(Antall) {
komme tilbake nummer * nummer;
}
```
</md-block>
<script src="prism.js"></script>
</body>
</html>

Du vil se pent formatert kode med syntaktisk utheving:

Mulighetene dine for å skrive på nettet har nettopp økt

Hvordan du bruker md-block er opp til deg, men det er mye potensiale for oppfinnsomme løsninger som bruker den. Du kan bruke den til å kjøre et veldig lett CMS for forfattere som er trygge på å bruke Markdown, men ikke HTML.

Markdown er et perfekt språk for et generelt publikum. Bruken av verktøy som Slack vil mest sannsynlig øke bruken ytterligere.