Jednoduchá syntax Markdown z neho robí vynikajúcu alternatívu k HTML. Jazyk vždy podporoval vkladanie HTML, ale teraz môžete ísť inou cestou a vložiť Markdown do HTML.

Pomocou jednoduchej knižnice môžete hostiť vložený Markdown na svojich webových stránkach a nechať ho previesť do správneho HTML za behu.

Čo robí md-block?

Váš súčasný proces môže zahŕňať ručné vytváranie súborov Markdown a ich následnú konverziu do HTML. Takto funguje mnoho moderných CMS aplikácií. Alebo môžete použiť rámec ako napr Angular na vykreslenie Markdown na stránky.

Knižnica md-block nie je striktne alternatívou; namiesto toho spĺňa trochu iný prípad použitia. Prevádza inline Markdown na ekvivalentný HTML. Markdown môžete vložiť do svojich HTML súborov a vykresliť ho na klientovi v čase vyžiadania.

Takto by to mohlo vyzerať:

<html>
<hlavu>...</head>
<telo>
<md-blok>
# Nadpis
Nejaký *vložený* Markdown, ktorý `md-block` dokáže previesť za vás!
</md-block>
</body>
</html>

Vložený kód Markdown je vhodné zarovnať doľava bez akéhokoľvek odsadenia na začiatku. Je to preto, že prvé medzery môžu byť v Markdown na rozdiel od HTML dôležité.

instagram viewer

Knižnica zavádza svoj vlastný prvok HTML, md-blok. Hoci tento prvok nie je súčasťou štandardu HTML, toto je platná technika. Štandard webových komponentov (MDN) obsahuje API s názvom Custom Elements. Toto API podporuje dynamickú registráciu vlastných prvkov pomocou JavaScriptu.

Pred načítaním knižnice md-block sa táto stránka vykreslí známym spôsobom:

Samozrejme, môžete upraviť štýl prvku md-block tak, aby vyzeral skôr ako v textovom editore. S predformátovanými medzerami a jednopriestorovým písmom je aspoň o niečo ľahšie čitateľné:

<štýl>md-block { white-space: pre; font-family: monospace; }</style>

Tento druh výstupu možno budete chcieť, ak píšete návod na Markdown. Umožňuje vám vysvetliť syntax Markdown a zároveň vám umožní jednoducho upravovať váš vzorový Markdown:

Ale párty trik md-block je previesť Markdown do finálneho HTML.

Dokonca aj s predvolenými štýlmi prehliadača sa obsah teraz zobrazuje rovnako ako váš bežný kód HTML, aj keď ste ho odoslali do prehliadača ako Markdown:

Ako používať md-block

Po pridaní knižnice md-block na svoju stránku môžete zapísať svoj Markdown md-blok prvkov. Knižnica potom automaticky naformátuje váš Markdown a vy môžete pokračovať vo vkladaní Markdown podľa potreby.

Existuje však niekoľko variácií tohto procesu.

Zdroj skriptu na diaľku alebo si ho nainštalujte sami

Najjednoduchší spôsob, ako začať, je odkázať na knižnicu z oficiálnej webovej stránky md-block:

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

Možno to nie je najefektívnejší prístup, ale určite je najrýchlejší. Stačí pridať tento kód do svojho hlavu a vaša stránka automaticky vykreslí čokoľvek v prvku md-block do HTML:

Tento súbor JavaScript si môžete, samozrejme, stiahnuť a umiestniť ho na svoju vlastnú stránku. Alebo si ho môžete nainštalovať cez npm:

npm Inštalácia md-blokovať

Markdown Blocks vs. Inline Markdown

Predvolený prvok, pomenovaný podľa samotnej knižnice, je md-blok. Môžete však použiť aj an md-rozpätie prvok pre inline Markdown, ako napríklad text v strede vety:

Prípad použitia pre inline Markdown je pravdepodobne menej bežný, ale stále ho môžete použiť:

<p>HTML odsek obsahujúci <md-rozpätie>*kurzíva*</md-span> text.</str>

Ako syntaxe zvýrazniť bloky kódu Markdown s hranolom

Hranol je zvýrazňovač syntaxe, ktorý spoluvytvorila Lea Verou, tvorkyňa md-block. Môžete ho použiť na zvýraznenie predformátovaných blokov kódu na webovej stránke vrátane tých, ktoré generuje md-block.

Takže s týmto HTML:

<html>
<telo>
<md-blok>
```javascript
funkciunámestie(číslo) {
vrátiť číslo * číslo;
}
```
</md-block>
<skript src="prism.js"></script>
</body>
</html>

Uvidíte pekne naformátovaný kód so syntakticky uvedomelým zvýraznením:

Vaše možnosti písania online sa práve zväčšili

Ako použijete md-block, je len na vás, ale pri jeho použití je veľa potenciálu pre invenčné riešenia. Môžete ho použiť na spustenie veľmi ľahkého CMS pre autorov, ktorí sú si istí používaním Markdown, ale nie HTML.

Markdown je perfektný jazyk pre široké publikum. Jeho prijatie nástrojmi ako Slack s najväčšou pravdepodobnosťou ešte viac zvýši používanie.