Markdown से HTML कनवर्टर — Markdown को HTML में ऑनलाइन रूपांतरित करें _

Markdown से HTML रूपांतरण क्या है?

Markdown एक हल्का सादा-पाठ प्रारूप है जो संरचित गद्य को एन्कोड करने के लिए न्यूनतम विराम चिह्नों का उपयोग करता है (शीर्षक के लिए #, ज़ोर के लिए *, सूची आइटम के लिए -)। GitHub Flavored Markdown (GFM) मूल CommonMark स्पेसिफिकेशन को तालिकाओं, स्ट्राइकथ्रू, टास्क लिस्ट और ऑटोलिंक्स के साथ विस्तारित करता है। HTML वह रेंडर रूप है जिसे ब्राउज़र दिखाता है। Markdown को HTML में बदलना आपको हल्के सिंटैक्स में लिखने और बिना टैग हाथ से लिखे रेंडर सतह पर भेजने की सुविधा देता है।

GitHub Flavored Markdown की कौन-सी विशेषताएँ समर्थित हैं?

संलग्न marked@12.0.2 पार्सर पूरे GFM सुपरसेट का समर्थन करता है: # से ###### तक ATX-शैली शीर्षक, नेस्टिंग के साथ क्रमित और अक्रमित सूचियाँ, बोल्ड **text** और इटैलिक *text*, स्ट्राइकथ्रू ~~text~~, इनलाइन लिंक [text](url) और इनलाइन चित्र ![alt](src), वैकल्पिक भाषा टैग वाले फेंस्ड कोड ब्लॉक (```js), इनलाइन कोड `code`, हेडर पंक्ति वाली पाइप तालिकाएँ, GFM टास्क लिस्ट - [ ] / - [x], उद्धरण >, क्षैतिज रेखाएँ ---, और ऑटोलिंक्स। हर एक प्रीव्यू पैनल में उसी तरह रेंडर होता है जैसे GitHub रेंडर करता है।

Markdown से HTML रूपांतरण कैसे काम करता है?

हर रूपांतरण आपके ब्राउज़र में दो संलग्न लाइब्रेरीज़ के साथ स्थानीय रूप से चलता है — कोई CDN नहीं, कोई fetch नहीं, कोई टेलीमेट्री नहीं। मुख्य चरण इस प्रकार हैं:

1. पार्स: marked.parse(source) आपका Markdown पढ़ता है और एक HTML स्ट्रिंग बनाता है। पार्सर GFM मोड में चलता है, इसलिए तालिकाएँ, टास्क लिस्ट, स्ट्राइकथ्रू और ऑटोलिंक्स सभी पहचाने जाते हैं।
2. शोधन: HTML आउटपुट को innerHTML को सौंपे जाने से पहले DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) से गुजारा जाता है। DOMPurify वही XSS शोधक है जिसे Mozilla MDN, Atlassian और Microsoft 365 उपयोग करते हैं — यह HTML को पार्स करता है, DOM घूमता है, और <script> तत्व, सभी on* इवेंट-हैंडलर एट्रिब्यूट्स और javascript: URI योजनाएँ हटा देता है।
3. रेंडर: शोधित HTML innerHTML के माध्यम से प्रीव्यू पैनल में लिखी जाती है, और मूल HTML दूसरे पैनल में read-only <textarea> के ज़रिये दिखाया जाता है ताकि आप markup कॉपी कर सकें। लाइव मोड इनपुट को 150 ms के लिए डिबाउंस करता है, जिससे टाइप करते समय प्रीव्यू पार्सर पर अधिक दबाव डाले बिना अपडेट होता रहे।

इस टूल से Markdown को HTML में क्यों बदलें?

• गोपनीयता: हर पार्स, शोधन और रेंडर पास आपके ब्राउज़र में होता है। Markdown — अप्रकाशित ब्लॉग पोस्ट, आंतरिक दस्तावेज़ ड्राफ़्ट, गोपनीय README सामग्री सहित — हमारे सर्वर तक कभी नहीं पहुँचती।
• डिफ़ॉल्ट रूप से XSS-सुरक्षित: रेंडर प्रीव्यू पैनल हर HTML स्ट्रिंग को innerHTML से पहले DOMPurify से गुज़ारता है, इसलिए आपके Markdown में कच्चे <script> टैग या onerror= हैंडलर पर भी निष्क्रिय प्रीव्यू बनता है। मूल टैब बिना शोधित स्ट्रिंग दिखाता है, लेकिन वह read-only <textarea> के अंदर value द्वारा रहती है — कभी निष्पादित नहीं होती।
• GFM-पूर्ण: तालिकाएँ, स्ट्राइकथ्रू, टास्क लिस्ट और ऑटोलिंक्स उसी तरह रेंडर होते हैं जैसे GitHub रेंडर करता है। Markdown pipe-तालिका <thead> और <tbody> वाली HTML <table> बन जाती है — कोई गिरी हुई पंक्तियाँ नहीं, कोई चपटी संरचना नहीं।

Markdown से HTML रूपांतरण के सामान्य अनुप्रयोग क्या हैं?

Markdown को HTML में बदलना दस्तावेज़ीकरण, स्थिर-साइट कार्य और ईमेल लेखन में हर जगह दिखाई देता है:

• GitHub README लेखन: किसी प्रोजेक्ट README का स्थानीय रूप से Markdown में मसौदा तैयार करें और पुश करने से पहले रेंडर HTML का प्रीव्यू देखें। प्रीव्यू तालिकाओं, टास्क लिस्ट और फेंस्ड कोड के लिए GitHub के GFM रेंडरर से मेल खाता है।
• स्थिर-साइट कंटेंट: Markdown पोस्ट पेस्ट करें और CMS फ़ील्ड या टेम्पलेट इंजन के लिए HTML प्राप्त करें जो Markdown स्रोत की बजाय markup की उम्मीद करता है।
• ईमेल टेम्पलेट: लेन-देन संबंधी ईमेल बॉडी को Markdown के रूप में लिखें और ईमेल सेवा प्रदाता के टेम्पलेट इंजन के लिए HTML में बदलें। आउटपुट सादा सेमांटिक HTML होता है — कोई इनलाइन शैली नहीं, कोई ईमेल-क्लाइंट विचित्रता नहीं।

Markdown से HTML रूपांतरण का उदाहरण कैसा दिखता है?

# Title\n\n- item 1\n- item 2\n\n[link](https://example.com) पेस्ट करने पर प्रीव्यू पैनल में <h1>Title</h1>, दो-आइटम अक्रमित सूची और <a href="https://example.com">link</a> दिखता है। मूल पैनल सटीक HTML स्ट्रिंग दिखाता है ताकि आप उसे सीधे किसी टेम्पलेट में कॉपी कर सकें। |---|---| संरेखण पंक्ति वाली pipe तालिका <thead> और <tbody> वाली पूर्ण <table> बन जाती है — जिससे यह सिद्ध होता है कि GFM तालिकाएँ वैसे ही रेंडर होती हैं जैसे GitHub रेंडर करता है।

क्या यह Markdown से HTML कनवर्टर पूरी तरह से मेरे ब्राउज़र में चलता है?

हाँ। हर पार्स, शोधन और रेंडर पास आपके ब्राउज़र टैब के अंदर JavaScript के रूप में स्थानीय रूप से चलता है। संलग्न लाइब्रेरीज़ — marked@12.0.2 और DOMPurify@3.1.7 — पृष्ठ के समान मूल से लोड होती हैं, इसलिए कोई CDN निर्भरता नहीं, कोई fetch नहीं, कोई XMLHttpRequest नहीं और इनपुट पर कोई navigator.sendBeacon नहीं। पृष्ठ एक बार लोड हो जाने के बाद यह ऑफ़लाइन भी काम करता है। अप्रकाशित पोस्ट्स, आंतरिक दस्तावेज़ और गोपनीय README आपके डिवाइस पर ही रहते हैं।

क्या रेंडर प्रीव्यू पैनल XSS-सुरक्षित है?

