Markdown में JavaScript का उपयोग करना

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

JavaScript एकीकरण के मूल

Markdown + JavaScript का संयोजन

क्लाइंट-साइड रेंडरिंग: ब्राउज़र में Markdown को HTML में परिवर्तित करें
इंटरएक्टिव तत्व: बटन, फॉर्म, एनिमेशन जोड़ें
गतिशील सामग्री: उपयोगकर्ता इंटरैक्शन के आधार पर सामग्री बदलें
टूल और कैलकुलेटर: इंटरएक्टिव उपयोगिता बनाएँ
वास्तविक समय पूर्वावलोकन: Markdown संपादक

JavaScript लाइब्रेरीज़

Marked.js: तेज़ Markdown पार्सर
DOMPurify: XSS से सुरक्षा के लिए HTML सैनिटाइज़र
Prism.js: सिंटैक्स हाइलाइटिंग
Chart.js: चार्ट और ग्राफ़
Three.js: 3D विज़ुअलाइज़ेशन

मूल JavaScript एकीकरण

1. इनलाइन स्क्रिप्ट

Markdown दस्तावेज़ में सीधे JavaScript जोड़ें:

html

<script>
// सरल इंटरैक्शन
document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.interactive-button');
    
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            this.textContent = 'क्लिक किया गया!';
            this.style.backgroundColor = '#28a745';
            this.style.color = 'white';
            
            // 2 सेकंड बाद रीसेट करें
            setTimeout(() => {
                this.textContent = 'फिर से क्लिक करें';
                this.style.backgroundColor = '';
                this.style.color = '';
            }, 2000);
        });
    });
});
</script>

<button class="interactive-button">फिर से क्लिक करें</button>
<button class="interactive-button">एक और बटन</button>

2. बाहरी स्क्रिप्ट फाइलें

html

<script src="interactive-features.js"></script>

<div id="demo-section">
    <h3>JavaScript डेमो</h3>
    <p id="dynamic-text">यह गतिशील टेक्स्ट है।</p>
    <button onclick="updateContent()">सामग्री अपडेट करें</button>
</div>

interactive-features.js:

javascript

function updateContent() {
    const textElement = document.getElementById('dynamic-text');
    const now = new Date();
    textElement.innerHTML = `अंतिम अपडेट: ${now.toLocaleString('hi-IN')}`;
    
    // एनिमेशन प्रभाव
    textElement.style.transition = 'all 0.3s ease';
    textElement.style.color = '#007bff';
    textElement.style.transform = 'scale(1.05)';
    
    setTimeout(() => {
        textElement.style.transform = 'scale(1)';
    }, 300);
}

उन्नत इंटरैक्शन

1. वास्तविक समय Markdown संपादक

html

<div class="editor-container">
    <div class="editor-panel">
        <h3>Markdown संपादक</h3>
        <textarea id="markdown-input" placeholder="Markdown यहाँ लिखें..."># शीर्षक

यह एक **डेमो** पैराग्राफ है।

- सूची आइटम 1
- सूची आइटम 2</textarea>
    </div>
    
    <div class="preview-panel">
        <h3>पूर्वावलोकन</h3>
        <div id="markdown-preview"></div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>

<style>
.editor-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 600px;
    max-width: 1200px;
    margin: 0 auto;
}

.editor-panel, .preview-panel {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

#markdown-input {
    width: 100%;
    height: 500px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    resize: vertical;
}

#markdown-preview {
    height: 500px;
    overflow-y: auto;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .editor-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    #markdown-input, #markdown-preview {
        height: 300px;
    }
}
</style>

<script>
const input = document.getElementById('markdown-input');
const preview = document.getElementById('markdown-preview');

// वास्तविक समय पूर्वावलोकन
input.addEventListener('input', function() {
    const markdown = this.value;
    const html = marked.parse(markdown);
    
    // XSS से सुरक्षा
    const cleanHtml = DOMPurify.sanitize(html);
    
    preview.innerHTML = cleanHtml;
    
    // Prism के साथ सिंटैक्स हाइलाइटिंग
    Prism.highlightAllUnder(preview);
});

// प्रारंभिक लोड
input.dispatchEvent(new Event('input'));
</script>

2. इंटरएक्टिव चार्ट और ग्राफ़

Chart.js के साथ डेटा विज़ुअलाइज़ेशन:

html

<div class="chart-container">
    <h3>मासिक बिक्री डेटा</h3>
    <canvas id="salesChart" width="400" height="200"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('salesChart').getContext('2d');
    
    // डेटा
    const months = ['जनवरी', 'फरवरी', 'मार्च', 'अप्रैल', 'मई', 'जून'];
    const salesData = [12000, 19000, 3000, 5000, 20000, 18000];
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: months,
            datasets: [{
                label: 'बिक्री (₹)',
                data: salesData,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '2023 मासिक बिक्री'
                },
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '₹' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });
});
</script>

<style>
.chart-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#salesChart {
    max-height: 400px;
}
</style>

