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