सिंटेक्स हाइलाइटिंग के साथ एलिमेंटर कोड ब्लॉक विजेट (प्रो)
स्रोत कोड एक एलिमेंटर पेज पर कोड स्निपेट दिखाने के लिए एक मास्टर एडॉन्स प्रो विजेट है कोड चिपकाएं, ७५ भाषाओं में से एक और आठ प्रिज्म।जेएस थीम में से एक चुनें, और ब्लॉक सिंटैक्स रंगों, वैकल्पिक लाइन नंबरों और क्लिपबोर्ड बटन की प्रतिलिपि के साथ प्रस्तुत करता है आगंतुक कोड को पढ़ और कॉपी कर सकते हैं लेकिन इसे संपादित नहीं कर सकते यह ट्यूटोरियल, दस्तावेज़ीकरण, चेंजलॉग और डेवलपर पोर्टफोलियो फिट बैठता है।
एलिमेंटर में कोड ब्लॉक कैसे जोड़ें
स्रोत कोड को एलिमेंटर और एक सक्रिय की आवश्यकता है मास्टर एडॉन्स प्रो लाइसेंस।
- मास्टर एडॉन्स प्रो को सक्रिय करें, पेज को एलिमेंटर से संपादित करें और विजेट पैनल खोजें स्रोत कोड.
- इसे खींचें जहां स्निपेट है।
- में भाषा उठाओ कोड और ए थीम.
- स्निपेट को इसमें चिपकाएँ स्रोत कोड बॉक्स।
- कॉपी बटन और लाइन नंबर चालू करें, और बटन टेक्स्ट, दृश्यता और स्थिति सेट करें।
- स्टाइल टैब में, लंबे स्निपेट के लिए ऊंचाई सेट करें और बटन को स्टाइल करें, फिर पेज का पूर्वावलोकन करें और कॉपी का परीक्षण करें।
प्रत्येक सेटिंग को कवर किया गया है स्रोत कोड विजेट सेटिंग्स गाइड।
75 भाषाएँ और 8 प्रिज्म।जेएस थीम
द कोड ड्रॉपडाउन में HTML, CSS, JavaScript और PHP से लेकर Python, Bash, SQL, JSON, YAML, टाइपस्क्रिप्ट, रिएक्ट JSX, Go, Kotlin और स्विफ्ट तक 75 भाषाओं की सूची है। थीम डिफ़ॉल्ट, डार्क, फंकी, ओकैडिया, ट्वाइलाइट, कॉय, सोलराइज्ड लाइट और टुमॉरो ऑफर करता है चुनें कस्टम स्टाइल टैब में अपनी खुद की पृष्ठभूमि, टेक्स्ट रंग, लाइन नंबर रंग और टाइपोग्राफी सेट करने के लिए।
- सफेद पन्नों पर डिफ़ॉल्ट या सोलराइज्ड लाइट और अंधेरे खंडों पर ओकैडिया या टुमॉरो जैसी प्रकाश थीम का उपयोग करें।
- कस्टम में कोई कीवर्ड रंग नहीं है: कोड आपके द्वारा चुने गए एकल टेक्स्ट रंग में दिखाता है, इसलिए जब आप सिंटैक्स रंग चाहते हैं तो पूर्व निर्धारित थीम का उपयोग करें।
- एक विजेट एक स्निपेट रखता है कोड और आउटपुट के लिए कई विजेट को एक साथ रखें।
एलिमेंटर प्रो कोड हाइलाइट बनाम मास्टर ऐडऑन सोर्स कोड
एलिमेंटर प्रो का अपना कोड हाइलाइट विजेट है दोनों प्रिज्म।js का उपयोग करते हैं, इसलिए विकल्प आपके लिए आवश्यक अतिरिक्त सुविधाओं पर निर्भर करता है।
| फ़ीचर | एलिमेंटर प्रो कोड हाइलाइट | मास्टर ऐडऑन स्रोत कोड |
|---|---|---|
| कीमत | एलिमेंट प्रो की जरूरत है | मास्टर एडॉन्स प्रो की आवश्यकता है |
| भाषाओं | 37 | 75 |
| थीम | 6 (ठोस, अंधेरा, ओकैडिया, सोलराइज्डलाइट, कल, गोधूलि) | ८ प्लस कस्टम रंग |
| कॉपी बटन | क्लिपबोर्ड स्विच पर कॉपी करें | कस्टम टेक्स्ट, कॉपी किया गया टेक्स्ट, हमेशा या होवर पर, दो स्थिति, पूर्ण स्टाइल |
| लाइन नंबर | हाँ | हाँ |
| हाइलाइट पंक्तियाँ | हाँ | नहीं |
| शब्द लपेट | हाँ | नहीं |
| ऊंचाई और फ़ॉन्ट आकार | हाँ | ऊंचाई, साथ ही कस्टम थीम के साथ टाइपोग्राफी |
एलिमेंटर प्रो चुनें यदि आपको विशिष्ट लाइनों को हाइलाइट करने या लंबी लाइनों को लपेटने की आवश्यकता है यदि आप अधिक भाषाएं, अधिक थीम या स्टाइल कॉपी बटन चाहते हैं तो मास्टर एडॉन्स चुनें संबंधितः विषय-सूची लंबे ट्यूटोरियल के लिए और गतिशील तालिका संदर्भ तालिकाओं के लिए।
बटन और लाइन नंबर कॉपी करें
पर स्विच कॉपी बटन सक्षम करें एक बटन जोड़ने के लिए जो पूरे स्निपेट की प्रतिलिपि बनाता है इसे सेट करें बटन पाठ कॉपी करें, द कॉपी किए गए बटन टेक्स्ट के बाद एक क्लिक के बाद दिखाया गया है, बटन दृश्यता (हमेशा या होवर पर) और बटन स्थिति (ऊपर दाएं या नीचे दाएं कोने)। लाइन नंबर सक्षम करें बाईं ओर नीचे संख्याएँ जोड़ता है।
- बटन को हमेशा ट्यूटोरियल पृष्ठों पर सेट रखें ताकि पाठक इसे नोटिस कर सकें।
- पंक्ति संख्याएँ आपके पाठ में किसी पंक्ति को संदर्भित करना आसान बनाती हैं।
- विशिष्ट लाइनों को हाइलाइट करने या विजेट के अंदर लंबी लाइनों को लपेटने का कोई विकल्प नहीं है।
कंटेनर और बटन स्टाइलिंग
द कंटेनर अनुभाग एक ऊंचाई सेट करता है (१२०० पीएक्स तक) इसलिए लंबे स्निपेट स्क्रॉल, प्लस पैडिंग, मार्जिन, सीमा और त्रिज्या कस्टम थीम के साथ यह एक पृष्ठभूमि, टाइपोग्राफी, पाठ रंग और लाइन नंबर रंग भी जोड़ता है बटन अनुभाग टाइपोग्राफी, टेक्स्ट रंग, पृष्ठभूमि रंग, पैडिंग, बॉर्डर और त्रिज्या के साथ कॉपी बटन को स्टाइल करता है।
- लंबी फ़ाइलों पर ऊंचाई को कैप करें ताकि पृष्ठ पठनीय बना रहे।
- बटन पृष्ठभूमि को अपने ब्रांड रंग से मिलाएं।
- पैडिंग जोड़ें ताकि कोड ब्लॉक किनारों को न छुए।
स्रोत कोड के लिए अक्सर पूछे जाने वाले प्रश्न
क्या सोर्स कोड विजेट मुफ़्त है?
नहीं स्रोत कोड का हिस्सा है मास्टर एडॉन्स प्रो। एलिमेंटर प्रो उपयोगकर्ताओं के पास एलिमेंटर का कोड हाइलाइट विजेट भी है।
क्या मैं कोड के आगे लाइन नंबर छिपा सकता हूं?
हाँ। तय करना लाइन नंबर सक्षम करें क्लीनर ब्लॉक के लिए नहीं।
मैं कॉपी बटन कहां रख सकता हूं?
सेट बटन स्थिति ऊपर दाएं या नीचे दाएं कोने में, और बटन दृश्यता हमेशा के लिए या होवर पर।
सोर्स कोड विजेट किन भाषाओं का समर्थन करता है?
७५, कोड ड्रॉपडाउन में चुना गया उनमें एचटीएमएल, सीएसएस, जावास्क्रिप्ट, पीएचपी, पायथन, बैश, एसक्यूएल, जेएसओएन, वाईएएमएल, मार्कडाउन, टाइपस्क्रिप्ट, रिएक्ट जेएसएक्स और टीएसएक्स, गो, जावा, कोटलिन, स्विफ्ट, रूबी, सी, सी ++ और सी # शामिल हैं आगंतुक कोड को पढ़ और कॉपी कर सकते हैं लेकिन इसे संपादित नहीं कर सकते।
क्या मैं पूर्व-निर्धारित थीम के बजाय अपनी स्वयं की रंग योजना का उपयोग कर सकता हूँ?
आंशिक रूप से कंटेनर शैली अनुभाग में पृष्ठभूमि, पाठ रंग, लाइन नंबर रंग और टाइपोग्राफी चुनने के लिए थीम को कस्टम पर सेट करें कीवर्ड रंग केवल आठ पूर्व निर्धारित विषयों के साथ आते हैं, इसलिए एक कस्टम ब्लॉक एक रंग में कोड दिखाता है जब तक कि आप अपना सीएसएस नहीं जोड़ते।
क्या मैं विशिष्ट पंक्तियों को हाइलाइट कर सकता हूं?
नहीं विजेट कोई लाइन हाइलाइट विकल्प है एलिमेंटर प्रो के कोड हाइलाइट विजेट चुना लाइनों को उजागर कर सकते हैं अगर आप की जरूरत है।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर
