अपने रिएक्ट ऐप में कोड ब्लॉक कैसे जोड़ें

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

पुस्तकालय की स्थापना

पहला, एक रिएक्ट ऐप बनाएं और स्थापित करें प्रतिक्रिया-कोड-ब्लॉक पुस्तकालय। इस लाइब्रेरी का उपयोग आपके ऐप में कोड ब्लॉक प्रदर्शित करने के लिए किया जाता है। आप इस लाइब्रेरी को npm, Node.js के लिए पैकेज मैनेजर का उपयोग करके स्थापित कर सकते हैं। अपना टर्मिनल खोलें और अपनी प्रोजेक्ट डायरेक्टरी में नेविगेट करें। फिर निम्न कमांड चलाएँ:

npm प्रतिक्रिया-कोड-ब्लॉक स्थापित करें

यह आपके प्रोजेक्ट में प्रतिक्रिया-कोड-ब्लॉक लाइब्रेरी स्थापित करेगा।

अपने प्रोजेक्ट में कोड ब्लॉक जोड़ना

प्रतिक्रिया-कोड-ब्लॉक लाइब्रेरी स्थापित करने के बाद, आप आरंभ करने के लिए तैयार हैं। सबसे पहले, आयात करें

कोडब्लॉक आपके ऐप में प्रतिक्रिया-कोड-ब्लॉक लाइब्रेरी से घटक। आप अपनी फ़ाइल में निम्न कोड जोड़कर ऐसा कर सकते हैं:

आयात {कोडब्लॉक} से"प्रतिक्रिया-कोड-ब्लॉक";

फिर, निम्नलिखित कोड जोड़कर अपने ऐप में कोडब्लॉक घटक का उपयोग करें:

 पाठ ='कंसोल.लॉग ("हैलो, दुनिया!");'
 भाषा ='जावास्क्रिप्ट'
 शोलाइन नंबर = {सत्य}
 थीम = {आपकी थीम}
/>

उपरोक्त कोड में, आप कोडब्लॉक घटक के लिए कई प्रॉप्स पास कर रहे हैं। यहां सभी उपलब्ध प्रॉप्स की सूची दी गई है:

• पाठ (आवश्यक): कोड ब्लॉक में प्रदर्शित करने के लिए कोड।
• भाषा (आवश्यक): कोड की प्रोग्रामिंग भाषा। यह के लिए प्रयोग किया जाता है कोड ब्लॉक का सिंटैक्स हाइलाइटिंग.
• शोलाइननंबर: एक बूलियन मान जो दर्शाता है कि कोड ब्लॉक में लाइन नंबर प्रदर्शित करना है या नहीं। यह असत्य के लिए डिफ़ॉल्ट है।
• थीम: कोड ब्लॉक के लिए उपयोग की जाने वाली थीम। यह बिल्ट-इन थीम या कस्टम थीम ऑब्जेक्ट हो सकता है। यह गिटहब के लिए डिफ़ॉल्ट है।
• स्टार्टिंगलाइननंबर: वह पंक्ति संख्या जिससे गिनना प्रारंभ करना है। यह 1 के लिए डिफ़ॉल्ट है।
• कोडब्लॉक: एक वस्तु जिसमें कोड ब्लॉक के लिए विकल्प होते हैं। इसमें शामिल हो सकता है पंक्ति संख्याएँ (एक बूलियन इंगित करता है कि लाइन नंबर प्रदर्शित करना है या नहीं) और रैपलाइन्स (एक बूलियन इंगित करता है कि लाइनों को लपेटना है या नहीं)।
• क्लिक पर: कोड ब्लॉक क्लिक होने पर कॉल करने के लिए एक फ़ंक्शन।

इन सभी प्रॉप्स का उपयोग कैसे करें, इसका एक उदाहरण यहां दिया गया है:

आयात {कोडब्लॉक} से"प्रतिक्रिया-कोड-ब्लॉक";
समारोहMyComponent() {
कॉन्स्ट हैंडलक्लिक = () => {
सांत्वना देना।लकड़ी का लट्ठा("कोड ब्लॉक क्लिक किया गया");
 };
वापस करना (
 पाठ ='स्थिर अभिवादन = "हैलो, दुनिया!"; कंसोल.लॉग (अभिवादन);'
 भाषा ='जावास्क्रिप्ट'
 शोलाइन नंबर = {सत्य}
 विषय ='एटम-वन-डार्क'
 प्रारंभिक रेखा संख्या = {10}
 कोडब्लॉक = {{ पंक्ति संख्याएँ: असत्य, रैपलाइन्स: सत्य }}
 ऑनक्लिक = {हैंडलक्लिक}
 />
 );
}

उपरोक्त कोड में, आप उपयोग कर रहे हैं परमाणु-एक-अंधेरा थीम, लाइन नंबरों को 10 से शुरू करना, लाइन नंबरों को अक्षम करना, लाइन रैपिंग को सक्षम करना और क्लिक हैंडलर को जोड़ना।

इन प्रॉप्स का उपयोग करके, आप अपनी आवश्यकताओं के अनुरूप अपने कोड ब्लॉक के रूप और व्यवहार को अनुकूलित कर सकते हैं।

अपने कोड ब्लॉक में थीम जोड़ना

प्रतिक्रिया-कोड-ब्लॉक लाइब्रेरी विभिन्न प्रकार के बिल्ट-इन थीम प्रदान करती है जिनका उपयोग आपके कोड ब्लॉक के रूप को अनुकूलित करने के लिए किया जा सकता है। बिल्ट-इन थीम का उपयोग करने के लिए, आपको केवल थीम का नाम निर्दिष्ट करना होगा थीम सहारा। उदाहरण के लिए, का उपयोग करने के लिए परमाणु-एक-अंधेरा थीम, आप निम्न कोड का प्रयोग करेंगे:

 पाठ ='कंसोल.लॉग ("हैलो, दुनिया!");'
 भाषा ='जावास्क्रिप्ट'
 शोलाइन नंबर = {सत्य}
 विषय ='एटम-वन-डार्क'
/>

बिल्ट-इन थीम के अलावा, आप एक जावास्क्रिप्ट ऑब्जेक्ट को परिभाषित करके कस्टम थीम भी बना सकते हैं जो कोड ब्लॉक के विभिन्न भागों के लिए उपयोग किए जाने वाले रंगों को निर्दिष्ट करता है। कस्टम थीम ऑब्जेक्ट कैसा दिख सकता है इसका एक उदाहरण यहां दिया गया है:

कॉन्स्ट myCustomTheme = {
 पंक्ति संख्या रंग: "#सीसीसी",
 पंक्ति संख्या बीजी रंग: "#222",
 पृष्ठभूमि का रंग: "#222",
 पाठ का रंग: "#सीसीसी",
 सबस्ट्रिंग रंग: "#00ff00",
 खोजशब्द रंग: "#0077ff",
 विशेषता रंग: "#ffaa00",
 चयनकर्ता टैग रंग: "#0077ff",
 डॉक्टर टैग रंग: "#aa00ff",
 नाम रंग: "#f8f8f8",
 निर्मित रंग: "#0077ff",
 शाब्दिक रंग: "#ffaa00",
 गोली का रंग: "#ffaa00",
 कोड रंग: "#सीसीसी",
 अतिरिक्त रंग: "#00ff00",
 रेगेक्सपीरंग: "#f8f8f8",
 प्रतीक रंग: "#ffaa00",
 परिवर्तनशील रंग: "#ffaa00",
 टेम्पलेट चर रंग: "#ffaa00",
 लिंक रंग: "#aa00ff",
 चयनकर्ता विशेषता रंग: "#ffaa00",
 चयनकर्ता छद्म रंग: "#aa00ff",
 प्रकार रंग: "#0077ff",
 स्ट्रिंग रंग: "#00ff00",
 चयनकर्ता आईडी रंग: "#ffaa00",
 उद्धरण रंग: "#f8f8f8",
 टेम्पलेट टैग रंग: "#सीसीसी",
 विलोपन रंग: "#ff0000",
 शीर्षक रंग: "#0077ff",
 अनुभाग रंग: "#0077ff",
 टिप्पणी रंग: "#777",
 मेटाकीवर्डरंग: "#f8f8f8",
 मेटाकलर: "#aa00ff",
 समारोह रंग: "#0077ff",
 संख्या रंग: "#ffaa00",
};

