Markdown’ın basit sözdizimi, onu HTML’ye mükemmel bir alternatif yapar. Dil, HTML’nin gömülmesini her zaman 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ürmesini sağlayabilirsiniz.
Md-block Ne Yapar?
Mevcut işleminiz, Markdown dosyalarını elle oluşturmayı ve ardından bunları HTML’ye dönüştürmeyi içerebilir. Modern CMS uygulamalarının çoğu bu şekilde çalışır. Veya Markdown’ı sayfalara dönüştürmek için Angular gibi bir çerçeve kullanabilirsiniz .
md-block kitaplığı kesinlikle bir alternatif değildir; bunun yerine biraz farklı bir kullanım durumunu karşılar. Satır içi Markdown’ı eşdeğer HTML’sine dönüştürür. Markdown’ı HTML dosyalarınıza gömebilir ve istek anında istemcide oluşturabilirsiniz.
İşte bunun nasıl görünebileceği:
<html>
<head>…</head>
<body>
<md-block>
# Heading
Some *embedded* Markdown which `md-block` can convert for you!
</md-block>
</body>
</html>
Katıştırılmış Markdown kodunuzu başta herhangi bir girinti olmadan sola hizalamak iyi bir fikirdir. Bunun nedeni, baştaki boşlukların HTML’den farklı olarak Markdown’da önemli olabilmesidir.
Kitaplık kendi özel HTML öğesini sunar, md-block . Bu öğe HTML standardının bir parçası olmasa da , bu geçerli bir tekniktir. Web Bileşenleri standardı ( MDN ), Özel Öğeler adlı bir API içerir. Bu API, JavaScript kullanarak özel öğelerin dinamik kaydını destekler.
md-block kitaplığını yüklemeden önce, bu sayfa tanıdık bir şekilde işlenecektir:
Bir tarayıcıda görüntülenen bir ham işaretleme örneği
Elbette, md-block öğesini bir metin düzenleyicideymiş gibi görünecek şekilde biçimlendirebilirsiniz. Önceden biçimlendirilmiş boşluk ve tek aralıklı yazı tipiyle, en azından okunması biraz daha kolay:
<style>md-block { white-space: pre; font-family: monospace; }</style>
Markdown hakkında bir öğretici yazıyorsanız, bu tür bir çıktı isteyebilirsiniz. Örnek Markdown’ınızı kolayca düzenlemenize izin verirken, Markdown sözdizimini açıklamanıza olanak tanır:
Önceden biçimlendirilmiş kod olarak biçimlendirilmiş ham işaretleme
Ancak md-block’un parti hilesi, bu Markdown’ı nihai HTML’ye dönüştürmektir.
Varsayılan tarayıcı stillerinde 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 ile biçimlendirilmiş gömülü işaretleme
md bloğu nasıl kullanılır
Sayfanıza md-block kitaplığını ekledikten sonra, Markdown’ınızı md-block elemanlarına yazabilirsiniz . Kitaplık, Markdown’ınızı otomatik olarak biçimlendirir ve Markdown’ı istediğiniz gibi gömmeye devam edebilirsiniz.
Bununla birlikte, bu süreçte birkaç varyasyon vardır.
Komut Dosyasını Uzaktan Kaynaklayın veya Kendiniz Kurun
Başlamanın en kolay yolu, resmi md-block web sitesinden kitaplığa başvurmaktır:
<script type=”module” src=”https://md-block.verou.me/md-block.js”></script>
Bu en verimli yaklaşım olmayabilir, ancak kesinlikle en hızlısı. Sadece bu kodu kafanıza ekleyin ve sayfanız bir md-block öğesindeki her şeyi otomatik olarak HTML’ye dönüştürecektir:
HTML’de biçimlendirilmiş çeşitli Markdown komutlarına örnekler
Elbette bu JavaScript dosyasını indirebilir ve kendi sitenizde barındırabilirsiniz. Veya npm aracılığıyla kurabilirsiniz:
npm install md-block
İşaretleme Blokları ve Satır İçi İşaretleme
Adını kitaplığın kendisinden alan varsayılan öğe md-block şeklindedir . Ancak , bir cümlenin ortasındaki metin gibi satır içi Markdown için bir md-span öğesi de kullanabilirsiniz :
Satır içi İşaretleme için kullanım durumu muhtemelen daha az yaygındır, ancak yine de kullanabilirsiniz:
<p>An HTML paragraph containing <md-span>*italic*</md-span> text.</p>
Vurgu İşaretleme Kod Bloklarını Prizma ile Söz Dizimi Nasıl Yapılır
Prism , md-block’un yaratıcısı Lea Verou’nun birlikte yarattığı bir sözdizimi vurgulayıcıdır. Bir web sayfasında md-block tarafından oluşturulanlar da dahil olmak üzere önceden biçimlendirilmiş kod bloklarını vurgulamak için kullanabilirsiniz.
Yani, bu HTML ile:
<html>
<body>
<md-block>
“`javascript
function square(number) {
return number * number;
}
“`
</md-block>
<script src=”prism.js”></script>
</body>
</html>
Sözdizimsel olarak bilinçli vurgulama ile güzel bir şekilde biçimlendirilmiş kod göreceksiniz:
Sözdizimi vurgulanmış blok olarak işlenen bir Markdown kodu örneği
Çevrimiçi Yazma Seçenekleriniz Arttı
md-block’u nasıl kullanacağınız size kalmış, ancak onu kullanarak yaratıcı çözümler için pek çok potansiyel var. Markdown kullandığından emin olan ancak HTML kullanmayan yazarlar için çok hafif bir CMS çalıştırmak için kullanabilirsiniz.
Markdown, genel bir izleyici kitlesi 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.