प्रोग्रामिंग ब्लॉग की प्रमुख विशेषताओं में से एक कोड ब्लॉक है। आपको सिंटैक्स हाइलाइटर का उपयोग करके उन्हें प्रारूपित करने की आवश्यकता नहीं है, लेकिन यदि आप ऐसा करते हैं तो यह आपके ब्लॉग को बहुत अच्छा बनाता है। यह आपके कोड की पठनीयता में भी सुधार कर सकता है।
यह लेख आपको दिखाएगा कि रिएक्ट में कोड ब्लॉक को हाइलाइट करने के लिए रिएक्ट-सिंटैक्स-हाइलाइटर का उपयोग कैसे करें। आप प्रदान की गई भाषा के सिंटैक्स का उपयोग करके इसे पास किए गए कोड को हाइलाइट करने में सक्षम एक कोड ब्लॉक घटक बनाएंगे।
प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर के साथ सिंटेक्स हाइलाइटिंग
रिएक्ट सिंटैक्स हाइलाइटर आपको रिएक्ट का उपयोग करके कोड को हाइलाइट करने की अनुमति देता है। दूसरे के विपरीत सिंटैक्स हाइलाइटर्स, प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर खतरनाक रूप से सेटइनरएचटीएमएल का उपयोग करके डीओएम में हाइलाइट किए गए कोड को सम्मिलित करने के लिए कंपोनेंटडिडअपडेट या कंपोनेंटडिडमाउंट पर भरोसा नहीं करता है।
यह दृष्टिकोण खतरनाक है क्योंकि यह एक आवेदन को उजागर करता है क्रॉस-साइट स्क्रिप्टिंग हमले.
इसके बजाय, यह वर्चुअल डोम बनाने के लिए सिंटैक्स ट्री का उपयोग करता है और इसे केवल परिवर्तनों के साथ अपडेट करता है।
घटक पृष्ठभूमि में प्रिज्मजेएस और हाईलाइट.जेएस का उपयोग करता है। आप अपने कोड को हाइलाइट करने के लिए या तो उपयोग करना चुन सकते हैं। इसका उपयोग करना बहुत आसान है क्योंकि यह आउट-ऑफ-द-बॉक्स स्टाइल प्रदान करता है।
प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर घटक कोड, भाषा और शैली को सहारा के रूप में स्वीकार करता है। घटक अन्य अनुकूलन विकल्पों को भी स्वीकार करता है। आप उन्हें में पा सकते हैं प्रतिक्रिया वाक्य रचना हाइलाइटर प्रलेखन।
प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर घटक का उपयोग करना
रिएक्ट में रिएक्ट सिंटैक्स हाइलाइटर का उपयोग शुरू करने के लिए, इसे npm के माध्यम से स्थापित करें।
NPM इंस्टॉल प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर --सहेजेंनामक एक नया घटक बनाएँ कोडब्लॉक.जेएस अपने प्रतिक्रिया आवेदन में और आयात करें प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर:
आयात सिंटैक्स हाइलाइटर से 'प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर';
आयात {डोको} से 'प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर/जिला/ईएसएम/शैलियों/hljs';
स्थिरांक कोडब्लॉक = ({कोडस्ट्रिंग}) => {
वापसी (
<सिंटैक्स हाइलाइटर भाषा ="जावास्क्रिप्ट" शैली = {डॉको}>
{कोडस्ट्रिंग}
</SyntaxHighlighter>
);
};
सिंटैक्स हाइलाइटर घटक उपयोग की जाने वाली भाषा और शैली को स्वीकार करता है। यह कोड स्ट्रिंग को इसकी सामग्री के रूप में भी लेता है।
आप उपरोक्त घटक को निम्नानुसार प्रस्तुत कर सकते हैं:
स्थिरांक ऐप = () => {
स्थिरांक कोडस्ट्रिंग = `
स्थिरांक वर्ग = (एन) => वापसी एन * एन
`
वापसी(
<कोडब्लॉक कोडस्ट्रिंग = {कोडस्ट्रिंग}/>
)
}
यह ध्यान रखना महत्वपूर्ण है कि प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर का उपयोग करने से आपके निर्माण का आकार बढ़ सकता है, इसलिए यदि आपको आवश्यकता हो, तो आप प्रकाश निर्माण को आयात कर सकते हैं। हालाँकि, लाइट बिल्ड में डिफ़ॉल्ट शैलियाँ नहीं हैं।
आपको उन भाषाओं को आयात और पंजीकृत करने की भी आवश्यकता होगी जिन्हें आप उपयोग करना चाहते हैं रजिस्टर भाषा प्रकाश निर्माण से निर्यात किया गया कार्य।
आयात { रोशनी जैसा सिंटैक्स हाइलाइटर } से 'प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर';
आयात जे एस से 'प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर/जिला/ईएसएम/भाषाएं/एचएलजे/जावास्क्रिप्ट';
सिंटैक्स हाइलाइटर.रजिस्टर भाषा('जावास्क्रिप्ट', जेएस);
यह घटक कोड को हाइलाइट करने के लिए हाइलाइट.जेएस का उपयोग करता है।
इसके बजाय प्रिज्मजेएस का उपयोग करने के लिए, इसे इस तरह प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर पैकेज से आयात करें:
आयात { प्रिज्म जैसा सिंटैक्स हाइलाइटर } से "प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर";
आयात { बनाम डार्कप्लस } से "प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर/जिला/ईएसएम/शैलियों/प्रिज्म";
प्रिज्म लाइट बिल्ड के लिए, प्रिज्मलाइट आयात करें और उस भाषा को पंजीकृत करें जिसका आप उपयोग कर रहे हैं।
आयात {प्रिज्मलाइट जैसा सिंटैक्स हाइलाइटर } से 'प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर';
आयात जेएसएक्स से 'प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर/जिला/ईएसएम/भाषाएं/प्रिज्म/जेएसएक्स';
आयात चश्मे से 'प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर/जिला/ईएसएम/शैलियों/प्रिज्म/प्रिज्म';
सिंटैक्स हाइलाइटर.रजिस्टर भाषा('जेएसएक्स', जेएसएक्स);
प्रिज्म का उपयोग करना फायदेमंद है, खासकर जब जेएसएक्स को हाइलाइट करना क्योंकि प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर इसका पूरी तरह से समर्थन नहीं करता है।
कोड ब्लॉक में लाइन नंबर जोड़ना
अब जब आप कोड ब्लॉक को हाइलाइट करना जानते हैं, तो आप लाइन नंबर जैसी अतिरिक्त सुविधाएं जोड़ना शुरू कर सकते हैं।
प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर के साथ, आपको केवल पास करने की आवश्यकता है शो लाइन नंबर सिंटेक्स हाइलाइटर घटक के लिए और इसे सत्य पर सेट करें।
<सिंटैक्स हाइलाइटर भाषा ="जावास्क्रिप्ट" शैली={docco} शोलाइननंबर="सच">
{कोडस्ट्रिंग}
</SyntaxHighlighter>
घटक अब आपके कोड के आगे लाइन नंबर दिखाएगा।
अपने घटक में कस्टम शैलियों का उपयोग करना
भले ही प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर स्टाइल प्रदान करता है, आपको कभी-कभी अपने कोड ब्लॉक को अनुकूलित करने की आवश्यकता हो सकती है।
इसके लिए पैकेज आपको इनलाइन पास करने की अनुमति देता है सीएसएस शैलियों नीचे दिखाए गए अनुसार कस्टम स्टाइल प्रोप के लिए:
<सिंटैक्स हाइलाइटर भाषा ="जावास्क्रिप्ट" स्टाइल = {vscDarkPlus} कस्टम स्टाइल = {{बॉर्डररेडियस: "5पीएक्स", पीछे का रंग: "#001E3C"}} >
{कोडस्ट्रिंग}
</SyntaxHighlighter>
इस उदाहरण में हाइलाइट किए गए कोड ब्लॉक में एक कस्टम सीमा त्रिज्या और पृष्ठभूमि रंग होगा।
सिंटैक्स हाइलाइटिंग का महत्व
आप प्रतिक्रिया में कोड को हाइलाइट करने के लिए प्रतिक्रिया-वाक्यविन्यास-हाइलाइटर पैकेज का उपयोग कर सकते हैं। आप अपनी खुद की शैलियों का उपयोग करके बिल्ड आकार को कम करने और कोड ब्लॉक को अनुकूलित करने के लिए हल्के संस्करण का उपयोग कर सकते हैं।
कोड स्निपेट्स को हाइलाइट करने से आपका कोड अच्छा दिखता है, इसकी पठनीयता में सुधार होता है, और यह पाठकों के लिए अधिक पहुंच योग्य बनाता है।
