मैंने बिना किसी लाइब्रेरी के एक लाइव Markdown एडिटर बनाया
Markdown एडिटर बनाने के लिए आपको भारी-भरकम लाइब्रेरीज़ की ज़रूरत नहीं है। मैंने लगभग 40 लाइनों के कोड में इसका एक वर्किंग वर्शन बनाया है। जैसे ही आप टाइप करते हैं, यह तुरंत HTML रेंडर कर देता है।
यह प्रक्रिया पाँच विशिष्ट चरणों का पालन करती है:
HTML कैरेक्टर्स को एस्केप (Escape) करें आपको सबसे पहले < और > जैसे प्रतीकों को बदलना होगा। यह स्क्रिप्ट टैग्स से होने वाले XSS हमलों को रोकता है। यदि आप इसे छोड़ देते हैं, तो आपका एडिटर असुरक्षित है।
कोड ब्लॉक्स को सुरक्षित करें कोड ब्लॉक्स को निकालें और उन्हें प्लेसहोल्डर्स (placeholders) से बदल दें। इससे यह सुनिश्चित होता है कि आपके फॉर्मेटिंग नियम किसी सैंपल के अंदर मौजूद कोड को खराब न करें।
ब्लॉक नियमों को प्रोसेस करें टेक्स्ट की हर लाइन को बारीकी से देखें।
- h1 टैग बनाने के लिए # का उपयोग करें।
- लिस्ट आइटम बनाने के लिए - का उपयोग करें।
- कोट्स (quotes) बनाने के लिए > का उपयोग करें।
लिस्ट की लाइनों को एक सिंगल
<ul>टैग में ग्रुप करें।
- इनलाइन रेगुलर एक्सप्रेशन (regex) लागू करें टेक्स्ट स्टाइल को संभालने के लिए रेगुलर एक्सप्रेशन का उपयोग करें।
- text को strong टैग में बदलें।
- text को anchor टैग में बदलें। क्रम (order) महत्वपूर्ण है। गलतियों से बचने के लिए इटैलिक्स (italics) से पहले बोल्ड (bold) को प्रोसेस करें।
- लाइव रेंडर हर कीस्ट्रोक (keystroke) पर पूरे कंटेंट को फिर से रेंडर करें। Markdown छोटा होता है और इसे पार्स (parse) करना तेज़ होता है। इससे इंस्टेंट स्प्लिट-स्क्रीन इफेक्ट मिलता है।
लॉजिक सरल है: एस्केप, सुरक्षित करें, ब्लॉक नियम, इनलाइन regex, और रेंडर।
लाइव एडिटर यहाँ आज़माएँ: https://dev48v.infy.uk/solve/day11-markdown-editor.html
स्रोत: https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9