Markdownin yksinkertainen syntaksi tekee siitä erinomaisen vaihtoehdon HTML: lle. Kieli on aina tukenut HTML: n upottamista, mutta nyt voit siirtyä toiseen suuntaan ja upottaa Markdownin HTML: ään.

Yksinkertaisen kirjaston avulla voit isännöidä upotettua Markdownia verkkosivuillesi ja muuntaa sen oikeaksi HTML-koodiksi lennossa.

Mitä md-block tekee?

Nykyinen prosessisi voi sisältää Markdown-tiedostojen luomisen käsin ja niiden muuntamisen HTML-muotoon. Näin toimivat monet nykyaikaiset CMS-sovellukset. Tai voit käyttää kehystä, kuten Kulmikas merkinnän tekemiseksi sivuiksi.

md-block-kirjasto ei ole ehdottomasti vaihtoehto; sen sijaan se täyttää hieman erilaisen käyttötilanteen. Se muuntaa inline Markdownin vastaavaksi HTML: ksi. Voit upottaa Markdownin HTML-tiedostoihisi ja renderoida sen asiakkaan pyynnöstä.

Tältä se saattaa näyttää:

<html>
<pää>...</head>
<kehon>
<md-lohko>
# Otsikko
Jotkut * upotetut* merkinnät, jotka "md-block" voivat muuntaa puolestasi!
</md-block>
</body>
</html>

Upotettu Markdown-koodi kannattaa tasata vasemmalle ilman johtavaa sisennystä. Tämä johtuu siitä, että johtava välilyönti voi olla merkittävä Markdownissa, toisin kuin HTML.

instagram viewer

Kirjasto esittelee oman mukautetun HTML-elementin, md-lohko. Vaikka tämä elementti ei ole osa HTML-standardia, tämä on oikea tekniikka. Web Components -standardi (MDN) sisältää sovellusliittymän nimeltä Custom Elements. Tämä API tukee mukautettujen elementtien dynaamista rekisteröintiä JavaScriptin avulla.

Ennen md-block-kirjaston lataamista tämä sivu hahmonnetaan tutulla tavalla:

Tietenkin voit muotoilla md-block-elementin niin, että se näyttää enemmän kuin tekstieditorissa. Esimuotoillun välilyönnin ja monospace-fontin ansiosta se on ainakin hieman helpompi lukea:

<tyyli>md-block { välilyönti: pre; font-family: monospace; }</style>

Saatat haluta tällaista tulosta, jos kirjoitat opetusohjelmaa Markdownista. Sen avulla voit selittää Markdown-syntaksin samalla, kun voit helposti muokata Markdown-esimerkkiäsi:

Mutta md-blockin biletemppu on muuntaa tämä Markdown lopulliseksi HTML: ksi.

Jopa oletusselaintyyleillä sisältö näytetään nyt aivan kuten tavallinen HTML-koodisi, vaikka lähetit sen selaimeen Markdown-muodossa:

Kuinka käyttää md-blockia

Kun olet lisännyt md-block-kirjaston sivullesi, voit kirjoittaa merkintäsi md-lohko elementtejä. Kirjasto alustaa sitten Markdownin automaattisesti, ja voit jatkaa Markdownin upottamista tarpeen mukaan.

Tästä prosessista on kuitenkin olemassa muutamia muunnelmia.

Hanki komentosarja etänä tai asenna se itse

Helpoin tapa aloittaa on viitata kirjastoon viralliselta md-block-sivustolta:

<komentosarjan tyyppi ="moduuli" src="https://md-block.verou.me/md-block.js"></script>

Tämä ei ehkä ole tehokkain tapa, mutta se on ehdottomasti nopein. Lisää vain tämä koodi omaan pää ja sivusi renderöi automaattisesti kaiken md-block-elementissä HTML: ksi:

Voit tietysti ladata JavaScript-tiedoston ja isännöidä sitä omalla sivustollasi. Tai voit asentaa sen npm: n kautta:

npm Asentaa md-lohko

Markdown Blocks vs. Inline Markdown

Oletuselementti, joka on nimetty itse kirjaston mukaan, on md-lohko. Mutta voit myös käyttää md-span elementti tekstin sisäistä merkintää varten, kuten teksti lauseen keskellä:

Inline Markdownin käyttötapaus on luultavasti harvinaisempi, mutta voit silti käyttää sitä:

<s>HTML-kappale, joka sisältää <md-span>*kursivointi*</md-span> teksti.</s>

Kuinka syntaksia korostaa markdown-koodilohkoja prismalla

Prisma on syntaksin korostus, jonka Lea Verou, md-blockin luoja, loi yhdessä. Voit käyttää sitä korostamaan esimuotoiltuja koodilohkoja verkkosivulla, mukaan lukien ne, jotka md-block luo.

Joten tällä HTML-koodilla:

<html>
<kehon>
<md-lohko>
```javascript
toimintoneliö-(määrä) {
palata numero * numero;
}
```
</md-block>
<komentosarja src="prism.js"></script>
</body>
</html>

Näet kauniisti muotoillun koodin syntaktisesti tietoisella korostuksella:

Vaihtoehtosi online-kirjoittamiseen ovat vain lisääntyneet

Md-blockin käyttö on sinun päätettävissäsi, mutta sen käyttämisessä on paljon potentiaalia kekseliäisiin ratkaisuihin. Voit käyttää sitä erittäin kevyen sisällönhallintajärjestelmän käyttämiseen kirjoittajille, jotka luottavat Markdownin käyttöön, mutta eivät HTML: ää.

Markdown on täydellinen kieli suurelle yleisölle. Sen käyttöönotto Slackin kaltaisissa työkaluissa lisää todennäköisesti käyttöä entisestään.