3. सर्च और फ़िल्टर कार्यक्षमता

Markdown सामग्री के लिए क्लाइंट-साइड सर्च:

html

<div class="search-container">
    <input type="text" id="searchInput" placeholder="खोजें...">
    <div id="searchResults"></div>
</div>

<div id="content-sections">
    <section data-keywords="markdown basics syntax">
        <h2>Markdown मूल बातें</h2>
        <p>Markdown एक हल्का मार्कअप भाषा है जो सादा टेक्स्ट को HTML में परिवर्तित करती है।</p>
    </section>
    
    <section data-keywords="tables lists images">
        <h2>सूचियाँ और तालिकाएँ</h2>
        <p>Markdown अनक्रमित और क्रमित सूचियाँ, साथ ही सरल तालिकाएँ समर्थन करता है।</p>
    </section>
    
    <section data-keywords="code blocks syntax highlighting">
        <h2>कोड ब्लॉक</h2>
        <p>फेंस्ड कोड ब्लॉक के साथ सिंटैक्स हाइलाइटिंग कोड स्निपेट्स को स्पष्ट बनाते हैं।</p>
    </section>
</div>

<script>
const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');
const sections = document.querySelectorAll('#content-sections section');

searchInput.addEventListener('input', function() {
    const query = this.value.toLowerCase().trim();
    searchResults.innerHTML = '';
    
    if (!query) {
        sections.forEach(section => section.style.display = 'block');
        searchResults.innerHTML = '<p>सभी सामग्री दिखाई जा रही है।</p>';
        return;
    }
    
    let resultsFound = 0;
    
    sections.forEach(section => {
        const keywords = section.dataset.keywords.toLowerCase();
        const textContent = section.textContent.toLowerCase();
        const title = section.querySelector('h2').textContent.toLowerCase();
        
        if (keywords.includes(query) || textContent.includes(query) || title.includes(query)) {
            section.style.display = 'block';
            resultsFound++;
            
            // हाइलाइटिंग
            const highlightedSection = highlightText(section.cloneNode(true), query);
            searchResults.appendChild(highlightedSection);
        } else {
            section.style.display = 'none';
        }
    });
    
    if (resultsFound === 0) {
        searchResults.innerHTML = '<p>कोई परिणाम नहीं मिला।</p>';
    }
});

function highlightText(element, term) {
    const walker = document.createTreeWalker(
        element,
        NodeFilter.SHOW_TEXT,
        null,
        false
    );
    
    let node;
    while (node = walker.nextNode()) {
        if (node.textContent.toLowerCase().includes(term)) {
            const regex = new RegExp(`(${term})`, 'gi');
            node.parentNode.innerHTML = node.parentNode.innerHTML.replace(regex, '<mark>$1</mark>');
        }
    }
    
    return element;
}
</script>

<style>
.search-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 0 20px;
}

#searchInput {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 25px;
    outline: none;
    box-sizing: border-box;
}

#searchInput:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

#searchResults {
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    background: #f8f9fa;
}

mark {
    background: #ffeb3b;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}

#content-sections {
    max-width: 800px;
    margin: 20px auto;
}

section {
    margin-bottom: 30px;
    padding: 20px;
    border-left: 4px solid #007bff;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

section:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
</style>

4. ऑफलाइन कार्यक्षमता

Service Worker के साथ ऑफलाइन Markdown दस्तावेज़:

javascript

// sw.js - Service Worker
const CACHE_NAME = 'markdown-docs-v1';
const urlsToCache = [
    '/',
    '/styles.css',
    '/script.js',
    '/offline.html'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    return response;
                }
                
                return fetch(event.request).then(
                    response => {
                        if (!response || response.status !== 200 || response.headers.get('content-type')?.match(/page/)) {
                            return response;
                        }
                        
                        const responseToCache = response.clone();
                        caches.open(CACHE_NAME)
                            .then(cache => cache.put(event.request, responseToCache));
                        
                        return response;
                    }
                );
            }
        ).catch(() => {
            return caches.match('/offline.html');
        })
    );
});

सर्वोत्तम प्रथाएँ

1. प्रगतिशील वृद्धि

javascript

// फीचर डिटेक्शन के साथ
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(registration => console.log('SW registered'))
        .catch(error => console.log('SW registration failed'));
}

// आधुनिक API समर्थन
if (window.IntersectionObserver) {
    // आलसी लोडिंग लागू करें
    initLazyLoading();
} else {
    // फॉलबैक: सभी छवियाँ तुरंत लोड करें
    loadAllImages();
}

2. त्रुटि हैंडलिंग

javascript

// सुरक्षित DOM मैनिपुलेशन
function safeElementQuery(selector) {
    const element = document.querySelector(selector);
    if (!element) {
        console.warn(`Element not found: ${selector}`);
        return null;
    }
    return element;
}

// ट्राई-कैच के साथ async ऑपरेशन
async function loadMarkdownContent(filePath) {
    try {
        const response = await fetch(filePath);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const markdown = await response.text();
        return marked.parse(markdown);
    } catch (error) {
        console.error('Markdown loading failed:', error);
        return '<p>सामग्री लोड करने में त्रुटि हुई।</p>';
    }
}

