Sintaxa simplă a lui Markdown îl face o alternativă excelentă la HTML. Limbajul a suportat întotdeauna încorporarea HTML, dar acum puteți merge în altă direcție și puteți încorpora Markdown în HTML.

Folosind o bibliotecă simplă, puteți găzdui Markdown încorporat în paginile dvs. web și îl puteți converti în HTML corespunzător din mers.

Ce face md-block?

Procesul dvs. actual poate implica crearea manuală a fișierelor Markdown, apoi convertirea lor în HTML. Așa funcționează multe aplicații CMS moderne. Sau puteți folosi un cadru de genul Angular pentru a reda Markdown în pagini.

Biblioteca md-block nu este strict o alternativă; în schimb, îndeplinește un caz de utilizare ușor diferit. Acesta convertește Markdown inline în HTML echivalent. Puteți încorpora Markdown în fișierele dvs. HTML și îl puteți reda pe client, la momentul solicitării.

Iată cum ar putea arăta:

<html>
<cap>...</head>
<corp>
<md-block>
# Titlu
Unele *embedded* Markdown pe care `md-block` le poate converti pentru tine!
</md-block>
</body>
</html>
instagram viewer

Este o idee bună să aliniați la stânga codul Markdown încorporat, fără nicio indentație principală. Acest lucru se datorează faptului că spațiul alb principal poate fi semnificativ în Markdown, spre deosebire de HTML.

Biblioteca introduce propriul element HTML personalizat, md-block. Deși acest element nu este parte a standardului HTML, aceasta este o tehnică valabilă. Standardul Web Components (MDN) include un API numit Elemente personalizate. Acest API acceptă înregistrarea dinamică a elementelor personalizate folosind JavaScript.

Înainte de a încărca biblioteca md-block, această pagină va fi redată într-un mod familiar:

Desigur, puteți stila elementul md-block astfel încât să arate mai mult ca într-un editor de text. Cu un spațiu alb preformatat și un font monospațiu, este cel puțin puțin mai ușor de citit:

<stil>md-block { spatiu alb: pre; familie de fonturi: monospace; }</style>

S-ar putea să doriți acest tip de rezultate dacă scrieți un tutorial despre Markdown. Vă permite să explicați sintaxa Markdown în timp ce vă permite să editați cu ușurință eșantionul de Markdown:

Dar trucul de petrecere al md-block este să transforme acel Markdown în HTML final.

Chiar și cu stilurile implicite de browser, conținutul este acum afișat la fel ca HTML-ul dvs. obișnuit, chiar dacă l-ați trimis în browser ca Markdown:

Cum se utilizează md-block

Odată ce ați adăugat biblioteca md-block la pagina dvs., vă puteți scrie Markdown-ul md-block elemente. Biblioteca va formata automat Markdown-ul dvs. și puteți continua să încorporați Markdown după cum doriți.

Există, totuși, câteva variante ale acestui proces.

Procurați scriptul de la distanță sau instalați-l singur

Cel mai simplu mod de a începe este să faceți referire la bibliotecă de pe site-ul oficial md-block:

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

Poate că aceasta nu este cea mai eficientă abordare, dar este cu siguranță cea mai rapidă. Doar adăugați acest cod la dvs cap iar pagina ta va reda automat orice dintr-un element md-block în HTML:

Puteți, desigur, să descărcați acel fișier JavaScript și să-l găzduiți pe propriul site. Sau îl puteți instala prin npm:

npm instalare md-bloc

Blocuri Markdown vs. Markdown inline

Elementul implicit, numit după biblioteca însăși, este md-block. Dar poți folosi și un md-span element pentru Markdown inline, cum ar fi textul din mijlocul unei propoziții:

Cazul de utilizare pentru Markdown inline este probabil mai puțin obișnuit, dar îl puteți folosi totuși:

<p>Un paragraf HTML care conține <md-span>*cursiv*</md-span> text.</p>

Cum să evidențiați prin sintaxă blocurile de cod Markdown cu Prism

Prismă este un evidențiator de sintaxă pe care Lea Verou, creatorul md-block, l-a co-creat. Îl puteți folosi pentru a evidenția blocuri de cod preformatate într-o pagină web, inclusiv pe cele pe care le generează md-block.

Deci, cu acest HTML:

<html>
<corp>
<md-block>
```javascript
funcţiepătrat(număr) {
întoarcere număr * număr;
}
```
</md-block>
<script src="prism.js"></script>
</body>
</html>

Veți vedea un cod frumos formatat, cu evidențiere conștientă din punct de vedere sintactic:

Opțiunile dvs. de scriere online au crescut

Modul în care utilizați md-block depinde de dvs., dar există o mulțime de potențial pentru soluții inventive care îl folosesc. L-ați putea folosi pentru a rula un CMS foarte ușor pentru scriitorii care au încredere că folosesc Markdown, dar nu HTML.

Markdown este un limbaj perfect pentru un public larg. Adoptarea sa de către instrumente precum Slack va crește probabil și mai mult utilizarea.