2025, Oct 19 09:31

.markdown-body रैपर के बिना CSS क्यों नहीं लगती: Python उदाहरण

Python में Markdown को HTML में बदलते समय CSS काम नहीं कर रही? जानें असली वजह: स्टाइलशीट के .markdown-body रैपर की कमी. सही संरचना व कोड से स्टाइल्स लागू करें.

Python के जरिए Markdown को HTML में बदलते समय, अक्सर हैरानी होती है कि स्टाइलशीट जोड़ने के बाद भी आउटपुट बिना शैली के दिखता है। HTML वैध है, CSS का पाथ सही है, फिर भी पेज सादा, बेसिक लेआउट में दिखाई देता है। वजह सीधी है: स्टाइलशीट एक खास wrapper क्लास को टार्गेट करती है, और अगर वह क्लास आपके मार्कअप में नहीं है, तो नियम लागू ही नहीं होते।

समस्या का परिदृश्य

HTML Markdown से जनरेट होता है, फिर उसे स्टाइलशीट से लिंक किए गए एक न्यूनतम डॉक्यूमेंट में एम्बेड कर दिया जाता है। नतीजा दिखता तो है, लेकिन फॉर्मेटिंग साधारण ही रहती है।

from markdown import markdown as md_convert
md_source = '''
#Example
## Emphasis
**This is bold text**
__This is bold text__
 ...
'''
result_html = md_convert(md_source, extensions=['fenced_code','codehilite'])
stylesheet_url = '"css/github-markdown.css"'
page_html = f'<html><head><link rel="stylesheet" type="text/css" href={stylesheet_url}></head><body>{result_html}</body></html>'
print(page_html)

तैयार हुआ HTML इसी पैटर्न का होता है और रेंडर भी ठीक से होता है, पर अपेक्षित Markdown स्टाइल्स लागू नहीं होते। उधर CSS अपने नियम .markdown-body जैसी क्लास के अंदर परिभाषित करती है।

स्टाइल्स लागू क्यों नहीं हो रहे

स्टाइलशीट scoped सेलेक्टर्स (जैसे .markdown-body) का इस्तेमाल करती है। यानी वह चाहती है कि आपका रेंडर हुआ Markdown उस क्लास वाला किसी तत्व के अंदर हो। अगर आपके HTML में wrapper तत्व पर यह क्लास नहीं है, तो सेलेक्टर्स मैच ही नहीं करेंगे और परिणामस्वरूप ब्राउज़र की डिफ़ॉल्ट टाइपोग्राफी और स्पेसिंग दिखेगी। अपेक्षित संरचना कुछ ऐसी होती है:

<body class="markdown-body"><h1>Example</h1> ...</body>

जैसे ही यह क्लास मौजूद होती है, सेलेक्टर्स हेडिंग, पैराग्राफ, सूचियाँ, ब्लॉककोट और Markdown लाइब्रेरी द्वारा बनाए गए अन्य तत्वों पर असर दिखाते हैं।

पेज संरचना को ठीक करना

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

from markdown import markdown as md_convert
md_source = '''
#Example
## Emphasis
**This is bold text**
__This is bold text__
 ...
'''
result_html = md_convert(md_source, extensions=['fenced_code','codehilite'])
stylesheet_url = '"css/github-markdown.css"'
page_html = f'''
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href={stylesheet_url}>
    <title>Markdown Viewer</title>
  </head>
  <body class="markdown-body">
    {result_html}
  </body>
</html>
'''
print(page_html)

इस तरह .markdown-body सेलेक्टर्स मैच करते हैं और पेज अपेक्षित Markdown टाइपोग्राफी व स्पेसिंग के साथ दिखाई देता है।

यह बारीकी क्यों मायने रखती है

प्रोग्रामेटिक रूप से HTML बनाते समय अक्सर लगता है कि सिर्फ स्टाइलशीट लिंक कर देना काफी है। व्यवहार में, कई CSS पैकेज अपने नियमों को किसी कंटेनर क्लास के भीतर स्कोप करते हैं ताकि स्टाइल्स पूरे पेज में न फैलें। वही एक एट्रिब्यूट छूट जाए तो लेआउट 'बिल्कुल साफ' दिखता है, जो ऑटोमेशन और टेम्पलेटिंग के दौरान उलझन पैदा कर सकता है। स्टाइलशीट अपने नियमों को कैसे स्कोप करती है, यह समझने से समय बचता है और गलत पाथ या टूटी हुई HTML जैसे गैर-मुद्दों के पीछे भागने से बचते हैं।

मुख्य बातें

यदि स्टाइल्स लागू नहीं दिख रहे, तो CSS देखें कि कहीं वह .markdown-body जैसी किसी क्लास पर scoped तो नहीं है। फिर यह सुनिश्चित करें कि आपका रेंडर किया गया Markdown उसी क्लास वाले किसी तत्व के भीतर हो। रैपर सही होने पर Markdown लाइब्रेरी से निकला HTML अपेक्षित रूप से रेंडर होगा।

यह लेख StackOverflow के प्रश्न (लेखक: royer) और royer के उत्तर पर आधारित है।

markdown python