TypeScript में Markdown प्रसंस्करण: लाइब्रेरीज़, पार्सर और व्यावहारिक अनुप्रयोग

TypeScript में Markdown के साथ काम करना: पार्सिंग से लेकर कस्टम प्लगइन तक

Markdown दस्तावेज़ीकरण, ब्लॉग और शैक्षिक प्लेटफार्मों के लिए सबसे लोकप्रिय मार्कअप भाषाओं में से एक बना हुआ है। TypeScript में विकास करते समय, न केवल Markdown प्रदर्शित करने की आवश्यकता होती है, बल्कि इसके रूपांतरण प्रक्रिया को लचीले ढंग से प्रबंधित करने की भी आवश्यकता होती है। इस लेख में, हम तीन प्रमुख लाइब्रेरीज़ पर चर्चा करेंगे जो आपको अपने TypeScript प्रोजेक्ट में Markdown को एकीकृत करने में मदद करेंगी, और दिखाएंगे कि अपने स्वयं के एक्सटेंशन कैसे बनाएं।

Markdown के साथ काम करने के लिए TypeScript क्यों महत्वपूर्ण है?

TypeScript सख्त टाइपिंग जोड़ता है, जो उपयोगकर्ता सामग्री को संसाधित करते समय महत्वपूर्ण है। आपको ठीक-ठीक पता होता है कि Markdown फ़ाइलों से कौन सा डेटा आ रहा है, और आप रनटाइम त्रुटियों से बच सकते हैं। इसके अलावा, TypeScript पार्सर के लिए प्लगइन और middleware बनाना आसान बनाता है।

लोकप्रिय लाइब्रेरीज़ का अवलोकन

• marked — सबसे तेज़ और सरल पार्सर। न्यूनतम कॉन्फ़िगरेशन, उत्कृष्ट प्रदर्शन।
• unified / remark — सिंटैक्स विश्लेषण के लिए एक पारिस्थितिकी तंत्र। जटिल रूपांतरण श्रृंखलाएँ (AST -> HTML -> React) बनाने की अनुमति देता है।
• showdown — एक्सटेंशन के समर्थन के साथ एक हल्का विकल्प, अच्छी तरह से प्रलेखित।

उदाहरण 1: marked के साथ बुनियादी पार्सिंग

marked लाइब्रेरी त्वरित शुरुआत के लिए आदर्श है। इसे npm के माध्यम से स्थापित करें:

npm install marked

TypeScript के लिए प्रकार साथ में आते हैं। उपयोग का उदाहरण:

import { marked } from 'marked';

const markdownContent = `# नमस्ते, TypeScript!यह **बोल्ड टेक्स्ट** और `कोड` है।- सूची आइटम- एक और`;

const html = marked.parse(markdownContent);console.log(html);// आउटपुट: <h1>नमस्ते, TypeScript!</h1>// <p>यह <strong>बोल्ड टेक्स्ट</strong> और <code>कोड</code> है।</p>// <ul><li>सूची आइटम</li><li>एक और</li></ul>

एसिंक्रोनस कार्य के लिए marked.parseAsync() का उपयोग करें। यह नेटवर्क से फ़ाइलें लोड करते समय उपयोगी है।

उदाहरण 2: टाइपिंग के साथ कस्टम रेंडरर

कभी-कभी डिफ़ॉल्ट व्यवहार को बदलने की आवश्यकता होती है। उदाहरण के लिए, लिंक में क्लास जोड़ना या इमेज को प्रोसेस करना। TypeScript में एक कस्टम रेंडरर बनाएं:

import { marked, Renderer } from 'marked';

interface CustomRenderer extends Renderer {  link(href: string, title: string | null, text: string): string;}

const renderer: Partial<CustomRenderer> = {  link({ href, title, text }) {    return `<a href="${href}" target="_blank" rel="noopener noreferrer" class="external-link">${text}</a>`;  }};

marked.use({ renderer });

const markdown = 'विजिट करें [PythonLib](https://pythonlib.ru)';const result = marked.parse(markdown);// <a href="https://pythonlib.ru" target="_blank" class="external-link">PythonLib</a>

टाइप Partial<CustomRenderer> गारंटी देता है कि हम केवल आवश्यक विधियों को ओवरराइड कर रहे हैं।

उदाहरण 3: unified और remark के माध्यम से AST के साथ काम करना

यदि आपको दस्तावेज़ संरचना पर पूर्ण नियंत्रण चाहिए, तो unified और remark का उपयोग करें। स्थापना:

npm install unified remark-parse remark-stringify remark-html

सिंटैक्स ट्री (AST) में पार्सिंग और वापसी का उदाहरण:

import { unified } from 'unified';import remarkParse from 'remark-parse';import remarkStringify from 'remark-stringify';import remarkHtml from 'remark-html';

const markdown = '# शीर्षकयह **महत्वपूर्ण** है।';

const file = await unified()  .use(remarkParse)      // AST में पार्सिंग  .use(remarkStringify)  // वापस Markdown में (जाँच के लिए)  .process(markdown);

console.log(String(file)); // मूल Markdown

const htmlFile = await unified()  .use(remarkParse)  .use(remarkHtml)       // रूपांतरण