मार्कडाउन का सरल सिंटैक्स इसे HTML का एक उत्कृष्ट विकल्प बनाता है। भाषा ने हमेशा HTML को एम्बेड करने का समर्थन किया है, लेकिन अब आप दूसरी तरफ जा सकते हैं और HTML में मार्कडाउन एम्बेड कर सकते हैं।

एक साधारण पुस्तकालय का उपयोग करके, आप अपने वेब पेजों में एम्बेडेड मार्कडाउन को होस्ट कर सकते हैं और इसे फ्लाई पर उचित HTML में परिवर्तित कर सकते हैं।

एमडी-ब्लॉक क्या करता है?

आपकी वर्तमान प्रक्रिया में मार्कडाउन फ़ाइलों को हाथ से बनाना, फिर उन्हें HTML में परिवर्तित करना शामिल हो सकता है। कितने आधुनिक सीएमएस अनुप्रयोग काम करते हैं। या आप जैसे ढांचे का उपयोग कर सकते हैं मार्कडाउन को पृष्ठों में प्रस्तुत करने के लिए कोणीय.

एमडी-ब्लॉक पुस्तकालय सख्ती से एक विकल्प नहीं है; इसके बजाय, यह थोड़ा अलग उपयोग के मामले को पूरा करता है। यह इनलाइन मार्कडाउन को इसके समकक्ष HTML में कनवर्ट करता है। आप अपनी एचटीएमएल फाइलों में मार्कडाउन एम्बेड कर सकते हैं और अनुरोध समय पर इसे क्लाइंट पर प्रस्तुत कर सकते हैं।

यहाँ ऐसा दिख सकता है:

<एचटीएमएल>
<सिर>...</head>
<तन>
<एमडी-ब्लॉक>
#शीर्षक
कुछ *एम्बेडेड* मार्कडाउन जो `md-block` आपके लिए कन्वर्ट कर सकते हैं!
</md-block>
</body>
</html>
instagram viewer

अपने एम्बेडेड मार्कडाउन कोड को बिना किसी प्रमुख इंडेंटेशन के बाईं ओर संरेखित करना एक अच्छा विचार है। ऐसा इसलिए है क्योंकि HTML के विपरीत, मार्कडाउन में अग्रणी व्हाइटस्पेस महत्वपूर्ण हो सकता है।

पुस्तकालय अपने स्वयं के कस्टम HTML तत्व का परिचय देता है, एमडी-ब्लॉक. हालांकि यह तत्व नहीं है HTML मानक का हिस्सा, यह एक मान्य तकनीक है। वेब घटक मानक (एमडीएन) में एक API शामिल है जिसे Custom Elements कहा जाता है। यह एपीआई जावास्क्रिप्ट का उपयोग करके कस्टम तत्वों के गतिशील पंजीकरण का समर्थन करता है।

एमडी-ब्लॉक पुस्तकालय लोड करने से पहले, यह पृष्ठ परिचित तरीके से प्रस्तुत करेगा:

बेशक, आप md-block एलिमेंट को स्टाइल कर सकते हैं, ताकि ऐसा लगे कि यह टेक्स्ट एडिटर में होगा। पूर्व स्वरूपित व्हाइटस्पेस और एक मोनोस्पेस फ़ॉन्ट के साथ, इसे पढ़ना कम से कम थोड़ा आसान है:

<शैली>एमडी-ब्लॉक {व्हाइट-स्पेस: प्री; फ़ॉन्ट-परिवार: मोनोस्पेस; }</style>

यदि आप मार्कडाउन पर एक ट्यूटोरियल लिख रहे हैं तो आप इस तरह का आउटपुट चाहते हैं। यह आपको आसानी से अपना नमूना मार्कडाउन संपादित करने की सुविधा देते हुए मार्कडाउन सिंटैक्स की व्याख्या करने की अनुमति देता है:

लेकिन md-block की पार्टी ट्रिक उस मार्कडाउन को फाइनल HTML में बदलना है।

डिफ़ॉल्ट ब्राउज़र शैलियों के साथ भी, सामग्री अब आपके नियमित HTML की तरह ही प्रदर्शित होती है, भले ही आपने इसे ब्राउज़र पर मार्कडाउन के रूप में भेजा हो:

