लंबी Markdown कोड पंक्ति को पूरा दिखाने के लिए, कोड को जस का तस रखें और उसके प्रदर्शन को समायोजित करें। यह गाइड Mac उपयोगकर्ताओं को कटे हुए उदाहरणों की समस्या पहचानने, Obsidian Reading view में टेक्स्ट रैपिंग चालू करने और GitHub पर क्या लागू होता है, यह समझने में मदद करती है।

कोड पंक्ति रैप होगी या नहीं, यह किससे तय होता है?

फेंस किए गए कोड ब्लॉक में कोड शाब्दिक सामग्री के रूप में सुरक्षित रहता है। CommonMark यह परिभाषित करता है कि फेंस कैसे खुलते और बंद होते हैं और सामग्री को कैसे पार्स किया जाता है; इसमें लंबी पंक्तियों को रैप करने का कोई पोर्टेबल स्विच नहीं है। इसका मौजूदा विनिर्देश संस्करण 0.31.2 है। CommonMark Spec, fenced code blocks.

GitHub Flavored Markdown भी फेंस किए गए ब्लॉक के लिए उन्हीं बुनियादी नियमों का पालन करता है। इसके विनिर्देश में भी फेंस की info string में रैपिंग का निर्देश देना अनिवार्य नहीं है। इसलिए भाषा के नाम के बाद wrap जोड़ने से पोर्टेबल रैपिंग व्यवहार सुनिश्चित नहीं होता। प्रकाशित GFM विनिर्देश स्वयं को संस्करण 0.29-gfm बताता है; इसके संस्करण नंबर को मौजूदा CommonMark संस्करण से भ्रमित नहीं करना चाहिए। GitHub Flavored Markdown Spec.

इस काम के लिए, इन तीन परिणामों में अंतर समझें:

परिणाम पाठक को क्या दिखता है क्या इसके लिए उदाहरण का स्रोत बदलना होगा?
दृश्य रैपिंग स्रोत की एक पंक्ति कई डिस्प्ले पंक्तियों में दिखती है नहीं
क्षैतिज स्क्रॉलिंग पंक्ति दिखने वाले क्षेत्र से आगे जाती है, लेकिन फिर भी उस तक पहुँचा जा सकता है नहीं
मैन्युअल लाइन ब्रेक उदाहरण में स्रोत की अतिरिक्त पंक्तियाँ होती हैं हाँ

अगर आप पूरी पंक्ति को पैन में दिखाना चाहते हैं, तो रैपिंग चुनें; अगर दृश्य संरेखण बनाए रखना ज़रूरी है, तो स्क्रॉलिंग चुनें। मैन्युअल ब्रेक के लिए अलग से यह जाँचना होगा कि उदाहरण का अर्थ वही रहे।

स्रोत और प्रस्तुति के बीच का अंतर CSS में स्पष्ट है: whitespace प्रोसेसिंग दस्तावेज़ के मूल डेटा को बदले बिना रेंडरिंग को प्रभावित करती है। इसलिए जब उदाहरण को एक ही पंक्ति के रूप में कॉपी करने योग्य रखना हो, तो दृश्य रैपिंग एक उपयोगी शुरुआत है। CSS Text Module Level 3.

पहले जाँचें कि उदाहरण गायब है या सिर्फ़ नज़र नहीं आ रहा

किसी लंबे कमांड या एक्सप्रेशन को संपादित करने से पहले, स्रोत देखें। Obsidian में editing-mode नियंत्रण से Source mode चुनें। Mac पर रेंडर किए गए आउटपुट से तुलना करने के लिए Cmd+E दबाकर editing और Reading view के बीच जाएँ। Obsidian इन views को Live Preview से अलग मानता है, जो एक editing mode है। Views and editing mode.

अलग नोट में यह कृत्रिम परीक्षण करें। अंदर का Markdown कॉपी करें, जिसमें शुरुआत और अंत वाली तीन बैकटिक की पंक्तियाँ भी शामिल हों। यह सामग्री जानबूझकर सादा पाठ है, चलाने के लिए कोई कमांड नहीं।

```text
BEGIN sample=amber notebook=desktop layout=wide description=This synthetic example contains a deliberately long line so you can check whether the final marker remains visible when the note pane becomes narrow END
```

नोट पैन को संकरा करें और END ढूँढ़ें। अगर यह अगली पंक्ति में दिखता है, तो रैपिंग काम कर रही है। अगर ब्लॉक के भीतर क्षैतिज रूप से जाने पर यह दिखता है, तो सामग्री स्क्रॉल करके उपलब्ध है। अगर फिर भी उस तक पहुँचना संभव न हो, तो यह निष्कर्ष निकालने से पहले कि पाठ मिट गया है, रेंडर किए गए ब्लॉक की स्रोत से तुलना करें।

