<Div> के साथ <pre> की नकल कैसे करें

Question

मैं एक वेबसाइट पर अजगर कोड प्रकाशित कर रहा हूं (जो कि सीएमएस है)। मेरे पास एक पाइथन स्क्रिप्ट है जो किसी भी पाइथन लिपि को पढ़ती है और उसमें से एक सिंटैक्स-रंग का HTML बनाती है। फिर मैं इस HTML को CMS संपादन विंडो में कॉपी / पेस्ट करता हूं।

समस्या यह है कि मेरी अजगर वाक्य रचना हाइलाइटिंग स्क्रिप्ट <pre>टैब / स्पेस रखने के लिए टैग का उपयोग करती है जो कि अजगर में काफी महत्वपूर्ण हैं। CMS, हालांकि, कुछ अस्पष्ट कारणों के लिए, <pre>टैग हटाता है । व्यवस्थापक ने मुझे बताया कि मुझे <div>इसके बजाय उपयोग करना चाहिए <pre>। तुम <div>wihte- अंतरिक्ष स्वरूपण रखने के लिए एक स्टाइल में मेरी मदद कर सकता है ?

Comments

पूछे गए विशिष्ट प्रश्न के लिए जॉन का जवाब ठीक है, हालांकि यह आपकी सामग्री के शब्दार्थ को थोड़ा कम करता है। पूर्व टैग को अलग करने वाले सीएमएस के संबंध में, कुछ अनुप्रयोगों में एक सेटिंग होती है जो निर्दिष्ट करती है कि HTML सामग्री में क्या अनुमति है। यदि आप बहुत से पूर्व-स्वरूपित पाठ पोस्ट करते हैं, तो हो सकता है कि वह आपके व्यवस्थापक से समायोजन करने के लिए कहने लायक हो, यदि वह आपके आवेदन के लिए मौजूद है, बजाय इसके कि आप (स्पष्ट रूप से) मनमाने तरीके से काम करने के लिए कहें।

— सु '

Answer 1

आप ऐसा सीएसएस white-spaceनियम से कर सकते हैं :

div
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

उस नियम में शामिल फोंट प्रत्येक चरित्र को एक ही चौड़ाई बनाते हैं जो एक <pre>टैग में पाठ के लिए सामान्य स्वरूपण है ।

ध्यान रखें कि इससे आपके सभी <div>टैग इस तरह से व्यवहार करेंगे। आदर्श रूप से आप उन <div>टैगों को एक वर्ग आवंटित करेंगे जो केवल उन लोगों को प्रभावित करेंगे जिन्हें आप नकल करना चाहते हैं <pre>। कुछ इस तरह:

div.code
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

या, बेहतर अभी तक, <code>टैग का उपयोग करें यदि यह आपके सीएमएस द्वारा छीन नहीं किया गया है। यह <pre>टैग की तरह कार्य करता है लेकिन कोड प्रदर्शित करने के लिए शब्दार्थ रूप से सही है।

Comments

उल्लेख <code>और शब्दार्थ के लिए +1 । ध्यान दें कि <code>व्हाट्सएप को डिफ़ॉल्ट रूप से लपेटता है, इसलिए आपको white-space:nowrapइसे भी असाइन करना होगा । <pre>एक ब्लॉक तत्व भी है जहां <code>इनलाइन है; इसलिए नकल करने के लिए <pre>, display:blockदिया जाना चाहिए।

— जरी कीनेलेन जुले

Omit "Courier New", डिफ़ॉल्ट फ़ॉन्ट आपके ब्राउज़र के प्री को अधिक बारीकी से मिलाता है।

— access_granted

Answer 2

एक DIVतरह एक प्रारूप करने के लिए PRE, आप के white-space: pre;लिए एक की जरूरत है DIV। इसके अतिरिक्त आपको पहले उत्तर में बताए अनुसार एक मोनोस्पेस फ़ॉन्ट का उपयोग करना चाहिए।

समाधान white-space: nowrap;सही नहीं है क्योंकि यह टैब प्रदर्शित नहीं करता है और अभी भी कई रिक्त स्थान (@ जॉन कॉनडे) को ध्वस्त करेगा।

• nowrap: नॉच को निर्दिष्ट करने से यह सुनिश्चित होता है कि व्हॉट्सएप के सीक्वेंस एक सिंगल स्पेस कैरेक्टर में ढल जाएंगे, लेकिन लाइन ब्रेक को दबा दिया जाएगा।
• pre: पूर्व को निर्दिष्ट करना सुनिश्चित करता है कि व्हॉट्सएप के अनुक्रम ध्वस्त नहीं होंगे। मार्कअप में नई लाइनें केवल लाइनों में टूटी हुई हैं (या उत्पन्न सामग्री में "\" की घटनाओं पर)।

से: http://reference.sitepoint.com/css/white-space

Comments

आप white-spaceहोना चाहिए preऔर नहीं के मूल्य के बारे में सही हैं nowrap। मैंने अपना उत्तर ठीक कर लिया है।

— जॉन कोंडे