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

Markdown मूल रूप से HTML उत्पन्न करता है, जो CSS स्टाइलिंग के लिए खुला है। यह अनुभाग Markdown सामग्री को स्टाइल करने के लिए CSS का उपयोग कैसे करें, इसकी व्याख्या करता है।

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

Markdown और CSS का संबंध

Markdown → HTML → CSS: Markdown HTML उत्पन्न करता है, जो CSS नियमों का उपयोग करके स्टाइल किया जा सकता है
थीमिंग: Markdown दस्तावेज़ों के लिए कस्टम दृश्य थीम्स बनाएँ
रिस्पॉन्सिव डिज़ाइन: विभिन्न डिवाइसों पर अनुकूलित लेआउट
कस्टम घटक: Markdown सामग्री के लिए विशिष्ट स्टाइल्ड तत्व

CSS लोडिंग विधियाँ

1. बाहरी स्टाइलशीट

html

<link rel="stylesheet" href="styles.css">

styles.css:

css

/* सामान्य Markdown स्टाइल्स */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1, h2, h3 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

code {
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
}

2. इनलाइन CSS

html

<style>
.custom-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 10px;
    margin: 20px 0;
    text-align: center;
}

.highlight {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px;
    margin: 15px 0;
}
</style>

3. CSS-इन-JS (उन्नत)

JavaScript के साथ गतिशील स्टाइलिंग:

html

<div id="dynamic-content" class="base-style">
    यह गतिशील रूप से स्टाइल की गई सामग्री है।
</div>

<script>
function applyTheme(theme) {
    const content = document.getElementById('dynamic-content');
    
    if (theme === 'dark') {
        content.style.backgroundColor = '#2c3e50';
        content.style.color = '#ecf0f1';
    } else if (theme === 'colorful') {
        content.style.background = 'linear-gradient(45deg, #ff6b6b, #4ecdc4)';
        content.style.color = 'white';
    }
}

// थीम लागू करें
applyTheme('dark');
</script>

कस्टम CSS घटक

1. अलर्ट बॉक्स

css

/* अलर्ट बॉक्स स्टाइल्स */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

उपयोग:

html

<div class="alert alert-info">
    <strong>नोट:</strong> यह सूचना अलर्ट है।
</div>

<div class="alert alert-warning">
    <strong>चेतावनी:</strong> यह चेतावनी अलर्ट है।
</div>

2. कार्ड लेआउट

css

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 20px 0;
    overflow: hidden;
}

.card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    font-weight: bold;
}

.card-body {
    padding: 20px;
    line-height: 1.6;
}

उपयोग:

html

<div class="card">
    <div class="card-header">फीचर विवरण</div>
    <div class="card-body">
        <p>यह एक कार्ड बॉडी है जो Markdown सामग्री शामिल कर सकता है।</p>
        <ul>
            <li>बुलेट पॉइंट 1</li>
            <li>बुलेट पॉइंट 2</li>
        </ul>
    </div>
</div>

3. टैब्ड इंटरफेस

css

.tabbed-content {
    margin: 20px 0;
}

.tab-buttons {
    display: flex;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 0;
}

.tab-button {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    color: #6c757d;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.tab-button.active {
    color: #495057;
    border-bottom-color: #007bff;
}

.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-top: none;
}

.tab-content.active {
    display: block;
}

JavaScript के साथ:

html

<div class="tabbed-content">
    <div class="tab-buttons">
        <button class="tab-button active" onclick="showTab('tab1')">विवरण</button>
        <button class="tab-button" onclick="showTab('tab2')">विनिर्देश</button>
        <button class="tab-button" onclick="showTab('tab3')">समीक्षा</button>
    </div>
    
    <div id="tab1" class="tab-content active">
        <h3>उत्पाद विवरण</h3>
        <p>यह उत्पाद का विस्तृत विवरण है।</p>
    </div>
    
    <div id="tab2" class="tab-content">
        <h3>तकनीकी विनिर्देश</h3>
        <ul>
            <li>प्रोसेसर: Intel Core i7</li>
            <li>मेमोरी: 16GB RAM</li>
            <li>स्टोरेज: 512GB SSD</li>
        </ul>
    </div>
    
    <div id="tab3" class="tab-content">
        <h3>उपयोगकर्ता समीक्षा</h3>
        <blockquote>
            "उत्कृष्ट उत्पाद! प्रदर्शन शानदार है।"
        </blockquote>
    </div>