हाँ। innerHTML को सौंपी गई हर HTML स्ट्रिंग पहले DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) से गुज़रती है। DOMPurify Cure53 द्वारा बनाए गए ओपन-सोर्स XSS शोधक है; यही लाइब्रेरी Mozilla MDN, Atlassian और Microsoft 365 उपयोगकर्ता-प्रदत्त HTML को कठोर बनाने के लिए उपयोग करते हैं। डिफ़ॉल्ट html प्रोफ़ाइल <script> तत्व, सभी on* इवेंट-हैंडलर एट्रिब्यूट्स (onerror, onclick आदि), href / src के भीतर javascript: URI योजनाएँ और ज्ञात-खतरनाक CSS अभिव्यक्तियाँ हटा देती है। <img src=x onerror=alert(1)> पेस्ट करने पर ऐसा प्रीव्यू बनता है जहाँ document.querySelector('#output-preview img[onerror]') null लौटाता है और कोई अलर्ट नहीं चलता।

क्या GFM तालिकाएँ समर्थित हैं?

हाँ। Markdown → HTML दिशा marked के GFM मोड के माध्यम से पाइप तालिकाएँ मूलतः संभालती है — |---|---| संरेखण पंक्ति से अलग की गई हेडर पंक्ति, उसके बाद डेटा पंक्तियाँ, एक <table> बनाती हैं जिसमें <thead> और <tbody> होते हैं। स्ट्राइकथ्रू (~~text~~ → <del>text</del>) और टास्क लिस्ट (- [ ] / - [x] → <input type="checkbox">) उसी तरह रेंडर होते हैं जैसे GitHub रेंडर करता है।

क्या मेरा Markdown सटीक रूप से रूपांतरित होगा?

मानक GFM विशेषता-सेट के लिए — h1 से h6 तक शीर्षक, नेस्टिंग के साथ क्रमित और अक्रमित सूचियाँ, बोल्ड / इटैलिक / स्ट्राइकथ्रू, इनलाइन लिंक, इनलाइन चित्र, भाषा टैग वाले फेंस्ड कोड ब्लॉक, इनलाइन कोड, पाइप तालिकाएँ, टास्क लिस्ट, उद्धरण, क्षैतिज रेखाएँ और ऑटोलिंक्स — HTML आउटपुट स्थिर है और GitHub के रेंडरर से मेल खाता है। कुछ उल्लेखनीय व्यवहार: Markdown के अंदर रॉ इनलाइन HTML (जैसे <sub>text</sub>) आउटपुट में अपरिवर्तित गुज़रता है, और CommonMark setext शीर्षक (=== अंडरलाइन) और ATX शीर्षक (# Title) दोनों एक ही <h1> बनाते हैं। ये marked के दस्तावेज़ीकृत व्यवहार हैं, बग नहीं। यदि आपको विपरीत दिशा चाहिए, HTML से Markdown टूल का उपयोग करें।

क्या फेंस्ड कोड ब्लॉक में सिंटैक्स हाइलाइटिंग समर्थित है?

v1 में नहीं। फेंस्ड कोड ब्लॉक मोनोस्पेस फ़ॉन्ट और हल्की पृष्ठभूमि के साथ रेंडर होते हैं, पर भाषा-विशिष्ट टोकन हाइलाइटिंग के बिना। सिंटैक्स हाइलाइटिंग जोड़ने के लिए Prism या highlight.js को बंडल करना होगा, जिनमें से प्रत्येक 15–40 KB जोड़ता है, साथ ही प्रति-भाषा व्याकरण फ़ाइल और Workshop Terminal पैलेट के साथ संरेखण की आवश्यकता वाली थीम मैट्रिक्स भी। फ़िलहाल रेंडरर शुद्धता और XSS-सुरक्षा पर केंद्रित है; यदि इनलाइन हाइलाइटिंग के लिए उपयोगकर्ता माँग हो, तो ऑप्ट-इन टॉगल एक व्यावहारिक अगला कदम है।

यह Markdown से HTML कनवर्टर समान मूल पर marked@12.0.2 और DOMPurify@3.1.7 के साथ आता है, पूरे GFM विशेषता-सेट का समर्थन करता है, और रेंडर किए गए हर HTML स्ट्रिंग को DOM तक पहुँचने से पहले शोधित करता है। कोई अपलोड नहीं, कोई CDN नहीं, कोई टेलीमेट्री नहीं — हर बाइट आपके ब्राउज़र में ही रहता है।