# आलोकित करने के लिए एक नक़ल बटन.js # परिचय इस साइट में मैं हाईटलाइट का प्रयोग कोड स्निपेट साइड को रेंडर करने के लिए करता हूँ. मैं इस तरह के रूप में यह मेरे सर्वर साइड कोड साफ और सरल रहता है. लेकिन, मैं हर कोड में एक नक़ल बटन जोड़ना चाहता था ताकि उपयोक्ता अपने क्लिपबोर्ड में कोड की आसानी से नक़ल कर सकें. यह एक आसान काम है लेकिन मैंने सोचा कि मैं इसे यहाँ ऐसे किसी और के लिए लिख सकता हूँ जो भी ऐसा करना चाहे. # ध्येय अंत बिन्दु है कि हम इस साइट पर इस तरह एक प्रतिलिपि बटन है: ![नक़ल बटन](copybutton.png) **ध्यान दीजिए: इस लेख का सारा श्रेय आपके हाथ में है [पिकाज़ पटाकार](https://dev.to/farazpatankar/highlightjs-copy-button-plugin-3dld) मैं इस एक बनाने के लिए इस्तेमाल किया गया है जो लेख है. मैं बस अपने ही संदर्भ के लिए और दूसरों के साथ साझा करने के लिए यहाँ किया गया परिवर्तन करना चाहता था.** [TOC] # विकल्प यह करने के लिए कुछ तरीका है, उदाहरण के लिए वहाँ एक है [प्रतिलिपि बटन प्लगिन](https://github.com/arronhunt/highlightjs-copy) हाय.js के लिए लेकिन मैंने निर्णय किया कि मैं बटन पर और अधिक नियंत्रण चाहता था. तो मैं पार आया [इस लेख](https://dev.to/farazpatankar/highlightjs-copy-button-plugin-3dld) कॉपी बटन जोड़ने के लिए. ## समस्याएँ यह लेख मेरे लिए बिलकुल सही था । 1. यह फ़ॉन्ट प्रयोग करता है कि मैं अपनी साइट पर उपयोग नहीं करता (लेकिन फिर दस्ती रूप से एसवीजी में भी, सुनिश्चित नहीं क्यों नहीं है). ```javascript // Lucide copy icon copyButton.innerHTML = ``; ``` जब तक यह काम करता है, मैं पहले से ही इस साइट पर बॉक्स प्रतीक का उपयोग कर चुका हूं. [वहाँ पहले से ही प्रतीक की नक़ल करें](https://icon-sets.iconify.design/bx/copy/). 2. यह एक जाम लाइब्रेरी का उपयोग करता है जो मैं इस साइट पर नहीं है. ```javascript // Notify user that the content has been copied toast.success("Copied to clipboard", { description: "The code block content has been copied to the clipboard.", }); ``` 3. यह कोड ब्लॉक पर y-अक्ष बाहर दस्तक देता है और प्रतीक को नीचे पर रखता है कि मैं नहीं चाहता. तो मेरा सही है. # मेरी अनुकूलता ## मुख्य फंक्शन यह प्लगइन इंडिप्ड इन्डिट्यूट में है `after:highlightElement` घटना तथा कोड ब्लॉक में एक बटन जोड़ें. तो पहले मैंने पिकाज़ कोड की नक़ल की और फिर निम्न परिवर्तन किए: 1. कोड ब्लॉक के अंत में इसे जोड़ने के बजाय मैंने इसे प्रारंभ कर दिया. 2. एसवीजी के बजाय मैंने बॉक्स प्रतीक संस्करण का इस्तेमाल सिर्फ उन क्लासों को जोड़ने के द्वारा प्रविष्ट किए गए बटन को जोड़ने के लिए किया तथा पाठ आकार को नियत करने के लिए `text-xl`. 3. मैं बछड़े की सूचना हटा दिया और इसे एक साधारण के साथ बदल दिया `showToast` फंक्शन है कि मैं अपनी साइट में है (वापस देखें) 4. मैंने एक जोड़े को जोड़ा `aria-label` और `title` पहुँच के लिए बटन (और एक अच्छा घूमने वाला प्रभाव देने के लिए). ```javascript hljs.addPlugin({ "after:highlightElement": ({ el, text }) => { const wrapper = el.parentElement; if (wrapper == null) { return; } /** * Make the parent relative so we can absolutely * position the copy button */ wrapper.classList.add("relative"); const copyButton = document.createElement("button"); copyButton.classList.add( "absolute", "top-2", "right-1", "p-2", "text-gray-500", "hover:text-gray-700", "bx", "bx-copy", "text-xl", "cursor-pointer" ); copyButton.setAttribute("aria-label", "Copy code to clipboard"); copyButton.setAttribute("title", "Copy code to clipboard"); copyButton.onclick = () => { navigator.clipboard.writeText(text); // Notify user that the content has been copied showToast("The code block content has been copied to the clipboard.", 3000, "success"); }; // Append the copy button to the wrapper wrapper.prepend(copyButton); }, }); ``` ## `showToast` फंक्शन यह एक रवांडा पर निर्भर करता है जिसे मैंने अपनी परियोजना में जोड़ा था । यह आंशिक उपयोग करता है [गुलबहारन घटक](https://daisyui.com/components/toast/) उपयोक्ता को संदेश भेजें. मुझे लगता है जैसे यह जावा साफ और सरल रहता है...... और मुझे एक ही तरह से जाम संदेश की शैली करने देता है इस साइट के बाकी के रूप में. ```html ``` आप इस पर भी एक अजीब छिपा हुआ है नोट करेंगे `p` नीचे टैग, यह सिर्फ इन वर्गों की व्याख्या करने के लिए टिला के लिए है जब यह साइट के सीएसएस बनाता है. जावा स्क्रिप्ट फ़ंक्शन सरल है, यह सिर्फ एक सेट समय के लिए जाम संदेश दिखाता है और फिर इसे फिर से छुपाता है. ```javascript window.showToast = function(message, duration = 3000, type = 'success') { const toast = document.getElementById('toast'); const toastText = document.getElementById('toast-text'); const toastMessage = document.getElementById('toast-message'); // Set message and type toastText.innerText = message; toastMessage.className = `alert alert-${type}`; // Change alert type (success, warning, error) // Show the toast toast.classList.remove('hidden'); // Hide the toast after specified duration setTimeout(() => { toast.classList.add('hidden'); }, duration); } ``` तब हम इसका इस्तेमाल कर सकते हैं `showToast` फंक्शन इन में `copyButton.onclick` कार्यक्रम. ```javascript showToast("The code block content has been copied to the clipboard.", 3000, "success"); ``` मैं मेरे शीर्ष पर यह आंशिक सही जोड़ दिया `_Layout.cshtml` फ़ाइल इसलिए यह हर पृष्ठ पर उपलब्ध है. ```html `` ``` अब जब हम ब्लॉग पोस्ट्स दिखा रहे हैं कोड ब्लॉक है: ![नक़ल बटन](copybutton.png) # ऑन्टियम तो यह है कि यह मेरे लिए काम करने के लिए एक साधारण परिवर्तन है. मुझे आशा है कि यह किसी और को वहाँ बाहर मदद करता है.