यह परीक्षण उन दो समस्याओं को अलग करता है जिनके समाधान अलग हैं: स्रोत में सामग्री मौजूद न हो तो उदाहरण बहाल करना होगा, जबकि सामग्री मौजूद हो पर उस तक पहुँचना संभव न हो तो डिस्प्ले समायोजित करना होगा। सेटिंग आज़माते समय परीक्षण को अपरिवर्तित रखें, ताकि आप जान सकें कि सुधार आपके बदले हुए सेटिंग के कारण हुआ या नहीं।

फेंस भी जाँचें। बंद करने वाली फेंस में वही चिह्न होना चाहिए जो खोलने वाली फेंस में है, और उसमें कम से कम उतने ही फेंस चिह्न होने चाहिए। उदाहरण के भीतर मौजूद मेल खाती फेंस ब्लॉक को समय से पहले बंद कर सकती है। CommonMark Spec, fenced code blocks. Markdown सिंटैक्स सिखाते समय, चार बैकटिक वाली बाहरी फेंस अंदर के तीन बैकटिक वाले ब्लॉक को दिखा सकती है, जैसा ऊपर है। Creating and highlighting code blocks.

CSS जोड़ने से पहले Obsidian नोट को अधिक जगह दें

Settings → Editor खोलें और Readable line length ढूँढ़ें। Obsidian इस सेटिंग को अधिकतम पंक्ति-लंबाई सीमित करने के रूप में बताता है। इसे अस्थायी रूप से बंद करें, फिर उसी विंडो आकार में उसी परीक्षण नोट की तुलना करें। यह चौड़ाई का समायोजन है; दस्तावेज़ इसे कोड ब्लॉक की रैपिंग चालू करने वाला टॉगल नहीं बताता। Settings.

अगर अब पूरा उदाहरण फिट हो जाता है, तो आपके डेस्कटॉप लेआउट के लिए चौड़ाई का यह समायोजन पर्याप्त हो सकता है। इसे तय करने से पहले संकरे पैन में भी जाँचें: विंडो की एक व्यवस्था में अतिरिक्त जगह होने से यह पता नहीं चलता कि दूसरी व्यवस्था में पंक्ति पढ़ने योग्य रहेगी या नहीं।

कोड ओवरफ़्लो के समाधान के रूप में Strict line breaks न बदलें। Obsidian इसे Markdown लाइन ब्रेक के संदर्भ में बताता है, जबकि फेंस किए गए कोड को शाब्दिक सामग्री माना जाता है। यह किसी दूसरी फ़ॉर्मैटिंग समस्या को हल करता है। Settings, CommonMark Spec, fenced code blocks.

Obsidian Reading view में लंबी कोड पंक्तियाँ रैप करें

चुने हुए नोट्स के लिए, Obsidian के दस्तावेज़ीकृत CSS snippet तंत्र और इसकी cssclasses प्रॉपर्टी का उपयोग करें। नीचे दिया गया कोड उस तंत्र और मानक CSS व्यवहार पर आधारित एक मौलिक कस्टमाइज़ेशन है। यह Reading view में सामान्य रेंडर किए गए फेंस ब्लॉक के लिए है; यह Obsidian की ओर से दिया गया रैपिंग प्रीसेट या editor mode का कॉन्फ़िगरेशन नहीं है। CSS snippets.

Snippet बनाएँ और चालू करें

  1. Settings → Appearance → CSS snippets खोलें।
  2. Open snippets folder चुनें।
  3. सादे टेक्स्ट एडिटर में, उस फ़ोल्डर में wrap-code.css बनाएँ और नीचे दिया गया CSS सेव करें।
  4. CSS snippets पर लौटें, Reload snippets चुनें और wrap-code चालू करें।

ये Obsidian द्वारा दस्तावेज़ीकृत डेस्कटॉप इंस्टॉलेशन के चरण हैं। चालू होने के बाद, सेव किए गए snippet बदलाव आमतौर पर अपने आप लागू हो जाते हैं। CSS snippets.

.wrap-code pre,
.wrap-code pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

परीक्षण नोट की शुरुआत में यह property block जोड़ें। अगर उसमें पहले से properties हैं, तो दूसरा property block डालने के बजाय उसके मौजूदा cssclasses मानों में wrap-code जोड़ें।

---
cssclasses:
  - wrap-code
---

Obsidian cssclasses को चुने हुए नोट्स पर कस्टम CSS लागू करने का तरीका बताता है। यहाँ .wrap-code नियम को उन्हीं नोट्स तक सीमित करता है; बाकी selectors रेंडर किए गए preformatted blocks और उनमें मौजूद code सामग्री को लक्षित करते हैं। यह नियम editing surface को कॉन्फ़िगर नहीं करता। CSS snippets.

समझें कि CSS क्या बदलता है

white-space: pre-wrap घोषणा whitespace और स्रोत के लाइन ब्रेक सुरक्षित रखते हुए दृश्य रैपिंग की अनुमति देती है। overflow-wrap: anywhere घोषणा ज़रूरत पड़ने पर ऐसे स्ट्रिंग को भी रैप करने देती है जिसे तोड़ना संभव न हो, और हाइफ़न नहीं जोड़ती। दोनों मिलकर spaces वाली लंबी पंक्तियों और बिना रुके चलने वाले लंबे टोकन, दोनों को संभालती हैं। CSS Text Module Level 3, overflow-wrap CSS property.

