बिना लाइन नंबरिंग के सोर्स कोड कॉपी करें

ऐसा होता है कि जब आप जानकारी का उत्पादन करते हैं, तो आपको इसे बेहतर धारणा के लिए सजाने की आवश्यकता होती है, अक्सर डिजाइन एक पाठ के साथ-साथ होता है। इस जानकारी का चयन और कॉपी करते समय, डिज़ाइन को कॉपी करने की आवश्यकता नहीं है, क्योंकि केवल जानकारी की आवश्यकता है, और अधिमानतः इसके मूल रूप में। यही है, नकल करते समय, चयनित पाठ का हिस्सा क्लिपबोर्ड पर नहीं जाना चाहिए।
मेरे मामले में, यह स्रोत कोड है, जो लाइन नंबरिंग के साथ है, इसलिए यह अधिक स्पष्ट है और कोड की एक पंक्ति को संदर्भित करने की क्षमता है। हालाँकि, यदि हम कोड का हिस्सा कॉपी करना चाहते हैं, तो उसे बिना लाइन नंबर के कॉपी करना होगा।
कई हाइलाइटर्स यह पाप करते हैं, जब कोड की नकल करते हैं, तो लाइन नंबरों को भी कॉपी करते हैं। स्थिति से बाहर का तरीका अलग है: या तो वे एक चालाक लेआउट का उपयोग करते हैं, जिसमें नंबरिंग लाइनों के साथ मेल नहीं खाती है (आप उदाहरण के लिए इसे जीथब पर देख सकते हैं), या वे एक विशेष बटन का उपयोग करते हैं जो एक अलग विंडो में प्रारूपण के बिना कोड प्रदर्शित करता है। ये दृष्टिकोण मेरे लिए असंतोषजनक थे, इसलिए मैंने एक और समाधान खोजने का फैसला किया।
इस लेख में, मैं उस समाधान का वर्णन करूंगा जो मैं अंत में आया था। बेशक, समाधान निजी है, लेकिन यह किसी की समस्याओं को सुलझाने में उपयोगी हो सकता है।

शुरू करने के लिए, हम संक्षेप में संभव समाधानों के माध्यम से जाएंगे।

पहली विधि स्पष्ट है।

सबसे सरल और सबसे स्पष्ट तरीका एक क्रमांकित सूची बनाना है, जहां सूची का प्रत्येक तत्व एक अलग पंक्ति है। इस दृष्टिकोण का मुख्य प्लस: सब कुछ सरल है और आपको नंबरिंग के बारे में सोचने की भी आवश्यकता नहीं है। लेकिन एक ही समय में, आप नंबरिंग प्रारूप को नियंत्रित नहीं कर सकते, आप एक मार्कर (लाइन नंबर) को नहीं रख सकते हैं और आम तौर पर इसे किसी भी तरह से सजा सकते हैं। इसके अलावा, इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स मार्कर के साथ पाठ को कॉपी करते हैं।
नकल के साथ वास्तविक समस्या इस दृष्टिकोण का उपयोग करने की संभावना को पार करती है।

दूसरी विधि, कम स्पष्ट।

दूसरी बात जो मन में आती है वह उत्पन्न सामग्री का उपयोग करना है। तुम भी इस तथ्य के साथ रख सकते हैं कि पुराने IE में यह काम नहीं करेगा (इस मामले में, आप, निश्चित रूप से, कमबैक कर सकते हैं)। लेकिन परेशानी यह है कि इंटरनेट एक्सप्लोरर और ओपेरा उत्पन्न सामग्री सहित सभी दृश्यमान पाठ की प्रतिलिपि बनाते हैं।
यह कहना मुश्किल है कि इंटरनेट एक्सप्लोरर / ओपेरा के डेवलपर्स सही हैं या वेबकिट और फ़ायरफ़ॉक्स के डेवलपर्स उत्पन्न सामग्री की नकल करने के बारे में सही हैं। एक बात सुनिश्चित करने के लिए है, विधि उपयुक्त नहीं है।

छोटी टिप्पणी

वेबकिट और फ़ायरफ़ॉक्स एक सीएसएस संपत्ति का समर्थन करते हैं जैसे उपयोगकर्ता-चयन (इसके उपसर्गों -webkit-user-select और -moz-user-select) के साथ, जिसका उपयोग पाठ को चयनित होने से रोकने के लिए किया जा सकता है। Internet Explorer में एक अचयनित html विशेषता है। हालांकि, यह सब केवल चयन प्रक्रिया की शुरुआत को रोकता है, अर्थात, यदि पाठ अभी भी चयन क्षेत्र में आता है, तो इसे कॉपी किया जाएगा।
इसके अलावा, सभी ब्लॉक जो चयन क्षेत्र में गिर गए, यहां तक ​​कि अदृश्य (प्रदर्शन: कोई नहीं; या दृश्यता: छिपा हुआ) भी क्लिपबोर्ड में समाप्त हो गया।
यह सब बहुत दुखद है, क्योंकि यह निर्धारित करने के लिए कोई सामान्य तरीका नहीं है कि कौन सा पाठ कॉपी करें और कौन सा नहीं।

तीसरा तरीका, असामान्य।

एक समाधान की तलाश में इंटरनेट पर घूमते हुए, सजावटी पाठ को प्रदर्शित करने के लिए <इनपुट> का उपयोग करके कुछ सुझाया गया। हां, हां, टेक्स्ट आउटपुट के लिए एक इनपुट फील्ड। हम आवश्यक टेक्स्ट को वैल्यू वैल्यू में लिखते हैं, पैडिंग, मार्जिन, बॉर्डर, बैकग्राउंड को हटाते हैं, बाकी स्टाइल सेट करते हैं - और कोई भी यह नहीं कहेगा कि यह इनपुट है। हमारे पाठ का चयन करें, कॉपी करें, इसे एक नोटबुक में पेस्ट करें - सभी ब्राउज़र एक ही तरह से व्यवहार करते हैं, <इनपुट> सामग्री वाले टैग नहीं डाले जाते हैं।
यह एक अप्रिय क्षण को दूर करने के लिए रहता है, इनपुट फ़ील्ड फोकस प्राप्त कर सकती है, और आप नंबरिंग के साथ पाठ का चयन शुरू नहीं कर सकते - फ़ील्ड का पाठ हाइलाइट किया गया है। लेकिन यह वास्तव में, trifles है।
वेबकिट और फ़ायरफ़ॉक्स में माउस के साथ फ़ोकस को क्षेत्र में स्थानांतरित करना असंभव था - यह सीएसएस संपत्ति सूचक-घटना है, जिसे किसी को भी सेट नहीं किया जा सकता है। इंटरनेट एक्सप्लोरर के लिए, आप फ़ील्ड के लिए "विशेषता" पर अचयनित = "जोड़ सकते हैं। ओपेरा के साथ अभी तक कोई रास्ता नहीं है।
कीबोर्ड (और अन्य तरीकों से) पर ध्यान केंद्रित करने से रोकने के लिए, आसानी से और टैबइंडेक्स = "- 1" के लिए <इनपुट> विशेषता जोड़ें।
फ़ायरफ़ॉक्स और वेबकिट में, सब कुछ ठीक है, लेकिन इंटरनेट एक्सप्लोरर में आप नंबरिंग क्षेत्र से शुरू होने वाले चयन को चालू नहीं कर सकते हैं, और ओपेरा में, फ़ील्ड का पाठ, और स्रोत कोड नहीं, अभी भी हाइलाइट किया गया है। समस्या को हल करने के लिए, प्रत्येक <इनपुट> एक अतिरिक्त ब्लॉक के लिए जोड़ें जो <इनपुट> को ओवरलैप करेगा। इस ब्लॉक में <इनपुट> के समान आयाम होना चाहिए, और पारदर्शी भी होना चाहिए। दुर्भाग्य से (या सौभाग्य से), यदि ब्लॉक की पृष्ठभूमि नहीं है, तो यह "शूट" करता है, अर्थात, यह ऐसा व्यवहार करता है जैसे कि यह मौजूद नहीं है, इसलिए इसे पृष्ठभूमि को जोड़ना होगा। आप या तो एक पारदर्शी gif फ़ाइल जोड़ सकते हैं या सिर्फ एक noxistent फ़ाइल के लिए पथ, उदाहरण के लिए पृष्ठभूमि: url (#); (एक rgba () का उपयोग कर सकता है, लेकिन IE में यह केवल संस्करण 9 से शुरू होने का समर्थन है)।

वह मूल रूप से यह है।

परिणामस्वरूप, हमारे पास स्रोत कोड के साथ ब्लॉक के लिए निम्नलिखित HTML है (स्पष्टता के लिए लाइन फ़ीड, लक्ष्य HTML उनके बिना होना चाहिए, अन्यथा हम नकल करते समय अनावश्यक लाइन फ़ीड प्राप्त कर सकते हैं):

<div class="code"> <div class="line"> <span class="lineContent"> <input class="lineNumber" value="01" unselectable="on" readonly tabindex="-1" /> <span class="over"></span> ..  .. </span> </div> <div class="line"> ... </div> ... </div> 

और इस कुरूपता के लिए सीएसएस:

  .code { border: 1px solid #E0E0E0; padding: 1px; margin: 0 1ex; overflow: hidden; font-family: Consolas, monospace; font-size: 100%; color: black; line-height: 1.4em; white-space: pre; /*     */ } .line { position: relative; /*  webkit,              */ zoom: 1; /*  IE6/7 */ white-space: pre; /*      IE7 */ } .even { background: #F8F8F8; } .odd { background: #F0F0F0; } .lineNumber { display: block; position: absolute; left: 0; padding: 0 .5ex; margin: 0; width: 6ex; line-height: 1.4em; height: 1.4em; background: none; border: none; font-family: Consolas, monospace; font-size: 100%; text-align: right; color: #666; -moz-user-select: none; /*  user-select  Firefox & webkit,       */ -webkit-user-select: none; user-select: none; pointer-events: none; /*       .over,       Firefox & webkit */ } .over { display: block; position: absolute; left: 0; width: 7ex; height: 1.4em; z-index: 1; background: url(.); /*  IE  Opera,    "" (    ) */ } .lineContent { margin-left: 7ex; padding-left: 2ex; border-left: 2px solid #33BB66; display: block; white-space: pre-wrap; /*  ,       */ } .token-string { color: blue; } .token-comment { color: #008200; } .token-keyword { color: #006699; font-weight: bold; } 

डेमो

Atomjs स्रोत कोड उदाहरण का उपयोग कर डेमो (मुझे आशा है कि TheShock बुरा नहीं मानता ;)
HTML कोड बहुत है, लेकिन यह जावास्क्रिप्ट (अपने स्वयं के हाइलाइटर) द्वारा उत्पन्न होता है।
क्रोम / सफारी, फ़ायरफ़ॉक्स 3.6, ओपेरा 11, IE7-9 (IE9 RC में स्विचिंग मोड) के तहत परीक्षण किया गया।

आपको किस चीज पर ध्यान देना चाहिए

• समाधान ब्राउज़र के लिए विशेष हैक के बिना केवल HTML और सीएसएस की क्षमताओं का उपयोग करता है।
• बाकियों से आगे वेबकिट, इसके इंजन पर ब्राउज़रों में सबसे अच्छा काम करता है, आप सही परिदृश्य कह सकते हैं।
• फ़ायरफ़ॉक्स के लिए, लाइनों की शुरुआत में रिक्त स्थान को & nbsp से बदला जाना चाहिए; अन्यथा वे नकल करते समय कट जाएंगे।
• ओपेरा में, पाठ केवल हाइलाइट करना शुरू करता है यदि माउस कर्सर सीधे पाठ के ऊपर है। आप नंबरिंग के साथ चयन शुरू कर सकते हैं, लेकिन वास्तव में पाठ का चयन केवल तभी होगा जब कर्सर पाठ के ऊपर हो।
• सफेद-अंतरिक्ष संपत्ति का घोंसला बनाना महत्वपूर्ण है। इस स्थिति में, प्रमुख ब्लॉक .code -> - .line -> .Content है, इसलिए प्री -> प्री -> प्री-रैप चेन और संभवतः, अन्य विकल्प (आपको जांचने की आवश्यकता है) काम करेंगे। यह दिए गए मूल्यों पर निर्भर करता है कि पाठ में कनवर्ट करते समय ब्राउज़र ब्लॉकों की व्याख्या कैसे करेगा; कुछ निश्चित मानों पर, ब्राउज़र पाठ की एक अलग पंक्ति में किसी भी ब्लॉक एलिमेंट (डिस्प्ले: ब्लॉक) का चयन कर सकता है, जिसके परिणामस्वरूप पाठ की पंक्तियों के बीच खाली लाइनें हो सकती हैं या हाइफ़न को अनदेखा कर सकती हैं (उदाहरण के लिए, IE7 सभी पाठ को एक पंक्ति में कॉपी कर सकती हैं)।
• जब एक संपादक में चिपकाया जाता है जो पाठ / html को समझता है (उदाहरण के लिए, एमएस वर्ड), <इनपुट> फ़ील्ड भी डाले जाते हैं। पल अप्रिय है, लेकिन अधिक बार संपादक पाठ / html को नहीं समझते हैं, इसलिए आपको चिंता नहीं करनी चाहिए।

मुझे सुधार के लिए टिप्पणियों और सुझावों पर खुशी होगी।

अद्यतन
वर्कआर्ड मिला, ताकि वर्ड / एक्सेल में पेस्ट करने पर इनपुट फील्ड्स न डालें। इसे प्राप्त करने के लिए, <input> के लिए आपको टाइप विशेषता का कोई भी मान सेट करने की आवश्यकता नहीं है। इस स्थिति में, ब्राउज़र विशेषता को अनदेखा करते हैं और फ़ील्ड में एक डिफ़ॉल्ट प्रकार होता है, वह है, टाइप करें = "टेक्स्ट", और जब कॉपी (या पेस्ट करना) स्क्रिप्ट का वर्णन नहीं है कि अज्ञात प्रकार के फ़ील्ड से कैसे निपटें - परिणामस्वरूप, फ़ील्ड को अनदेखा कर दिया जाता है। इसलिए कोड को सुरक्षित रूप से डाला जा सकता है, उदाहरण के लिए, वर्ड में। इसके अलावा, अगर कोड को क्रोम / सफारी या IE से कॉपी किया जाता है, तो इसे कलरिंग के साथ चिपकाया जाएगा (वेबकिट बैकग्राउंड को कॉपी करता है, और बैकग्राउंड के बिना IE कॉपी करता है), जो कुछ मामलों में उपयोगी हो सकता है।