Markdown'ın basit sözdizimi onu HTML'ye mükemmel bir alternatif yapar. Dil her zaman HTML'nin gömülmesini desteklemiştir, ancak şimdi diğer yoldan gidebilir ve Markdown'ı HTML'ye gömebilirsiniz.

Basit bir kitaplık kullanarak, web sayfalarınızda gömülü Markdown'ı barındırabilir ve anında uygun HTML'ye dönüştürülmesini sağlayabilirsiniz.

md-block ne işe yarar?

Mevcut süreciniz, Markdown dosyalarını elle oluşturmayı ve ardından bunları HTML'ye dönüştürmeyi içerebilir. Bu, birçok modern CMS uygulamasının çalışma şeklidir. Veya gibi bir çerçeve kullanabilirsiniz Markdown'ı sayfalara dönüştürmek için açısal.

md-block kitaplığı kesinlikle bir alternatif değildir; bunun yerine, biraz farklı bir kullanım durumunu yerine getirir. Satır içi Markdown'ı eşdeğer HTML'ye dönüştürür. Markdown'ı HTML dosyalarınıza gömebilir ve istek anında istemcide oluşturabilirsiniz.

İşte böyle görünebilir:

<html>
<kafa>...</head>
<gövde>
<md-blok>
# Başlık
'md-block'un sizin için dönüştürebileceği bazı *gömülü* Markdown!
</md-block>
</body>
</html>
instagram viewer

Gömülü Markdown kodunuzu herhangi bir önde girinti olmadan sola hizalamak iyi bir fikirdir. Bunun nedeni, HTML'den farklı olarak, önde gelen boşlukların Markdown'da önemli olabilmesidir.

Kütüphane kendi özel HTML öğesini tanıtır, md-blok. Bu eleman olmasa da HTML standardının bir parçası, bu geçerli bir tekniktir. Web Bileşenleri standardı (MDN) Özel Öğeler adlı bir API içerir. Bu API, JavaScript kullanılarak özel öğelerin dinamik olarak kaydedilmesini destekler.

md-block kitaplığını yüklemeden önce, bu sayfa tanıdık bir şekilde işlenecektir:

Elbette, md-block öğesini bir metin düzenleyicide olduğu gibi görünecek şekilde biçimlendirebilirsiniz. Önceden biçimlendirilmiş boşluk ve tek boşluklu yazı tipiyle, okumak en azından biraz daha kolay:

<stil>md-block { boşluk: ön; yazı tipi ailesi: monospace; }</style>

Markdown'da bir eğitim yazıyorsanız, bu tür çıktılar isteyebilirsiniz. Örnek Markdown'ınızı kolayca düzenlemenize izin verirken, Markdown sözdizimini açıklamanıza olanak tanır:

Ancak md-block'un parti hilesi, bu Markdown'ı nihai HTML'ye dönüştürmektir.

Varsayılan tarayıcı stilleriyle bile, tarayıcıya Markdown olarak göndermiş olsanız bile içerik artık normal HTML'niz gibi görüntüleniyor:

md-block nasıl kullanılır

md-block kitaplığını sayfanıza ekledikten sonra, Markdown'ınızı şuraya yazabilirsiniz: md-blok elementler. Kitaplık daha sonra Markdown'ınızı otomatik olarak biçimlendirir ve Markdown'ı istediğiniz gibi yerleştirmeye devam edebilirsiniz.

Bununla birlikte, bu işlemde birkaç varyasyon vardır.

Komut Dosyasını Uzaktan Kaynaklayın veya Kendiniz Kurun

Başlamanın en kolay yolu, resmi md-block web sitesinden kütüphaneye başvurmaktır:

<komut dosyası türü="modül" kaynak="https://md-block.verou.me/md-block.js"></script>

Bu en verimli yaklaşım olmayabilir, ancak kesinlikle en hızlısıdır. bu kodu eklemeniz yeterli kafa ve sayfanız bir md-block öğesindeki her şeyi otomatik olarak HTML'ye dönüştürür:

Elbette, bu JavaScript dosyasını indirebilir ve kendi sitenizde barındırabilirsiniz. Veya npm ile yükleyebilirsiniz:

npm Yüklemek md-engellemek

İşaretleme Blokları vs. Satır İçi İşaretleme

Kitaplığın kendisinden sonra adlandırılan varsayılan öğe, md-blok. Ama aynı zamanda bir md-açıklığı cümlenin ortasındaki metin gibi satır içi İşaretleme öğesi:

Satır içi Markdown için kullanım durumu muhtemelen daha az yaygındır, ancak yine de kullanabilirsiniz:

<p>içeren bir HTML paragrafı <md-açıklığı>*italik*</md-span> Metin.</p>

Prizma ile Vurgulama İşaretleme Kodu Blokları Nasıl Sözdizimi Yapılır

Prizma md-block'un yaratıcısı Lea Verou'nun birlikte oluşturduğu bir sözdizimi vurgulayıcıdır. Bunu, md-block'un oluşturduğu olanlar da dahil olmak üzere, bir web sayfasında önceden biçimlendirilmiş kod bloklarını vurgulamak için kullanabilirsiniz.

Yani, bu HTML ile:

<html>
<gövde>
<md-blok>
```javascript
işlevMeydan(sayı) {
dönüş sayı * sayı;
}
```
</md-block>
<komut dosyası kaynağı="prizma.js"></script>
</body>
</html>

Sözdizimsel olarak farkında vurgulama ile güzel biçimlendirilmiş kod göreceksiniz:

Çevrimiçi Yazma Seçenekleriniz Arttı

md-block'u nasıl kullanacağınız size kalmış, ancak onu kullanmak için birçok yaratıcı çözüm potansiyeli var. Markdown'ı kullanan ancak HTML kullanmayan yazarlar için çok hafif bir CMS çalıştırmak için kullanabilirsiniz.

Markdown, genel bir kitle için mükemmel bir dildir. Slack gibi araçlar tarafından benimsenmesi, büyük olasılıkla kullanımı daha da artıracaktır.