Markdowni lihtne süntaks muudab selle suurepäraseks alternatiiviks HTML-ile. Keel on alati toetanud HTML-i manustamist, kuid nüüd saate minna teist teed ja manustada Markdowni HTML-i.

Lihtsa teegi abil saate oma veebilehtedel majutada manustatud Markdowni ja lasta selle õigeks HTML-iks teisendada.

Mida md-block teeb?

Teie praegune protsess võib hõlmata Markdowni failide käsitsi loomist ja seejärel nende teisendamist HTML-i. Nii töötavad paljud kaasaegsed CMS-i rakendused. Või võite kasutada raamistikku nagu Nurk, et renderdada Markdown lehtedeks.

md-ploki teek ei ole rangelt alternatiiv; selle asemel täidab see veidi teistsugust kasutusjuhtumit. See teisendab tekstisisese Markdowni samaväärseks HTML-iks. Saate Markdowni oma HTML-failidesse manustada ja soovi korral kliendis renderdada.

See võib välja näha järgmiselt.

<html>
<pea>...</head>
<keha>
<md-plokk>
# Pealkiri
Mõni *manustatud* märgistus, mida "md-block" saab teie eest teisendada!
</md-block>
</body>
</html>

Soovitatav on joondada oma manustatud Markdowni kood vasakule ilma eesmise taandeta. Seda seetõttu, et erinevalt HTML-ist võib eesotsas olevad tühikud olla Markdownis olulised.

Teek tutvustab oma kohandatud HTML-i elementi, md-plokk. Kuigi see element ei ole osa HTML-i standardist, see on kehtiv tehnika. Veebikomponentide standard (MDN) sisaldab API-d nimega Custom Elements. See API toetab kohandatud elementide dünaamilist registreerimist JavaScripti abil.

Enne md-blocki teegi laadimist renderdatakse see leht tuttaval viisil:

Muidugi saate md-blocki elementi stiilida, et see näeks välja rohkem nagu tekstiredaktoris. Eelvormindatud tühiku ja monotühikulise fondi abil on seda vähemalt natuke lihtsam lugeda:

<stiilis>md-block { tühik: pre; font-perekond: monospace; }</style>

Sellist väljundit võiksite soovida, kui kirjutate Markdowni kohta õpetust. See võimaldab teil selgitada Markdowni süntaksit, võimaldades samal ajal hõlpsasti muuta Markdowni näidist:

Kuid md-blocki peotrikk on teisendada see Markdown lõplikuks HTML-iks.

Isegi brauseri vaikestiilide korral kuvatakse sisu nüüd nagu teie tavaline HTML, kuigi saatsite selle brauserisse Markdownina:

Kuidas kasutada md-blocki

Kui olete md-blocki teegi oma lehele lisanud, saate oma Markdowni sisse kirjutada md-plokk elemendid. Seejärel vormindab teek teie Markdowni automaatselt ja saate Markdowni manustamist vastavalt vajadusele jätkata.

Sellel protsessil on siiski mõned variatsioonid.

Hankige skript eemalt või installige see ise

Lihtsaim viis alustamiseks on viidata teegile ametlikul md-blocki veebisaidil:

<skripti tüüp="moodul" src="https://md-block.verou.me/md-block.js"></script>

See ei pruugi olla kõige tõhusam meetod, kuid kindlasti kiireim. Lihtsalt lisage see kood oma pea ja teie leht renderdab kõik md-block elemendis olevad asjad automaatselt HTML-i:

Loomulikult saate selle JavaScripti faili alla laadida ja oma saidil majutada. Või saate selle installida npm kaudu:

npm installida md-blokk

Markdowni plokid vs. Tekstisisene allahindlus

Vaikeelement, mis on nime saanud teegi enda järgi, on md-plokk. Kuid võite kasutada ka an md-span tekstisisese märgistuse element, näiteks tekst lause keskel:

Inline Markdowni kasutusjuhtum on tõenäoliselt vähem levinud, kuid saate seda siiski kasutada:

<lk>HTML-lõik, mis sisaldab <md-span>*kaldkiri*</md-span> tekst.</lk>

Kuidas süntaksis esile tõsta märgistuskoodiplokke prisma abil

Prisma on süntaksi esiletõstja, mille lõi md-blocki looja Lea Verou. Saate seda kasutada veebilehel eelvormindatud koodiplokkide esiletõstmiseks, sealhulgas need, mida md-block genereerib.

Niisiis, selle HTML-iga:

<html>
<keha>
<md-plokk>
```javascript
funktsiooniruut(number) {
tagasi number * number;
}
```
</md-block>
<skript src="prism.js"></script>
</body>
</html>

Näete kenasti vormindatud koodi koos süntaktiliselt teadliku esiletõstmisega:

Teie võimalused veebis kirjutamiseks on just suurenenud

Md-blocki kasutamine on teie otsustada, kuid selle kasutamiseks on palju võimalusi leidlikeks lahendusteks. Saate seda kasutada väga kerge CMS-i käitamiseks kirjutajatele, kes kasutavad Markdowni enesekindlalt, kuid mitte HTML-i.

Markdown on ideaalne keel laiemale publikule. Selle kasutuselevõtt selliste tööriistade poolt nagu Slack suurendab tõenäoliselt kasutamist veelgi.