TypeScript में Markdown: लाइब्रेरी, पार्सर और टूल्स की पूरी गाइड

Markdown और TypeScript का परिचय

Markdown एक हल्की मार्कअप भाषा है, जिसका उपयोग डॉक्यूमेंटेशन, README फ़ाइलों, ब्लॉग और चैट में टेक्स्ट को फ़ॉर्मेट करने के लिए व्यापक रूप से किया जाता है। TypeScript, JavaScript का एक सख्ती से टाइप किया गया सुपरसेट है, जो Markdown प्रोसेसिंग के लिए विश्वसनीय और स्केलेबल एप्लिकेशन बनाने में मदद करता है। pythonlib.ru पर हम TypeScript में Markdown के साथ काम करने के लिए सबसे अच्छी लाइब्रेरी और टूल्स, उनकी क्षमताओं और उपयोग के उदाहरणों पर चर्चा करेंगे।

Markdown पार्स करने के लिए लोकप्रिय लाइब्रेरी

Markdown को HTML या अन्य फ़ॉर्मेट में बदलने के लिए कई परिपक्व समाधान मौजूद हैं। आइए तीन सबसे लोकप्रिय पर नज़र डालते हैं:

• marked — एक तेज़ और हल्का पार्सर जो GFM (GitHub Flavored Markdown) सिंटैक्स को सपोर्ट करता है। इसमें TypeScript के लिए बिल्ट-इन टाइप्स हैं।
• showdown — Markdown को HTML में बदलने वाला एक बहुमुखी कन्वर्टर जिसे एक्सटेंड और कस्टमाइज़ किया जा सकता है।
• unified (remark पैकेज के साथ) — AST (Abstract Syntax Tree) पर आधारित Markdown प्रोसेसिंग के लिए एक आधुनिक इकोसिस्टम। यह न केवल पार्स करने, बल्कि Markdown का विश्लेषण, रूपांतरण और फ़ॉर्मेटिंग करने की भी अनुमति देता है।

इंस्टॉलेशन और सेटअप

शुरू करने के लिए, npm के माध्यम से एक लाइब्रेरी इंस्टॉल करें। marked का उदाहरण:

npm install marked
npm install @types/marked --save-dev

remark के साथ unified के लिए कई पैकेजों की आवश्यकता होगी:

npm install unified remark-parse remark-html
npm install @types/unified @types/remark-parse

उदाहरण: marked के साथ Markdown पार्स करना

चलिए Markdown स्ट्रिंग को HTML में बदलने के लिए एक सरल फंक्शन बनाते हैं:

import { marked } from 'marked';

function renderMarkdown(mdContent: string): string {
    return marked.parse(mdContent);
}

const md = `# शीर्षक\n\nयह **बोल्ड** टेक्स्ट है और _इटैलिक_।`;
const html = renderMarkdown(md);
console.log(html);
// आउटपुट: <h1>शीर्षक</h1>
// <p>यह <strong>बोल्ड</strong> टेक्स्ट है और <em>इटैलिक</em>।</p>

unified + remark के माध्यम से AST के साथ काम करना

unified लाइब्रेरी आपको ट्री स्तर पर Markdown के साथ काम करने की अनुमति देती है। यह दस्तावेज़ की संरचना का विश्लेषण करने, शीर्षक निकालने या लिंक बदलने के लिए उपयोगी है।

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

async function mdToHtml(mdContent: string): Promise<string> {
    const file = await unified()
        .use(remarkParse)
        .use(remarkHtml)
        .process(mdContent);
    return String(file);
}

const md = `## दूसरा स्तर\n\nसूची:\n- आइटम 1\n- आइटम 2`;
mdToHtml(md).then(console.log);
// आउटपुट: <h2>दूसरा स्तर</h2>
// <p>सूची:</p>
// <ul>
// <li>आइटम 1</li>
// <li>आइटम 2</li>
// </ul>

सिंटैक्स हाइलाइटिंग के साथ Markdown एडिटर बनाना

शैक्षिक वेबसाइट के लिए एक इंटरैक्टिव एडिटर बनाना उपयोगी है, जिसमें उपयोगकर्ता Markdown लिखता है और दाईं ओर सिंटैक्स हाइलाइटिंग के साथ HTML का पूर्वावलोकन देखता है। कोड ब्लॉक को हाइलाइट करने के लिए marked और highlight.js का उपयोग करें:

import { marked } from 'marked';
import hljs from 'highlight.js';

// highlight.js का उपयोग करने के लिए marked को कॉन्फ़िगर करें
marked.setOptions({
    highlight: (code: string, lang: string) => {
        if (lang && hljs.getLanguage(lang)) {
            return hljs.highlight(code, { language: lang }).value;
        }
        return code; // अगर भाषा निर्दिष्ट नहीं है या नहीं मिली
    }
});

function previewMarkdown(mdContent: string): string {
    return marked.parse(mdContent);
}

// ब्राउज़र में उपयोग का उदाहरण (textarea पर input इवेंट)
const textarea = document.getElementById('editor') as HTMLTextAreaElement;
const preview = document.getElementById('preview') as HTMLElement;