कस्टम थीम का उपयोग करने के लिए, आप थीम ऑब्जेक्ट को कोडब्लॉक घटक के थीम प्रोप के रूप में पास करेंगे:

 पाठ ='कंसोल.लॉग ("हैलो, दुनिया!");'
 भाषा ='जावास्क्रिप्ट'
 शोलाइन नंबर = {सत्य}
 विषय = {myCustomTheme}
/>

नीचे आउटपुट है:

बिल्ट-इन और कस्टम थीम का उपयोग करके, आप अपनी आवश्यकताओं और अपने ऐप के समग्र डिज़ाइन के अनुरूप अपने कोड ब्लॉक के स्वरूप को अनुकूलित कर सकते हैं।

अपने प्रोजेक्ट में कॉपीब्लॉक जोड़ना

यदि आप अपने कोड ब्लॉक में कॉपी की कार्यक्षमता जोड़ना चाहते हैं, तो आप इसका उपयोग कर सकते हैं कॉपीब्लॉक प्रतिक्रिया-कोड-ब्लॉक लाइब्रेरी द्वारा प्रदान किया गया घटक। इस घटक का उपयोग करने के लिए, आपको स्थापित करने की आवश्यकता होगी प्रतिक्रिया-कॉपी-टू-क्लिपबोर्ड पुस्तकालय भी। अपने प्रोजेक्ट में कॉपीब्लॉक घटक जोड़ने का तरीका यहां बताया गया है:

स्थापित करें प्रतिक्रिया-कॉपी-टू-क्लिपबोर्ड पुस्तकालय:

एनपीएम प्रतिक्रिया-कॉपी-टू-क्लिपबोर्ड स्थापित करें

आवश्यक घटकों और पुस्तकालयों को आयात करें:

आयात {कॉपीब्लॉक} से'प्रतिक्रिया-कोड-ब्लॉक';
आयात {फाकॉपी} से'प्रतिक्रिया-प्रतीक/एफए';
आयात कॉपी से'क्लिपबोर्ड पर कॉपी करें';

अपने कोड में कॉपीब्लॉक घटक का प्रयोग करें:

कॉन्स्ट कोड = 'कंसोल.लॉग ("हैलो, दुनिया!");';
कॉन्स्ट भाषा = 'जावास्क्रिप्ट';
 पाठ = {कोड}
 भाषा = {भाषा}
 शोलाइन नंबर = {सत्य}
 रैपलाइन्स = {सत्य}
 विषय ='ड्रैकुला'
 कोडब्लॉक
 आइकन = {}
 onCopy={() => कॉपी (कोड)}
/>

नीचे आउटपुट है:

अपने प्रोजेक्ट में कॉपीब्लॉक घटक जोड़कर, आप आसानी से उपयोगकर्ताओं को अपने कोड ब्लॉक से उनके क्लिपबोर्ड पर कोड कॉपी करने की अनुमति दे सकते हैं।

कोड ब्लॉक जोड़ने के वैकल्पिक तरीके

प्रतिक्रिया-कोड-ब्लॉक लाइब्रेरी का उपयोग करना आपके रिएक्ट ऐप में कोड ब्लॉक जोड़ने का सबसे सीधा तरीका है, कुछ वैकल्पिक तरीके भी हैं जिनका आप उपयोग कर सकते हैं:

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

जबकि प्रतिक्रिया-कोड-ब्लॉक लाइब्रेरी अधिकांश अनुप्रयोगों के लिए एक बढ़िया विकल्प है, ये वैकल्पिक तरीके कुछ स्थितियों में उपयोगी हो सकते हैं। अंततः, आपके द्वारा चुनी गई विधि आपकी विशिष्ट आवश्यकताओं और प्राथमिकताओं पर निर्भर करेगी।

कोड ब्लॉक के साथ उपयोगकर्ता जुड़ाव में सुधार करें

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