परिचय

इस साइट में मैं हाईटलाइट का प्रयोग कोड स्निपेट साइड को रेंडर करने के लिए करता हूँ. मैं इस तरह के रूप में यह मेरे सर्वर साइड कोड साफ और सरल रहता है. लेकिन, मैं हर कोड में एक नक़ल बटन जोड़ना चाहता था ताकि उपयोक्ता अपने क्लिपबोर्ड में कोड की आसानी से नक़ल कर सकें. यह एक आसान काम है लेकिन मैंने सोचा कि मैं इसे यहाँ ऐसे किसी और के लिए लिख सकता हूँ जो भी ऐसा करना चाहे.

ओह और यह सब मुझे वास्तव में साइट पर दिखाने के लिए पत्रिका कार्य जोड़ने के लिए इंतजार कर रहा है. के रूप में के रूप में मैं करने के लिए ऊर्जा मिलता है कि मैं इस में जोड़ देंगे.

अंत बिन्दु है कि हम इस साइट पर इस तरह एक प्रतिलिपि बटन है:

ध्यान दीजिए: इस लेख का सारा श्रेय आपके हाथ में है पिकाज़ पटाकार मैं इस एक बनाने के लिए इस्तेमाल किया गया है जो लेख है. मैं बस अपने ही संदर्भ के लिए और दूसरों के साथ साझा करने के लिए यहाँ किया गया परिवर्तन करना चाहता था.

विकल्प

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

समस्याएँ

यह लेख मेरे लिए बिलकुल सही था ।

1. यह फ़ॉन्ट प्रयोग करता है कि मैं अपनी साइट पर उपयोग नहीं करता (लेकिन फिर दस्ती रूप से एसवीजी में भी, सुनिश्चित नहीं क्यों नहीं है).

  // Lucide copy icon
    copyButton.innerHTML = `<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;

जब तक यह काम करता है, मैं पहले से ही इस साइट पर बॉक्स प्रतीक का उपयोग कर चुका हूं. वहाँ पहले से ही प्रतीक की नक़ल करें.

2. यह एक जाम लाइब्रेरी का उपयोग करता है जो मैं इस साइट पर नहीं है.

  // 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 पहुँच के लिए बटन (और एक अच्छा घूमने वाला प्रभाव देने के लिए).

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 फंक्शन

यह एक रवांडा पर निर्भर करता है जिसे मैंने अपनी परियोजना में जोड़ा था । यह आंशिक उपयोग करता है गुलबहारन घटक उपयोक्ता को संदेश भेजें. मुझे लगता है जैसे यह जावा साफ और सरल रहता है...... और मुझे एक ही तरह से जाम संदेश की शैली करने देता है इस साइट के बाकी के रूप में.

<div id="toast" class="toast toast-bottom fixed z-50 hidden overflow-y-hidden">
    <div id="toast-message" class="alert">
        <div>
            <span id="toast-text">Notification message</span>
        </div>
    </div>
    <p class="hidden right-1 bx-copy  cursor-pointer alert-success alert-warning alert-error alert-info"></p>
</div>

आप इस पर भी एक अजीब छिपा हुआ है नोट करेंगे p नीचे टैग, यह सिर्फ इन वर्गों की व्याख्या करने के लिए टिला के लिए है जब यह साइट के सीएसएस बनाता है.

जावा स्क्रिप्ट फ़ंक्शन सरल है, यह सिर्फ एक सेट समय के लिए जाम संदेश दिखाता है और फिर इसे फिर से छुपाता है.

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 कार्यक्रम.

showToast("The code block content has been copied to the clipboard.", 3000, "success");

मैं मेरे शीर्ष पर यह आंशिक सही जोड़ दिया _Layout.cshtml फ़ाइल इसलिए यह हर पृष्ठ पर उपलब्ध है.

<partial name="_Toast"  />``

अब जब हम ब्लॉग पोस्ट्स दिखा रहे हैं कोड ब्लॉक है:

ऑन्टियम

तो यह है कि यह मेरे लिए काम करने के लिए एक साधारण परिवर्तन है. मुझे आशा है कि यह किसी और को वहाँ बाहर मदद करता है.