Jednostavna sintaksa Markdowna čini ga izvrsnom alternativom HTML-u. Jezik je uvijek podržavao ugradnju HTML-a, ali sada možete ići drugim putem i ugraditi Markdown u HTML.

Koristeći jednostavnu biblioteku, možete ugostiti ugrađeni Markdown na svojim web stranicama i pretvoriti ga u pravi HTML u hodu.

Što radi md-block?

Vaš trenutačni postupak može uključivati ​​ručno stvaranje Markdown datoteka, zatim njihovo pretvaranje u HTML. Ovako rade mnoge moderne CMS aplikacije. Ili možete koristiti okvir poput Angular za prikaz Markdowna na stranicama.

Knjižnica md-block nije striktno alternativa; umjesto toga, ispunjava nešto drugačiji slučaj upotrebe. Pretvara ugrađeni Markdown u njegov ekvivalent HTML. Možete ugraditi Markdown u svoje HTML datoteke i prikazati ga na klijentu, na zahtjev.

Evo kako bi to moglo izgledati:

<html>
<glavu>...</head>
<tijelo>
<md-blok>
# Naslov
Neki *ugrađeni* Markdown koji `md-block` može pretvoriti umjesto vas!
</md-block>
</body>
</html>

Dobra je ideja svoj ugrađeni Markdown kod poravnati lijevo, bez ikakve početne uvlake. To je zato što vodeći razmak može biti značajan u Markdownu, za razliku od HTML-a.

instagram viewer

Knjižnica predstavlja vlastiti prilagođeni HTML element, md-blok. Iako ovaj element nije dio HTML standarda, ovo je važeća tehnika. Standard web-komponenti (MDN) uključuje API pod nazivom Custom Elements. Ovaj API podržava dinamičku registraciju prilagođenih elemenata pomoću JavaScripta.

Prije učitavanja biblioteke md-block, ova će se stranica prikazati na poznati način:

Naravno, možete oblikovati element md-block tako da izgleda više kao u uređivaču teksta. S unaprijed formatiranim razmakom i monospace fontom, barem je malo lakše za čitanje:

<stil>md-block { razmak: pre; obitelj-fontova: monospace; }</style>

Možda biste željeli ovu vrstu rezultata ako pišete vodič na Markdownu. Omogućuje vam da objasnite Markdown sintaksu dok vam omogućuje jednostavno uređivanje uzorka Markdown:

Ali md-blockov party trik je pretvoriti taj Markdown u konačni HTML.

Čak i sa zadanim stilovima preglednika, sadržaj se sada prikazuje kao vaš uobičajeni HTML, iako ste ga poslali pregledniku kao Markdown:

Kako koristiti md-block

Nakon što dodate biblioteku md-block na svoju stranicu, možete upisati svoj Markdown md-blok elementi. Knjižnica će zatim automatski formatirati vaš Markdown, a vi možete nastaviti s ugradnjom Markdowna po želji.

Međutim, postoji nekoliko varijacija ovog procesa.

Nabavite skriptu na daljinu ili je instalirajte sami

Najlakši način za početak je referenca biblioteke sa službene web stranice md-block:

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

Ovo možda nije najučinkovitiji pristup, ali je definitivno najbrži. Samo dodajte ovaj kod u svoj glavu i vaša će stranica automatski prikazati sve u md-block elementu u HTML:

Možete, naravno, preuzeti tu JavaScript datoteku i ugostiti je na vlastitoj stranici. Ili ga možete instalirati putem npm-a:

npm instalirati doktor medicine-blok

Markdown blokovi vs. Inline Markdown

Zadani element, nazvan po samoj biblioteci, je md-blok. Ali također možete koristiti md-raspon element za inline Markdown, kao što je tekst u sredini rečenice:

Slučaj upotrebe za inline Markdown vjerojatno je rjeđi, ali ga svejedno možete koristiti:

<str>HTML odlomak koji sadrži <md-raspon>*kurziv*</md-span> tekst.</str>

Kako u sintaksi istaknuti blokove Markdown koda s Prismom

Prizma je isticač sintakse koji je Lea Verou, kreator md-block-a, sukreirala. Možete ga koristiti za isticanje unaprijed formatiranih blokova koda na web stranici, uključujući one koje generira md-block.

Dakle, s ovim HTML-om:

<html>
<tijelo>
<md-blok>
```javascript
funkcijakvadrat(broj) {
povratak broj * broj;
}
```
</md-block>
<skripta src="prizma.js"></script>
</body>
</html>

Vidjet ćete lijepo formatirani kod sa sintaktički svjesnim isticanjem:

Vaše mogućnosti za pisanje na mreži upravo su se povećale

Kako ćete koristiti md-block ovisi o vama, ali postoji mnogo potencijala za inventivna rješenja koja ga koriste. Možete ga koristiti za pokretanje vrlo laganog CMS-a za pisce koji samouvjereno koriste Markdown, ali ne i HTML.

Markdown je savršen jezik za široku publiku. Njegovo usvajanje od strane alata kao što je Slack najvjerojatnije će još više povećati upotrebu.