3. प्रदर्शन अनुकूलन

javascript

// डिबाउंस फंक्शन - वास्तविक समय सर्च के लिए
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// उपयोग
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', debouncedSearch);

// वर्चुअल स्क्रॉलिंग के लिए Intersection Observer
const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // तत्व दृश्यमान है - लोड/एनिमेट करें
            loadContent(entry.target);
        }
    });
}, observerOptions);

// अवलोकन योग्य तत्वों को देखें
document.querySelectorAll('.lazy-load').forEach(el => {
    observer.observe(el);
});

सुरक्षा विचार

1. XSS सुरक्षा

javascript

// DOMPurify के साथ सैनिटाइज़ेशन
import DOMPurify from 'dompurify';

function renderUserContent(userInput) {
    // Markdown को HTML में परिवर्तित करें
    const html = marked.parse(userInput);
    
    // XSS से सुरक्षा
    const cleanHtml = DOMPurify.sanitize(html, {
        ALLOWED_TAGS: [
            'p', 'strong', 'em', 'u', 'h1', 'h2', 'h3', 
            'ul', 'ol', 'li', 'a', 'code', 'pre', 'blockquote'
        ],
        ALLOWED_ATTR: ['href', 'target', 'title', 'rel']
    });
    
    return cleanHtml;
}

// उपयोग
const userMarkdown = '**सुरक्षित** उपयोगकर्ता सामग्री';
const safeHtml = renderUserContent(userMarkdown);
document.getElementById('user-content').innerHTML = safeHtml;

2. सुरक्षित इवेंट हैंडलर

javascript

// सुरक्षित इवेंट बाइंडिंग
function safeEventHandler(event, handler) {
    try {
        // इनपुट सत्यापन
        if (typeof handler !== 'function') {
            console.warn('Invalid handler provided');
            return;
        }
        
        // सुरक्षित पैरामीटर पास करें
        handler.call(this, {
            target: event.target,
            type: event.type,
            preventDefault: () => event.preventDefault(),
            stopPropagation: () => event.stopPropagation()
        });
    } catch (error) {
        console.error('Event handler error:', error);
        // उपयोगकर्ता को सूचित करें लेकिन ऐप क्रैश न होने दें
    }
}

// उपयोग
button.addEventListener('click', function(event) {
    safeEventHandler(event, handleButtonClick);
});

सारांश

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

मुख्य बिंदु:

सुरक्षा प्राथमिक: हमेशा XSS और अन्य सुरक्षा जोखिमों से बचें
प्रदर्शन अनुकूलन: डिबाउंसिंग, वर्चुअल स्क्रॉलिंग आदि का उपयोग करें
पहुंच: कीबोर्ड नेविगेशन, ARIA लेबल आदि सुनिश्चित करें
प्रगतिशील वृद्धि: आधुनिक API का उपयोग करें लेकिन फॉलबैक प्रदान करें

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

Markdown में JavaScript का उपयोग करना ​

JavaScript एकीकरण के मूल ​

Markdown + JavaScript का संयोजन ​

JavaScript लाइब्रेरीज़ ​

मूल JavaScript एकीकरण ​

1. इनलाइन स्क्रिप्ट ​

2. बाहरी स्क्रिप्ट फाइलें ​

उन्नत इंटरैक्शन ​

1. वास्तविक समय Markdown संपादक ​

2. इंटरएक्टिव चार्ट और ग्राफ़ ​

3. सर्च और फ़िल्टर कार्यक्षमता ​

4. ऑफलाइन कार्यक्षमता ​

सर्वोत्तम प्रथाएँ ​

1. प्रगतिशील वृद्धि ​

2. त्रुटि हैंडलिंग ​

3. प्रदर्शन अनुकूलन ​

सुरक्षा विचार ​

1. XSS सुरक्षा ​

2. सुरक्षित इवेंट हैंडलर ​

संबंधित संसाधन ​

सारांश ​

Markdown में JavaScript का उपयोग करना

JavaScript एकीकरण के मूल

Markdown + JavaScript का संयोजन

JavaScript लाइब्रेरीज़

मूल JavaScript एकीकरण

1. इनलाइन स्क्रिप्ट

2. बाहरी स्क्रिप्ट फाइलें

उन्नत इंटरैक्शन

1. वास्तविक समय Markdown संपादक

2. इंटरएक्टिव चार्ट और ग्राफ़

3. सर्च और फ़िल्टर कार्यक्षमता

4. ऑफलाइन कार्यक्षमता

सर्वोत्तम प्रथाएँ

1. प्रगतिशील वृद्धि

2. त्रुटि हैंडलिंग

3. प्रदर्शन अनुकूलन

सुरक्षा विचार

1. XSS सुरक्षा

2. सुरक्षित इवेंट हैंडलर

संबंधित संसाधन

सारांश