Jednoduchá syntaxe Markdown z něj dělá vynikající alternativu k HTML. Jazyk vždy podporoval vkládání HTML, ale nyní můžete jít jinou cestou a vložit Markdown do HTML.

Pomocí jednoduché knihovny můžete na svých webových stránkách hostovat vložený Markdown a nechat jej za běhu převést do správného HTML.

Co dělá md-block?

Váš současný proces může zahrnovat ruční vytváření souborů Markdown a jejich následnou konverzi do HTML. Takto funguje mnoho moderních CMS aplikací. Nebo můžete použít framework jako Angular pro vykreslení Markdown do stránek.

Knihovna md-block není striktně alternativou; místo toho splňuje trochu jiný případ použití. Převádí inline Markdown na ekvivalentní HTML. Markdown můžete vložit do svých HTML souborů a vykreslit jej na klientovi v době vyžádání.

Zde je návod, jak by to mohlo vypadat:

<html>
<hlava>...</head>
<tělo>
<md-blok>
# Nadpis
Nějaký *embedded* Markdown, který `md-block` dokáže převést za vás!
</md-block>
</body>
</html>

Je dobré zarovnat vložený kód Markdown doleva bez jakéhokoli odsazení na začátku. Je to proto, že úvodní mezery mohou být v Markdown významné, na rozdíl od HTML.

instagram viewer

Knihovna zavádí svůj vlastní prvek HTML, md-blok. I když tento prvek není součástí standardu HTML, to je platná technika. Standard Web Components (MDN) obsahuje API s názvem Custom Elements. Toto rozhraní API podporuje dynamickou registraci vlastních prvků pomocí JavaScriptu.

Před načtením knihovny md-block se tato stránka vykreslí známým způsobem:

Prvek md-block samozřejmě můžete upravit tak, aby vypadal spíše jako v textovém editoru. S předem naformátovanými mezerami a jednoprostorovým písmem je čtení alespoň o něco snazší:

<styl>md-block { white-space: pre; font-family: monospace; }</style>

Možná budete chtít tento druh výstupu, pokud píšete výukový program na Markdown. To vám umožní vysvětlit syntaxi Markdown a zároveň vám umožní snadno upravit váš ukázkový Markdown:

Ale party trik md-block je převést Markdown do finálního HTML.

I s výchozími styly prohlížeče se nyní obsah zobrazuje stejně jako váš běžný HTML, i když jste jej odeslali do prohlížeče jako Markdown:

Jak používat md-block

Jakmile na svou stránku přidáte knihovnu md-block, můžete zapsat svůj Markdown md-blok Prvky. Knihovna pak váš Markdown automaticky naformátuje a vy můžete pokračovat ve vkládání Markdown podle potřeby.

Existuje však několik variant tohoto procesu.

Zdroj skriptu vzdáleně nebo si jej nainstalujte sami

Nejjednodušší způsob, jak začít, je odkázat na knihovnu z oficiálního webu md-block:

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

Možná to není nejúčinnější přístup, ale rozhodně je nejrychlejší. Stačí přidat tento kód do svého hlava a vaše stránka automaticky vykreslí cokoli v prvku md-block do HTML:

Tento soubor JavaScript si můžete samozřejmě stáhnout a hostit na svém vlastním webu. Nebo jej můžete nainstalovat přes npm:

npm Nainstalujte md-blok

Markdown Blocks vs. Inline Markdown

Výchozí prvek, pojmenovaný podle samotné knihovny, je md-blok. Ale můžete také použít md-rozpětí prvek pro inline Markdown, jako je text uprostřed věty:

Případ použití pro inline Markdown je pravděpodobně méně běžný, ale přesto jej můžete použít:

<p>HTML odstavec obsahující <md-rozpětí>*kurzíva*</md-span> text.</str>

Jak syntaxe zvýraznit bloky kódu Markdown pomocí hranolu

Hranol je zvýrazňovač syntaxe, který spoluvytvořila Lea Verou, tvůrce md-block. Můžete jej použít ke zvýraznění předformátovaných bloků kódu na webové stránce, včetně těch, které generuje md-block.

Takže s tímto HTML:

<html>
<tělo>
<md-blok>
```javascript
funkcenáměstí(číslo) {
vrátit se číslo * číslo;
}
```
</md-block>
<skript src="prism.js"></script>
</body>
</html>

Uvidíte pěkně naformátovaný kód se syntakticky vědomým zvýrazněním:

Vaše možnosti pro online psaní právě vzrostly

Jak budete md-block používat, je na vás, ale s jeho využitím je spousta potenciálu pro inovativní řešení. Můžete jej použít ke spuštění velmi lehkého CMS pro autory, kteří jsou přesvědčeni o používání Markdown, ale ne HTML.

Markdown je perfektní jazyk pro široké publikum. Jeho přijetí nástroji jako Slack s největší pravděpodobností ještě zvýší využití.