एमडी-ब्लॉक का उपयोग कैसे करें

एक बार जब आप अपने पेज पर एमडी-ब्लॉक लाइब्रेरी जोड़ लेते हैं, तो आप अपना मार्कडाउन इसमें लिख सकते हैं एमडी-ब्लॉक तत्व पुस्तकालय तब आपके मार्कडाउन को स्वचालित रूप से प्रारूपित करेगा, और आप अपनी आवश्यकता के अनुसार मार्कडाउन को एम्बेड करना जारी रख सकते हैं।

हालाँकि, इस प्रक्रिया में कुछ भिन्नताएँ हैं।

स्क्रिप्ट को दूरस्थ रूप से स्रोत करें या इसे स्वयं स्थापित करें

आरंभ करने का सबसे आसान तरीका आधिकारिक एमडी-ब्लॉक वेबसाइट से पुस्तकालय का संदर्भ देना है:

<स्क्रिप्ट प्रकार ="मापांक" स्रोत ="https://md-block.verou.me/md-block.js"></script>

यह सबसे कुशल तरीका नहीं हो सकता है, लेकिन यह निश्चित रूप से सबसे तेज है। बस इस कोड को अपने में जोड़ें सिर और आपका पृष्ठ स्वचालित रूप से HTML को एमडी-ब्लॉक तत्व में कुछ भी प्रस्तुत करेगा:

बेशक, आप उस जावास्क्रिप्ट फ़ाइल को डाउनलोड कर सकते हैं और इसे अपनी साइट पर होस्ट कर सकते हैं। या आप इसे npm के माध्यम से स्थापित कर सकते हैं:

NPM इंस्टॉल एमडी-खंड मैथा

मार्कडाउन ब्लॉक बनाम। इनलाइन मार्कडाउन

डिफ़ॉल्ट तत्व, जिसका नाम पुस्तकालय के नाम पर रखा गया है, है एमडी-ब्लॉक. लेकिन आप एक का भी उपयोग कर सकते हैं एमडी-स्पैन इनलाइन मार्कडाउन के लिए तत्व, जैसे वाक्य के बीच में टेक्स्ट:

इनलाइन मार्कडाउन के लिए उपयोग का मामला शायद कम आम है, लेकिन फिर भी आप इसका उपयोग कर सकते हैं:

<पी>एक HTML पैराग्राफ जिसमें <एमडी-स्पैन>*इटैलिक*</md-span> मूलपाठ।</पी>

प्रिज्म के साथ सिंटेक्स हाइलाइट मार्कडाउन कोड ब्लॉक कैसे करें

चश्मे एक सिंटैक्स हाइलाइटर है जिसे एमडी-ब्लॉक के निर्माता ली वेरो ने सह-निर्मित किया है। आप इसका उपयोग वेब पेज में पूर्व-स्वरूपित कोड ब्लॉक को हाइलाइट करने के लिए कर सकते हैं, जिसमें वे भी शामिल हैं जो md-block उत्पन्न करता है।

तो, इस एचटीएमएल के साथ:

<एचटीएमएल>
<तन>
<एमडी-ब्लॉक>
``'जावास्क्रिप्ट'
समारोहवर्ग(संख्या) {
वापसी संख्या * संख्या;
}
```
</md-block>
<स्क्रिप्ट स्रोत ="प्रिज्म.जेएस"></script>
</body>
</html>

आपको वाक्यात्मक रूप से जागरूक हाइलाइटिंग के साथ अच्छी तरह से स्वरूपित कोड दिखाई देगा:

ऑनलाइन लिखने के आपके विकल्प बस बढ़े

आप एमडी-ब्लॉक का उपयोग कैसे करते हैं, यह आप पर निर्भर है, लेकिन इसका उपयोग करने वाले आविष्कारशील समाधानों की काफी संभावनाएं हैं। आप इसका उपयोग उन लेखकों के लिए बहुत हल्का सीएमएस चलाने के लिए कर सकते हैं जो मार्कडाउन का उपयोग करने में आश्वस्त हैं, लेकिन एचटीएमएल नहीं।

मार्कडाउन सामान्य दर्शकों के लिए एक आदर्श भाषा है। स्लैक जैसे उपकरणों द्वारा इसके अपनाने से उपयोग में और भी वृद्धि होने की संभावना है।