"हैबे" पर कोड का सही रंग कैसे बनाया जाए और यह इतना मुश्किल क्यों है

कुछ महीने पहले मैंने अपनी पहली पोस्ट हैबे पर प्रकाशित की थी। शायद आप में से कुछ इस बात पर ध्यान देंगे कि लेख में कोड एक असामान्य तरीके से चित्रित किया गया है, और सबसे महत्वपूर्ण बात - सही ढंग से रंगीन, इस तथ्य के बावजूद कि साइट पर अंतर्निहित पाठ संपादक कोड के मूल मार्कअप का समर्थन नहीं करता है और अक्सर इसके तत्वों को गलत तरीके से उजागर करता है। उसी समय, चित्र द्वारा कोड नहीं डाला गया है, जैसा कि कुछ पूरी तरह से हताश लेखक करते हैं।

मेरे मामले में, मार्कअप को संरक्षित करना विशेष रूप से महत्वपूर्ण था, क्योंकि लेख में कोड पर काम करने के तरीके का वर्णन था। समस्या को हल करने के लिए, मैंने एक उपकरण बनाया, जो आपको आईडीईए से चयनित स्कीम में हाइब्रिड पर एक लेख में कोड हाइलाइटिंग को स्थानांतरित करने की अनुमति देता है। मैं एक उपकरण बनाने की प्रक्रिया और इसके उपयोग की विशेषताओं के बारे में बात करूंगा।

यह सब क्यों

पहली नज़र में, ऐसा लग सकता है कि यह शरारत से किया गया है, सिर्फ इसलिए कि <source> टैग के माध्यम से लागू मानक रोशनी के अनुरूप नहीं है।

एक तरह से, यह, बिल्कुल, सच है, लेकिन काफी नहीं है।

सबसे पहले, <source> अंदर हाइलाइटिंग कोड के टुकड़ों के साथ काम नहीं कर सकता, क्योंकि रंग के लिए पर्याप्त जानकारी नहीं होगी। टुकड़े के दायरे से बाहर घोषित सभी तत्वों को यादृच्छिक पर चित्रित किया जाएगा। इस समस्या का कोई हल नहीं है, क्योंकि, जहाँ तक मुझे पता है, ऑनलाइन रंगाई के लिए कोई भी सेवा आपको निम्न में से एक करने की अनुमति नहीं देती है:

1. पूर्ण रूप से प्रदर्शित किए बिना लेख में पूर्ण प्रोजेक्ट कोड पेस्ट करें, या GitHub पर प्रतिबद्ध के लिए लिंक पेस्ट करें। लेख में विशिष्ट स्थानों में, पूर्ण कोड (एक सीमा के साथ) से लाइनों की कतरनों का उपयोग करें। इस मामले में, बैकलाइट को निश्चित रूप से पूर्ण कोड के आधार पर निर्धारित किया जाना चाहिए।
2. अपरिभाषित तत्वों के लिए स्पष्ट मेटा जानकारी इंगित करें। उपयोगकर्ता के लिए काफी कठिन तरीका है, लेकिन मैं इस तरह की बात से सहमत होता हूं।

दूसरे, <source> अंदर हाइलाइटिंग कभी भी एक नियमित आईडीई के साथ विभिन्न प्रकार के तत्वों की संख्या के बराबर नहीं होती है। और ऊपर वर्णित समस्या के कारण, उन्नत रंग बनाने का कोई मतलब नहीं है: कोई भी लेख में पूर्ण परियोजना कोड नहीं डालता है, इसलिए यह कार्यक्षमता काम नहीं करेगी।

इसी समय, वास्तविकता यह है कि कोड के टुकड़ों को लेखों में डाला जाना चाहिए, और वे जितने छोटे होंगे, उतना ही बेहतर होगा।

आप हाइलाइट किए बिना कोड पढ़ सकते हैं, लेकिन क्यों।

हब्र की विशेषताएं

IntelliJ IDEA ने HTML को कोड निर्यात करने के लिए अंतर्निहित समर्थन दिया है। कोड की नियमित प्रतिलिपि क्लिपबोर्ड पर डालती है, जिसमें रंगीन कोड भी शामिल है, जिसे HTML के रूप में पढ़ा जा सकता है।

दुर्भाग्य से, Habr सीधे लेखों में HTML मार्कअप के उपयोग की अनुमति नहीं देता है। इसके कारण अंधेरे में ढके एक रहस्य हैं, लेकिन शायद यह लेखों की उपस्थिति के एकीकरण के कारण है। यदि आप लेखों में HTML के उपयोग की अनुमति देते हैं, तो इसे इस तरह से पकड़ना संभव होगा कि देखने में समस्या होगी।

मैं आमतौर पर लेखों में HTML पर प्रतिबंध लगाने के विचार का समर्थन करता हूं, लेकिन एक चेतावनी है। आईटी लोगों के लिए एक संसाधन, जहां अक्सर कोड पर चर्चा की जाती है और लेख में इसे सही ढंग से सम्मिलित करने का कोई तरीका नहीं है, किसी तरह अजीब है।

इसलिए, हमारे पास हमारे निपटान टैग <b> , <i> , <font> । इसके अलावा, यह सब <code> अंदर काम करता है, जिसे स्वरूपण के लिए आवश्यक है। खैर,   ; उन्होंने हमें बचाया, जो कोड और इंडेंटेशन की लंबी लाइनों के लिए उपयोगी है।

कहने की जरूरत नहीं है, आईडीईए से HTML कोड प्राप्त करने के सभी मानक तरीके ऐसे HTML को बिल्कुल भी नहीं देते हैं, इसलिए रूपांतरण कार्य बड़ा होने वाला है।

दृष्टिकोण

इसके साथ शुरू करने के लिए, इस विषय पर लेखक को उसकी सामग्री के लिए धन्यवाद कहने के लायक है। मैंने सीधे लेख में प्रस्तावित टूल का उपयोग नहीं किया था, और यह शायद ही कभी हुआ होगा, लेकिन इस सामग्री के लिए धन्यवाद मैंने समस्या की पूरी गहराई को समझा और उसी समय आशा की हवा महसूस की।

इस प्रकाशन का एकमात्र माइनस एक बड़ी मात्रा में कोड की एक बहुत ही अल्प व्याख्या के साथ संयुक्त है कि यह क्या और क्यों करता है।

मैं स्थिति को ठीक करने की कोशिश करूँगा और वर्णन करूँगा कि आपको अपने HTML मार्कअप के साथ क्या करना है यदि आप इसे एक ऐसे रूप में लाना चाहते हैं जो हैबर में प्रविष्टि के लिए तैयार है।

1. निर्यात करने से पहले, आपको आईडीईए में वांछित रंग योजना निर्धारित करने की आवश्यकता है, उदाहरण के लिए, कलर थीम्स वेबसाइट से । कोड को चयनित योजना के साथ निर्यात किया जाएगा। एक सफेद पृष्ठभूमि के साथ एक योजना चुनना बेहतर है (चूंकि पृष्ठभूमि को हब्रे पर सेट नहीं किया जा सकता है) और बिना रेखांकित किया गया है। मुझे नहीं लगा कि उन्हें खींचना कितना आसान है, क्योंकि मैं वास्तव में नहीं चाहता।
2. हम केवल <pre> के इंटर्न के साथ काम करते हैं। भले ही आप IDEA से निर्यात का उपयोग नहीं कर रहे हैं, लेकिन कुछ अन्य, शायद HTML मार्कअप में यह टैग होगा, क्योंकि इसके बिना कोड को सही ढंग से प्रारूपित करना मुश्किल है। टैग स्वयं हटा दिया जाता है, इसे <code> बदल दिया जाता है।
3. पाठ को संभवतः विभिन्न शैलियों के साथ एक <span> रूप में प्रस्तुत किया जाएगा। इन सब से छुटकारा पाना है। कई रंग सेवाएं स्टाइल शीट में शैली लाती हैं, जो तार्किक है, और स्टाइल नामों के लिंक का उपयोग करते हैं। विशेष रूप से, IDEA अभी तक ऐसा नहीं करता है, जो कार्य को थोड़ा आसान बनाता है (शैली सेटिंग सीधे <span> में झूठ बोलते हैं)।
4. <font> माध्यम से फ़ॉन्ट रंग सेट करें। दुर्भाग्य से, पृष्ठभूमि का रंग सेट नहीं किया जा सकता है।
5. हम font-style:italic संपत्ति को <i> </i> टैग, और font-weight:bold में <b> </b> जोड़ी में बदल देते हैं।
6. सभी स्थानों को   बदलें ; ।
7. <br> के रूप में पंक्ति विराम को \n बदल दिया जाता है।
8. IDEA में HTML मार्कअप शैलियों के साथ रिक्त स्थान से शैलियों और रिक्त स्थान के साथ रिक्त लाइनें पैदा करता है। ऐसी शैलियों को बाहर फेंकना बेहतर है: इससे लंबाई कम हो जाएगी और कोड की समझ में वृद्धि होगी।
9. सुनिश्चित करें कि लाइन फीड की कोई शैली नहीं है। अन्यथा, खाली लाइनों के साथ समस्याएं होंगी।

पिछले पैराग्राफ को एक उदाहरण द्वारा चित्रित किया गया है:

<code>
1 <font color="000000">
</font> 2
</code>

दिए गए कोड को "Habr" द्वारा 12 में बदल दिया जाएगा। यही टैग <b> और <i> पर भी लागू होता है, साथ ही इसके किसी भी संयोजन पर। लाइन ब्रेक की एक शैली नहीं होनी चाहिए, और फिर सबकुछ ठीक हो जाएगा।

कार्यान्वयन

सबसे पहले, मनमाने ढंग से HTML कोड के लिए एक कनवर्टर लिखने का कार्य मुझे जटिल लगता था। हालांकि, यदि आप HTML के एक विशिष्ट संस्करण के लिए निर्णय लेते हैं, तो सब कुछ इतना बुरा नहीं है। मैं शुद्ध RegExp पर सब कुछ करने में कामयाब रहा, वह भी HTML पार्सिंग के बिना। मुख्य समस्या "हबर" मार्कअप की सुविधाओं की पहचान करने के लिए निकली।

ताकि लाइन फीड्स में शैलियाँ न हों, मुझे मुश्किल से प्रतिस्थापन करना पड़ा, जो कि शायद सबसे अधिक समझ में नहीं आता (पॉपअपबीआर फ़ंक्शन देखें)। विचार यह है कि टैग्स प्रत्येक प्रतिस्थापन के बाद "पॉप अप" स्वरूपण टैग की गहराई से बाहर की ओर। इस प्रकार, सभी प्रतिस्थापन के बाद, टैग <br> स्वरूपण से बाहर है।

इसके अलावा, यह पता चला कि IDEA क्लिपबोर्ड पर न केवल रिच टेक्स्ट डालता है, बल्कि application/x-java-jvm-local-objectref जैसी मुश्किल वस्तुओं को भी application/x-java-jvm-local-objectref । परेशानी यह है कि क्लिपबोर्ड पर इस तरह की वस्तुओं की उपस्थिति से डेटा कंसोल के निर्माण के विषय पर मेरे कंसोल में लगातार त्रुटियां होती हैं। दुर्भाग्य से, ऐसा कुछ भी नहीं है जो आप कर सकते हैं: JDK सिर्फ क्लिपबोर्ड के साथ काम करता है। मेरे लिए, इस तरह के कोड की खोज एक खोज थी। जाहिर है, यह लिखने वाले स्मार्ट चाचाओं का मानना ​​है कि यह करेगा। सामान्य तौर पर, उपकरण के साथ काम करते समय होने वाली त्रुटियों से डरो मत।

परियोजना कोटलिन में लिखी गई है और गीथहब पर रहती है ।

सुधार के सुझावों का स्वागत है! उदाहरण के लिए, इस उपकरण को आईडीईए के लिए एक प्लगइन के रूप में डिजाइन करना अच्छा होगा। मुझे अभी तक ऐसा करने का एक सरल तरीका नहीं मिला है: HTML प्लगइन के रूप में कॉपी के स्रोत, दुर्भाग्य से, बंद हैं, और यह पता लगाने में बहुत समय लगता है कि खरोंच से ऐसे प्लगइन को कैसे लिखना है।