</div>

<script>
function showTab(tabId) {
    // सभी टैब बटन को डीएक्टिवेट करें
    document.querySelectorAll('.tab-button').forEach(btn => {
        btn.classList.remove('active');
    });
    
    // सभी टैब सामग्री को छुपाएँ
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
    });
    
    // चयनित टैब को सक्रिय करें
    event.target.classList.add('active');
    document.getElementById(tabId).classList.add('active');
}
</script>

रिस्पॉन्सिव डिज़ाइन

मीडिया क्वेरीज़

विभिन्न स्क्रीन आकारों के लिए अनुकूलित करें:

css

/* मोबाइल-फर्स्ट दृष्टिकोण */
.content {
    font-size: 16px;
    line-height: 1.6;
    max-width: 100%;
    padding: 10px;
}

/* टैबलेट */
@media (min-width: 768px) {
    .content {
        max-width: 750px;
        padding: 20px;
        font-size: 18px;
    }
    
    .card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* डेस्कटॉप */
@media (min-width: 1024px) {
    .content {
        max-width: 900px;
        padding: 30px;
    }
    
    .sidebar {
        position: sticky;
        top: 20px;
        order: 2;
    }
    
    .main-content {
        order: 1;
    }
}

/* बड़े स्क्रीन */
@media (min-width: 1200px) {
    .content {
        max-width: 1100px;
    }
    
    .container {
        display: grid;
        grid-template-columns: 250px 1fr 250px;
        gap: 30px;
    }
}

लचीली छवियाँ

css

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* रिटिना डिस्प्ले के लिए */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

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

1. CSS मिनिफिकेशन

उत्पादन के लिए CSS को छोटा करें:

css

/* मूल CSS */
body{font-family:Arial,sans-serif;margin:0;padding:20px;line-height:1.6;color:#333;background:#fff}

/* मिनिफाइड CSS */
body{font-family:Arial,sans-serif;margin:0;padding:20px;line-height:1.6;color:#333;background:#fff}

2. क्रिटिकल CSS इनलाइन

शीर्ष-मुख्य सामग्री के लिए CSS को इनलाइन करें:

html

<style>
/* क्रिटिकल CSS - ऊपर की सामग्री के लिए */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6;margin:0 auto;max-width:800px;padding:20px}
h1,h2,h3{color:#2c3e50;margin-top:2em;margin-bottom:1em}
p{margin-bottom:1.5em}
</style>

<!-- बाकी सामग्री -->

3. आलसी CSS लोडिंग

गैर-क्रिटिकल CSS को आलसी लोड करें:

html

<link rel="preload" href="critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="critical.css"></noscript>

<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

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

1. XSS रोकें

उपयोगकर्ता-जनित HTML के लिए सैनिटाइज़ेशन:

javascript

const DOMPurify = require('dompurify');

function sanitizeHTML(dirtyHTML) {
    return DOMPurify.sanitize(dirtyHTML, {
        ALLOWED_TAGS: ['p', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'code', 'pre'],
        ALLOWED_ATTR: ['href', 'target', 'title']
    });
}

// उपयोग
const userInput = '<script>alert("XSS")</script><p>Safe content</p>';
const safeHTML = sanitizeHTML(userInput);

2. सुरक्षित CSS

सुरक्षित CSS गुणों का उपयोग करें:

css

/* सुरक्षित */
.safe-styles {
    color: blue;
    font-size: 16px;
    margin: 10px;
    display: block;
}

/* असुरक्षित - बचें */
.unsafe-styles {
    position: absolute; /* लेआउट तोड़ सकता है */
    content: url(data:...); /* बाहरी सामग्री लोड कर सकता है */
    behavior: url(...); /* पुराना IE हैक */
}

3. CSP हेडर

सामग्री सुरक्षा नीति लागू करें:

html

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               style-src 'self' 'unsafe-inline'; 
               script-src 'self' 'unsafe-inline'; 
               img-src 'self' data: https:;">

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

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

css

/* मूल Markdown स्टाइल्स पहले */
.markdown-content {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* उन्नत कस्टमाइज़ेशन बाद में */
@media (prefers-color-scheme: dark) {
    .markdown-content {
        background: #1a1a1a;
        color: #e0e0e0;
    }
}

/* थीम-विशिष्ट स्टाइल्स */
.theme-modern h1 {
    background: linear-gradient(90deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

2. पहुंच प्राथमिकता

css

/* पहुंच-केंद्रित स्टाइल्स */
:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* उच्च कंट्रास्ट मोड */
@media (prefers-contrast: high) {
    .markdown-content {
        border: 1px solid;
        background-color: #000;
        color: #fff;
    }
}

3. क्रॉस-ब्राउज़र संगतता

css

/* आधुनिक ब्राउज़रों के लिए */
@supports (display: grid) {
    .grid-layout {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
}

/* फॉलबैक */
.grid-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

सारांश

CSS का उपयोग करके Markdown दस्तावेज़ों को स्टाइल करना, सामग्री को अधिक आकर्षक और उपयोगकर्ता-अनुकूल बनाता है। कस्टम घटकों, रिस्पॉन्सिव डिज़ाइन और प्रदर्शन अनुकूलन के साथ, आप पेशेवर-गुणवत्ता वाली वेब सामग्री बना सकते हैं।

मुख्य बिंदु:

Markdown + CSS = शक्तिशाली संयोजन: Markdown की सादगी + CSS की लचीलापन
पहुंच और प्रदर्शन प्राथमिकता: हमेशा उपयोगकर्ता अनुभव पर विचार करें
सुरक्षा पहले: विशेष रूप से उपयोगकर्ता-जनित सामग्री के साथ

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

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

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

Markdown और CSS का संबंध ​

CSS लोडिंग विधियाँ ​

1. बाहरी स्टाइलशीट ​

2. इनलाइन CSS ​

3. CSS-इन-JS (उन्नत) ​

कस्टम CSS घटक ​

1. अलर्ट बॉक्स ​

2. कार्ड लेआउट ​

3. टैब्ड इंटरफेस ​

रिस्पॉन्सिव डिज़ाइन ​

मीडिया क्वेरीज़ ​

लचीली छवियाँ ​

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

1. CSS मिनिफिकेशन ​

2. क्रिटिकल CSS इनलाइन ​

3. आलसी CSS लोडिंग ​

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

1. XSS रोकें ​

2. सुरक्षित CSS ​

3. CSP हेडर ​

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

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

2. पहुंच प्राथमिकता ​

3. क्रॉस-ब्राउज़र संगतता ​

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

सारांश ​

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

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

Markdown और CSS का संबंध

CSS लोडिंग विधियाँ

1. बाहरी स्टाइलशीट

2. इनलाइन CSS

3. CSS-इन-JS (उन्नत)

कस्टम CSS घटक

1. अलर्ट बॉक्स

2. कार्ड लेआउट

3. टैब्ड इंटरफेस

रिस्पॉन्सिव डिज़ाइन

मीडिया क्वेरीज़

लचीली छवियाँ

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

1. CSS मिनिफिकेशन

2. क्रिटिकल CSS इनलाइन

3. आलसी CSS लोडिंग

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

1. XSS रोकें

2. सुरक्षित CSS

3. CSP हेडर

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

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

2. पहुंच प्राथमिकता

3. क्रॉस-ब्राउज़र संगतता

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

सारांश