A Markdown egyszerű szintaxisa kiváló alternatívává teszi a HTML-hez. A nyelv mindig is támogatta a HTML beágyazását, de most a másik irányba is beágyazhatja a Markdownt a HTML-be.

Egy egyszerű könyvtár használatával beágyazott Markdownt tárolhat weboldalain, és azt menet közben konvertálhatja megfelelő HTML-vé.

Mit csinál az md-block?

A jelenlegi folyamat magában foglalhatja a Markdown fájlok kézi létrehozását, majd HTML formátumba való konvertálását. Sok modern CMS-alkalmazás így működik. Vagy használhat egy keretrendszert, mint pl Szögletes a Markdown oldalakká történő megjelenítéséhez.

Az md-block könyvtár nem feltétlenül alternatíva; ehelyett egy kicsit más használati esetet teljesít. A soron belüli Markdown-t egyenértékű HTML-kódjává alakítja. A Markdownt beágyazhatja HTML-fájljaiba, és kérésre megjelenítheti az ügyfélen.

Íme, hogyan nézhet ki:

<html>
<fej>...</head>
<test>
<md-blokk>
# Címsor
Néhány *beágyazott* Markdown, amely `md-block` konvertálható az Ön számára!
</md-block>
</body>
</html>
instagram viewer

Célszerű balra igazítani a beágyazott Markdown kódot, minden vezető behúzás nélkül. Ennek az az oka, hogy a vezető szóközök jelentősek lehetnek a Markdownban, ellentétben a HTML-lel.

A könyvtár bemutatja saját egyedi HTML elemét, md-blokk. Bár ez az elem nem a HTML szabvány része, ez egy érvényes technika. A webkomponensek szabványa (MDN) tartalmaz egy Custom Elements nevű API-t. Ez az API támogatja az egyéni elemek dinamikus regisztrációját JavaScript használatával.

Az md-block könyvtár betöltése előtt ez az oldal ismerős módon jelenik meg:

Természetesen stílusozhatja az md-block elemet, hogy jobban nézzen ki, mint egy szövegszerkesztőben. Az előre formázott szóközökkel és a monospace betűtípussal legalább egy kicsit könnyebben olvasható:

<stílus>md-block { szóköz: pre; font-family: monospace; }</style>

Ilyen kimenetre akkor lehet szüksége, ha oktatóanyagot ír a Markdownról. Lehetővé teszi a Markdown szintaxisának magyarázatát, miközben lehetővé teszi a Markdown minta egyszerű szerkesztését:

De az md-block partitrükkje az, hogy ezt a Markdownt végleges HTML-vé alakítja.

Még az alapértelmezett böngészőstílusok mellett is a tartalom ugyanúgy jelenik meg, mint a normál HTML, még akkor is, ha Markdown néven küldte el a böngészőnek:

Az md-block használata

Miután hozzáadta az md-block könyvtárat az oldalához, beírhatja a Markdown-t md-blokk elemeket. A könyvtár ezután automatikusan formázza a Markdown fájlt, és szükség szerint folytathatja a Markdown beágyazását.

Ennek a folyamatnak azonban van néhány változata.

Szerezze be a szkriptet távolról, vagy telepítse saját maga

Az induláshoz a legegyszerűbb, ha hivatkozik a könyvtárra a hivatalos md-block webhelyről:

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

Lehet, hogy nem ez a leghatékonyabb módszer, de határozottan a leggyorsabb. Csak adja hozzá ezt a kódot a sajátjához fej és az oldal automatikusan megjeleníti az md-block elemet HTML-be:

Természetesen letöltheti ezt a JavaScript-fájlt, és tárolhatja a saját webhelyén. Vagy npm-en keresztül telepítheti:

npm telepítés md-Blokk

Markdown Blocks vs. Inline Markdown

Az alapértelmezett elem, amely magáról a könyvtárról kapta a nevét md-blokk. De használhatsz egy md-span elem a soron belüli jelöléshez, például szöveg a mondat közepén:

A soron belüli Markdown használati esete valószínűleg kevésbé gyakori, de ettől függetlenül használhatja:

<p>Egy HTML bekezdés, amely tartalmazza <md-span>*dőlt*</md-span> szöveg.</p>

Hogyan lehet szintaxist kiemelni a kiemelő kódblokkokat prizmával

Prizma egy szintaktikai kiemelő, amelyet Lea Verou, az md-block alkotója közösen készített. Használhatja az előre formázott kódblokkok kiemelésére a weboldalon, beleértve azokat is, amelyeket az md-block generál.

Tehát ezzel a HTML-lel:

<html>
<test>
<md-blokk>
```javascript
funkciónégyzet(szám) {
Visszatérés szám * szám;
}
```
</md-block>
<script src="prizm.js"></script>
</body>
</html>

Szépen formázott kódot fog látni szintaktikailag tudatos kiemeléssel:

Az online írási lehetőségek csak megnövekedtek

Az md-block használatának módja rajtad múlik, de rengeteg lehetőség van ötletes megoldásokra a használatával. Használhatja egy nagyon könnyű CMS futtatására olyan írók számára, akik magabiztosan használják a Markdownt, de nem használják a HTML-t.

A Markdown tökéletes nyelv az általános közönség számára. Az olyan eszközök, mint a Slack elfogadása valószínűleg még tovább növeli a használatát.