white-space: normal का विकल्प न चुनें: यह मान whitespace को समेट देता है, जिससे वह दृश्य indentation बदल सकती है जिसे आप सुरक्षित रखना चाहते हैं। साथ ही, overflow-wrap अकेले ऐसी whitespace नियमावली को नहीं बदल सकता जो रैपिंग की अनुमति न देती हो। white-space CSS property, CSS Text Module Level 3.

Reading view पर लौटें, पैन को संकरा करें और END को फिर से जाँचें। फिर परीक्षण सामग्री को सादे टेक्स्ट एडिटर में कॉपी करके मूल से तुलना करें। अपेक्षित परिणाम यह है कि डिस्प्ले की कई पंक्तियों में स्रोत की वही एक पंक्ति दिखाई दे। यह कॉपी जाँच आपके इंस्टॉल किए हुए रेंडरर और थीम के वास्तविक व्यवहार की पुष्टि करती है।

रेंडरर के अंतर स्पष्ट रखें

Obsidian का appearance customization फेंस किए गए ब्लॉक के पोर्टेबल Markdown सिंटैक्स का हिस्सा नहीं बनता। उदाहरण को कहीं और ले जाते समय, गंतव्य पर उसे अलग से जाँचें। क्या जाँचना है, यह तय करने के लिए इस तुलना का उपयोग करें:

गंतव्य किस पर भरोसा करें अलग से क्या जाँचें
CommonMark कार्यान्वयन दस्तावेज़ीकृत fenced-block पार्सिंग रैपिंग, स्क्रॉलिंग और उपलब्ध डिस्प्ले चौड़ाई
GitHub पर रेंडर किया गया Markdown GitHub की दस्तावेज़ीकृत फेंस और भाषा पहचानकर्ता उस वास्तविक गंतव्य में कोड ब्लॉक का प्रदर्शन
Obsidian Reading view रेंडर किया गया नोट और चालू की गई स्थानीय स्टाइलिंग क्या snippet मौजूदा थीम के साथ काम करता है
Obsidian Live Preview या Source mode चुना हुआ editing mode editor में प्रस्तुति; ऊपर का snippet इसे कॉन्फ़िगर नहीं करता

सिंटैक्स की सीमाएँ CommonMark specification, GitHub के code-block दस्तावेज़ और Obsidian के view दस्तावेज़ से तय होती हैं।

GitHub बताता है कि शुरुआती फेंस के बाद भाषा पहचानकर्ता देने से सिंटैक्स हाइलाइटिंग चालू होती है। इसलिए text को किसी दूसरे भाषा पहचानकर्ता से बदलना रैपिंग माँगने का दस्तावेज़ीकृत तरीका नहीं है। उदाहरण के लिए सही पहचानकर्ता रखें और डिस्प्ले व्यवहार को उस रेंडरर में संभालें जो उसका नियंत्रण करता है। Creating and highlighting code blocks.

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

ज़रूरी सामग्री हटाए बिना समस्या का समाधान करें

अगर Obsidian का नियम कुछ करता हुआ न लगे, तो यह क्रम अपनाएँ:

  1. पक्का करें कि आप Reading view में जाँच कर रहे हैं।
  2. पक्का करें कि wrap-code.css CSS snippets में दिखता है और चालू है।
  3. पक्का करें कि नोट के cssclasses में ठीक wrap-code शामिल है।
  4. अपरिवर्तित परीक्षण नोट देखते हुए snippet को बंद करके फिर चालू करें।
  5. ज़रूरत हो तो स्टाइलिंग के टकराव का पता लगाने के लिए दूसरे snippets को अस्थायी रूप से बंद करें और Obsidian की डिफ़ॉल्ट थीम से तुलना करें।
  6. काम पूरा मानने से पहले वास्तविक उदाहरण पर भी परीक्षण दोहराएँ।

Selector नियम को अपने इंस्टॉलेशन में जाँचे जाने वाले कस्टमाइज़ेशन के रूप में देखें। कोई थीम या विशेष ब्लॉक रेंडरर अलग स्टाइलिंग या संरचना इस्तेमाल कर सकता है। अगर सादा fenced परीक्षण काम करता है, लेकिन वास्तविक ब्लॉक नहीं, तो यह अंतर उपयोगी संकेत है: बिना सोचे-समझे लाइन ब्रेक जोड़ने के बजाय वास्तविक ब्लॉक के रेंडरर की जाँच करें।

अंतिम जाँच में पुष्टि करें कि आखिरी अक्षर तक पहुँचा जा सकता है, indentation समझने योग्य बनी रहती है, कॉपी किया गया टेक्स्ट इच्छित स्रोत से मेल खाता है, और उदाहरण उस view में काम करता है जिसमें उसे पढ़ा जाएगा। पूरा स्रोत सुरक्षित रखें, सोच-समझकर रैपिंग या स्क्रॉलिंग चुनें और हर महत्वपूर्ण गंतव्य पर जाँच करें।

स्रोत