Dėl paprastos „Markdown“ sintaksės jis yra puiki HTML alternatyva. Kalba visada palaikė HTML įterpimą, bet dabar galite eiti kitu būdu ir įterpti Markdown į HTML.

Naudodami paprastą biblioteką savo tinklalapiuose galite priglobti įdėtą Markdown ir greitai jį konvertuoti į tinkamą HTML.

Ką veikia md-block?

Dabartinis procesas gali apimti Markdown failų kūrimą rankiniu būdu, tada konvertavimą į HTML. Taip veikia daugelis šiuolaikinių TVS programų. Arba galite naudoti tokią sistemą kaip Kampinis, kad žymėjimas būtų paverstas puslapiais.

Md-block biblioteka nėra griežtai alternatyva; Vietoj to, jis atitinka šiek tiek kitokį naudojimo atvejį. Jis konvertuoja eilutę Markdown į lygiavertį HTML. Galite įterpti „Markdown“ į savo HTML failus ir pateikti jį klientui paprašius.

Štai kaip tai gali atrodyti:

<html>
<galva>...</head>
<kūnas>
<md blokas>
# Antraštė
Kai kurie *įterptieji* žymėjimai, kuriuos „md-block“ gali konvertuoti už jus!
</md-block>
</body>
</html>

Patartina įterptąjį žymėjimo kodą lygiuoti kairėje be jokios įtraukos. Taip yra todėl, kad tarpas priekyje gali būti reikšmingas Markdown, skirtingai nei HTML.

instagram viewer

Biblioteka pristato savo tinkintą HTML elementą, md blokas. Nors šio elemento nėra HTML standarto dalis, tai tinkama technika. Žiniatinklio komponentų standartas (MDN) apima API, vadinamą pasirinktiniais elementais. Ši API palaiko dinaminę tinkintų elementų registraciją naudojant „JavaScript“.

Prieš įkeliant md-block biblioteką, šis puslapis bus atvaizduojamas įprastu būdu:

Žinoma, galite sukurti md-block elemento stilių, kad jis atrodytų labiau kaip teksto rengyklėje. Naudojant iš anksto suformatuotą tarpą ir vienkartinį šriftą, bent jau šiek tiek lengviau skaityti:

<stilius>md-block { tarpas: prieš; šriftų šeima: monospace; }</style>

Galbūt norėsite tokios išvesties, jei rašote mokymo programą apie Markdown. Tai leidžia paaiškinti Markdown sintaksę ir lengvai redaguoti pavyzdį Markdown:

Tačiau „md-block“ vakarėlio triukas yra konvertuoti tą „Markdown“ į galutinį HTML.

Net naudojant numatytuosius naršyklės stilius, turinys dabar rodomas kaip įprastas HTML, net jei išsiuntėte jį į naršyklę kaip Markdown:

Kaip naudoti md-block

Kai prie savo puslapio pridėsite md-block biblioteką, galite įrašyti žymėjimą md blokas elementai. Tada biblioteka automatiškai suformatuos „Markdown“ ir galėsite tęsti „Markdown“ įterpimą, kaip jums reikia.

Tačiau yra keletas šio proceso variantų.

Gaukite scenarijų nuotoliniu būdu arba įdiekite jį patys

Paprasčiausias būdas pradėti yra nuoroda į biblioteką oficialioje md-block svetainėje:

<scenarijaus tipas ="modulis" src="https://md-block.verou.me/md-block.js"></script>

Tai gali būti ne pats efektyviausias būdas, bet tikrai greičiausias. Tiesiog pridėkite šį kodą prie savo galva ir jūsų puslapis automatiškai pateiks viską, kas yra md-block elemente į HTML:

Žinoma, galite atsisiųsti tą „JavaScript“ failą ir talpinti jį savo svetainėje. Arba galite įdiegti per npm:

npm diegti md-blokas

Markdown Blocks vs. Inline Markdown

Numatytasis elementas, pavadintas pačios bibliotekos vardu, yra md blokas. Bet jūs taip pat galite naudoti md-span elementas eilutiniam žymėjimui, pvz., tekstas sakinio viduryje:

Inline Markdown naudojimo atvejis tikriausiai yra mažiau paplitęs, tačiau vis tiek galite jį naudoti:

<p>HTML pastraipa, kurioje yra <md-span>*kursyvas*</md-span> tekstą.</p>

Kaip sintaksiškai paryškinti žymėjimo kodo blokus naudojant prizmę

Prizmė yra sintaksės žymeklis, kurį kartu sukūrė Lea Verou, md-block kūrėja. Galite naudoti jį norėdami paryškinti iš anksto suformatuotus kodo blokus tinklalapyje, įskaitant tuos, kuriuos generuoja md-block.

Taigi su šiuo HTML:

<html>
<kūnas>
<md blokas>
```javascript
funkcijakvadratas(numerį) {
grąžinti skaičius * skaičius;
}
```
</md-block>
<scenarijus src="prizm.js"></script>
</body>
</html>

Pamatysite gražiai suformatuotą kodą su sintaksiniu paryškinimu:

Jūsų galimybės rašyti internete tiesiog išaugo

Kaip naudoti md-block, priklauso nuo jūsų, tačiau yra daug galimybių jį naudoti išradingiems sprendimams. Galite naudoti jį norėdami paleisti labai lengvą TVS, skirtą rašytojams, kurie pasitiki naudodami Markdown, bet ne HTML.

Markdown yra puiki kalba plačiajai auditorijai. Tikėtina, kad naudojant tokius įrankius kaip „Slack“, naudojimas dar labiau padidės.