Johdanto

Tässä sivustossa käytän Hightlight.js:ää tehdäkseni koodileikkeistä asiakaspuolen. Pidän tästä, koska se pitää palvelinsivukoodini puhtaana ja yksinkertaisena. Halusin kuitenkin lisätä jokaiseen koodinappiin kopion, jotta käyttäjät voisivat helposti kopioida koodin leikepöydälleen. Tämä on yksinkertainen tehtävä, mutta ajattelin dokumentoida sen täällä kaikille muille, jotka haluavat tehdä samoin.

Tavoite

Lopputuloksena on, että sivustolla on tällainen kopiopainike:

HUOMAUTUS: Kaikki kunnia tästä artikkelista kuuluu Faraz Patankar Kuka on artikkeli, jolla loin tämän. Halusin vain dokumentoida muutoksia, joita tein siihen täällä omaa viittaustani varten ja jakaa ne muiden kanssa.

Vaihtoehdot

Tähän on pari keinoa, esimerkiksi Kopionappiliitännäinen Higlight.js:lle, mutta päätin, että haluan enemmän hallintaa nappiin ja muotoiluun. Joten törmäsin tämä artikkeli Kopiointinappia varten.

Ongelmat

Vaikka tuo artikkeli on hieno lähestymistapa, siinä oli pari ongelmaa, jotka estivät sen olemasta täydellinen minulle:

1. Se käyttää fonttia, jota en käytä sivustollani (mutta siinä on myös manuaalinen SVG, en tiedä miksi).

  // 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>`;

Vaikka tämä toimii, käytän jo BoxIcons tällä sivustolla, jolla on Kopioi kuvake jo siellä.

2. Se käyttää paahtoleipäkirjastoa, jota minulla ei ole tällä sivustolla.

  // 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. Se sammuttaa koodilohkon y-virran ja laskee kuvakkeen pohjalle, mitä en halunnut. Omani on siis huippuoikealla.

Mukautukseni

Päätehtävä

Tämä liitännäinen kytkee after:highlightElement Tapahtuma ja lisää koodilohkoon nappi.

Joten ensin kopioin Farazin koodin ja tein sitten seuraavat muutokset:

1. Sen sijaan, että lisäisin sen koodiblokin loppuun, valmistelen sen alkuun.
2. SVG:n sijaan käytin BoxIcons-versiota lisäämällä vain nämä luokat lisättyyn painikkeeseen ja asettamalla tekstit text-xl.
3. Poistin paahtoleipäilmoituksen ja korvasin sen yksinkertaisella showToast Toiminto, joka minulla on sivustollani (ks. myöhemmin)
4. Lisäsin: aria-label sekä title painikkeelle saavutettavuus (ja antaa mukavan leijuntaefektin).

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 Tehtävä

Tämä perustuu parranajoon, jonka lisäsin projektiini. Tässä osittaisessa käytössä on DaisyUI:n paahtoleipäkomponentti Näytä viesti käyttäjälle. Pidän tästä lähestymistavasta, koska se pitää Javascriptin puhtaana ja yksinkertaisena ja antaa minun tyylitellä paahtoleipäviestiä samalla tavalla kuin muuta sivustoa.

<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>

Huomaat, että tässäkin on outo piilo. p Alareunassa oleva lappu, tämä on vain Tailwindille näiden kurssien jäsentelyä varten, kun se rakentaa sivuston CSS:ää.

Javascript-toiminto on yksinkertainen, se vain näyttää paahtoleipäviestin tietyn ajan ja piilottaa sen uudelleen.

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);
}

Voimme sitten kutsua tätä nimellä showToast Funktion in the copyButton.onclick tapahtuma.

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

Lisäsin tämän osittaisen suoran päällimmäiseksi. _Layout.cshtml Kansio niin, että se on saatavilla joka sivulla.

<partial name="_Toast"  />``

Nyt kun näytämme blogikirjoituksia, koodilohkot ovat:

Johtopäätöksenä

Siinä kaikki, yksinkertainen muutos Farazin koodiin, jotta se toimisi minulle. Toivottavasti tästä on apua jollekulle muulle.