Markdown पूर्वावलोकन

Markdown रेंडरर क्या है?#

Markdown वह सादा-पाठ शॉर्टहैंड है जो डेवलपर्स समृद्ध पाठ लिखने के लिए उपयोग करते हैं: **बोल्ड**, # शीर्षक, - सूचियाँ, `कोड`। एक रेंडरर वह प्रोग्राम है जो इन शॉर्टहैंड चिह्नों को उस HTML में बदलता है जो ब्राउज़र वास्तव में प्रदर्शित करता है। README फ़ाइलें, प्रलेखन साइटें, issue-tracker टिप्पणियाँ, चैट ऐप, और स्थैतिक-साइट जनरेटर सभी Markdown को आपको दिखाने से पहले एक रेंडरर से चलाते हैं।

यह पेज एक Markdown रेंडरर है जिसमें एक विशिष्ट डिज़ाइन प्राथमिकता है: यह निर्माण से सुरक्षित है, छँटाई से नहीं। अधिकांश रेंडरर पहले Markdown को HTML में बदलते हैं और फिर खतरनाक टैग परिणाम से बाहर खुरचने का प्रयास करते हैं — एक ऐसा मॉडल जहाँ एक छूटा हुआ regex का अर्थ XSS भेद्यता है। यह टूल उल्टा काम करता है: स्रोत का हर अक्षर किसी भी फ़ॉर्मेटिंग लागू होने से पहले HTML-एस्केप होता है, और जो टैग यह कभी उत्सर्जित करता है वे एक नियत, हार्डकोडेड अलाउ-लिस्ट (p, h1–h6, ul, ol, li, blockquote, pre, code, hr, a, img, strong, em, del, br) से आते हैं। ऐसा कोई कोड पथ नहीं है जो आपके इनपुट से एक <script> टैग उत्सर्जित कर सके, क्योंकि स्रोत में कच्चा < इससे पहले एस्केप होकर < हो जाता है कि फ़ॉर्मेटर इसे देखे। यही इसे इस जैसी कठोर-CSP स्थैतिक साइट के लिए उपयुक्त बनाता है।

यह CommonMark का एक केंद्रित उपसमुच्चय और साथ ही GitHub-Flavored Markdown के आवश्यक तत्व लागू करता है: बाड़-युक्त कोड ब्लॉक, ATX शीर्षक, पैराग्राफ़, क्रमबद्ध और अक्रमबद्ध सूचियाँ, blockquotes, विषय-विराम (---), इनलाइन कोड, बोल्ड, italic, स्ट्राइकथ्रू, छवियाँ, लिंक, और कोण autolinks। वही इनपुट आपको साथ-साथ दो आउटपुट देता है — रेंडर किया पूर्वावलोकन और कच्चा HTML — ताकि आप ठीक देख सकें कि रेंडरर ने क्या उत्पन्न किया।

इसका उपयोग कैसे करें#

1. बाएँ फलक में Markdown टाइप करें, या हर समर्थित सुविधा का परीक्षण करने वाला अंतर्निहित दस्तावेज़ लोड करने के लिए नमूना क्लिक करें।
2. दाएँ फलक के ऊपर दो बटनों से आउटपुट स्विच करें:
   • पूर्वावलोकन स्वरूपित परिणाम को वैसे ही दिखाता है जैसे वह वेब पेज पर दिखेगा।
   • HTML वह ठीक HTML दिखाता है जो रेंडरर उत्सर्जित करता है, जिसे आप किसी टेम्पलेट में चिपकाएँगे या किसी सैनिटाइज़र ऑडिट को सौंपेंगे।
3. कहीं और उपयोग के लिए उत्पन्न HTML लेने के लिए HTML कॉपी करें क्लिक करें — किसी CMS में चिपकाने, किसी टेम्पलेट में अंतःस्थापित करने, या किसी समीक्षा से चलाने के लिए।
4. दोनों फलक खाली करने के लिए साफ़ करें क्लिक करें।
5. स्थिति पंक्ति रेंडर की गई बाइट लंबाई रिपोर्ट करती है या नोट करती है जब इनपुट खाली हो।

मुख्य विशेषताएँ#

