Inleiding

På den här sidan använder jag Hightlight.js för att göra koder snippets från klientsidan . Jag gillar det här eftersom det håller min serversidans kod ren och enkel M SK2 Hursomhelst, Jag ville lägga till en kopieringsknapp på varje kodersnippet så att användaren enkelt kan kopiera koden till sin bildspelare . Det är en enkel uppgift men jag tänkte att jag skulle dokumentera den här för alla andra som kanske vill göra samma sak.

Målet

Slutsatsen är att vi har en kopieringsknapp som den här på sidan

NOTET: Alla bidrag för den här artikeln går till Faraz Patankar vem' artikeln jag använde för att skapa den här . Jag ville bara dokumentera de ändringar jag gjorde i den här för min egen referens och dela med mig av dem

Optionerna

Det finns ett par sätt att göra detta, till exempel Kopiera-knapp för Higlight.js men jag bestämde mig för att jag ville ha mer kontroll över knappen och stilen den här artikeln för att lägga till en kopieringsknapp.

Problemet

Trots att artikeln är en bra metod hade den några problem som slutade vara perfekt för mig.

1. Det använder en font som jag inte använder på min hemsida, men som sedan också har den manuala SVG: n.

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

Medan detta fungerar, använder jag redan BoxIcons på den här sidan som har en kopiera ikonen där redan.

2. Den använder en toastbibliotek som jag inte har på den här sidan.

  // 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. Den slår ut y, -, överflödet på kodblocket och sätter ikonen längst ner som jag inte ville.

Mina anpassningar

Den stora funktionen

Denna plugin kopplar in i after:highlightElement och lägger till en knapp i kodblocket.

Så först kopierade jag Farazs kod och gjorde de här förändringarna:

1. Istället för att lägga till den i slutet av kodblocket så lägger jag in den i början.
2. Istället för SVG använde jag BoxIcons-versionen genom att bara lägga till de klasserna i inlagda knappen & där man sätter texten text-xl.
3. Jag tog bort toast-avsikten och ersatte den med en enkel showToast funktion som jag har på min hemsida (se senareM SK1
4. Jag lade till en aria-label och title till knappen för tillgänglighet ( och för att ge en trevlig hovereffekt

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 Funktioner

Det här är baserat på en Rasierbit som jag lagt till mitt projekt Den här delen använder DaisyUI Toast-komponenten att visa ett meddelande till användaren. Jag gillar den här tillvägagångsviisin eftersom den håller Javascript ren och enkel och tillåter mig att stylera toast meddelandet på samma sätt som resten av webbplatsen.

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

Du' kommer märka att detta också har en underlig dolda p tag i botten, det här är bara för Tailwind att analysera dessa klasser när den bygger platsen

Javascript-funktionen är enkel, den visar bara toast meddelandet för en viss tid och gömmer det igen.

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

Vi kan sedan kalla det för showToast funktion i copyButton.onclick händelse.

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

Jag lade till den här delen på toppen av min _Layout.cshtml file so it's tillgängliga på varje sida.

<partial name="_Toast"  />``

Nu när vi visar bloggposter så har koblocket:

I slutsats

Så det är en enkel förändring i Farazs kod så att den fungerar för mig. Jag hoppas detta hjälper någon annan där ute.