• निर्माण से सुरक्षित। सभी स्रोत पाठ फ़ॉर्मेटिंग से पहले HTML-एस्केप होते हैं, और रेंडरर केवल टैग की एक नियत अलाउ-लिस्ट उत्सर्जित करता है। “फिर खतरनाक हिस्से हटाओ” का कोई कदम नहीं है जो गलत हो सके।
• खतरनाक URL स्कीम हटाए। लिंक और छवि URL स्कीम-जाँचे जाते हैं; javascript:, vbscript:, data:, file:, और about: अवरुद्ध हैं, और दोषपूर्ण पाठ को एक लाइव लिंक बनने के बजाय शाब्दिक रूप से दिखाया जाता है।
• दो दृश्य, एक स्रोत। रेंडर किए पूर्वावलोकन और कच्चे HTML के बीच पुनः-टाइप किए बिना टॉगल करें, ताकि आप दृश्य परिणाम और इसके द्वारा उत्पन्न मार्कअप दोनों सत्यापित कर सकें।
• GFM आवश्यक तत्व शामिल। स्ट्राइकथ्रू (~~text~~), भाषा संकेतों के साथ बाड़-युक्त कोड ब्लॉक, और task-friendly सूचियाँ वैसे ही व्यवहार करती हैं जैसे GitHub-flavored Markdown।
• शून्य निर्भरताएँ, 100% क्लाइंट-साइड। रेंडरर स्व-लागू है — कोई बंडल की गई पार्सिंग लाइब्रेरी नहीं — और पूरी तरह आपके ब्राउज़र में चलता है। कुछ भी अपलोड नहीं होता, और इंजेक्ट करने के लिए कोई बैकएंड नहीं।

विस्तृत उदाहरण#

नमूना क्लिक करें और बायाँ फलक एक दस्तावेज़ से भरता है जो मूल सिंटैक्स का परीक्षण करता है:

# Heading

A paragraph with **bold**, *italic*, ~~strike~~ and `inline code`.

- bullet one
- bullet two

1. first
2. second

> A blockquote.

[a link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

HTML पर स्विच करें और आप ठीक देखते हैं कि रेंडरर ने क्या उत्सर्जित किया। पैराग्राफ़ बनता है:

<p>A paragraph with <strong>bold</strong>, <em>italic</em>,
<del>strike</del> and <code>inline code</code>.</p>

लिंक सुरक्षित rel/attributes के साथ एक कठोर लक्ष्य बनता है:

<a href="https://example.com" rel="noopener noreferrer" target="_blank">a link</a>

और बाड़-युक्त ब्लॉक एक एस्केप किया <pre><code> बनता है जो स्रोत शाब्दिक रूप से संरक्षित रखता है — const x = 42; पाठ के रूप में दिखता है, निष्पादित स्क्रिप्ट के रूप में नहीं। वह अंतिम बिंदु पूरी सुरक्षा कहानी लघु रूप में है: यदि आप स्रोत में <script>alert(1)</script> चिपकाते, तो यह शाब्दिक पाठ <script>alert(1)</script> के रूप में रेंडर होता, क्योंकि < इससे पहले < में एस्केप हो जाता है कि फ़ॉर्मेटर तय करे कि क्या टैग है।

अक्सर पूछे जाने वाले प्रश्न#

मैं यह क्यों उपयोग करूँ, सीधे HTML लिखने के बजाय?#

क्योंकि Markdown टाइप करने में तेज़, स्रोत रूप में पढ़ने में आसान, और ग़ैर-HTML-पारंगत योगदानकर्ताओं को सामग्री लिखने देता है। यह रेंडरर तब के लिए है जब आप वह सुविधा चाहते हैं बिना किसी सामान्य पार्सिंग लाइब्रेरी पर भरोसा किए कि वह सुरक्षित भी हो — यहाँ सुरक्षा आर्किटेक्चर से आती है, अंत में बोल्ट-ऑन किए गए सैनिटाइज़र से नहीं।

मैंने एक <script> टैग चिपकाया और वह पाठ के रूप में दिखा। क्या वह बग है?#

नहीं — वह इच्छित व्यवहार और मूल सुरक्षा गारंटी है। आपके इनपुट का हर अक्षर फ़ॉर्मेटिंग से पहले HTML-एस्केप होता है, इसलिए स्रोत में कोई भी टैग-जैसा पाठ जड़ दृश्यमान पाठ के रूप में रेंडर होता है। इस रेंडरर से आउटपुट में कोई लाइव <script> पाने का कोई रास्ता नहीं है।

मेरा javascript: लिंक सादे पाठ के रूप में क्यों दिखा?#

रेंडरर हर लिंक और छवि URL स्कीम-जाँचता है। javascript:, vbscript:, data:, file:, और about: जैसी स्कीम अवरुद्ध हैं क्योंकि वे इंजेक्शन हमलों के लिए क्लासिक वाहक हैं। जब कोई URL अवरुद्ध होती है, रेंडरर मूल Markdown स्रोत को एक खतरनाक एंकर उत्सर्जित करने के बजाय शाब्दिक पाठ के रूप में छोड़ देता है।

क्या यह तालिकाओं, कार्य सूचियों, या फुटनोटों का समर्थन करता है?#

नहीं — यह CommonMark का एक जानबूझकर, केंद्रित उपसमुच्चय और साथ ही GFM आवश्यक तत्व (बाड़-युक्त कोड, स्ट्राइकथ्रू, autolinks) है। तालिकाओं और फुटनोटों को एक समृद्ध पार्सर और निगरानी के लिए एक बड़ा हमले का तल चाहिए; वे जानबूझकर यहाँ दायरे से बाहर हैं। ऊपर विशेषताओं में सूचीबद्ध समर्थित निर्माणों तक ही रहें।