Вступ

На цьому сайті я використовую Hightlight.js для відтворення фрагментів коду на стороні клієнта. Мені це подобається, оскільки мій код на стороні сервера чистий і простий. Однак я хотів додати кнопку копіювання до кожного фрагмента коду, щоб користувачі могли легко копіювати код у кишеню. Це просте завдання, але я думав, що я б написав його тут для будь-кого, хто, можливо, захоче зробити те саме.

О, і це все чекає на те, щоб я додала функціональність інформаційного бюлетеня, щоб насправді з'явитися на сайті. Як тільки я отримаю енергію, щоб зробити це я додам це.

Кінцевим пунктом є копія такої кнопки на сайті: Кнопка " Копіювати "

ЗАУВАЖЕННЯ: вся честь за цю статтю Фараз- Патакарafghanistan. kgm яку я створив ось цю статтю. Я просто хотів документувати зміни, які я зробив тут для себе і щоб поділитися з іншими.

Параметри

Є безліч способів, як це зробити, наприклад, Додаток кнопки копіювання для Хіґлайт.js, але я вирішив, що я хотів би більше контролювати кнопку і праску. Я натрапила на нього. ця стаття за додавання кнопки копіювання.

Проблеми

Хоча ця стаття є чудовим підходом, у ній було кілька питань, які не дали мені бути ідеальним:

Він використовує шрифт, який я не використовую на моєму сайті (але потім вручну також має SVG, не знаю чому).

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

Поки це працює, я вже використовую BoxIcons на цьому сайті, який має Копіювати піктограму вже там.

Тут використовується бібліотека тостів, якої я не маю на цьому сайті.

  // Notify user that the content has been copied
      toast.success("Copied to clipboard", {
        description: "The code block content has been copied to the clipboard.",
      });

Він пробиває потік Y на блокі коду і кладе ікону в дно, якого я не хотів. Отже, моє верхнє право.

Мої адаптації

Головна функція

За допомогою цього додатка можна отримати зв' язки з програмоюName after:highlightElement події і додає кнопку до блоку коду.

Спочатку я переписав кодекс Фараза, а потім зробив такі зміни:

Замість додавання до кінця блоку коду я підготовляю його до початку.
Замість SVG Я використовував версію BoxIcons простим додаванням цих класів до кнопки вставленої і встановленням розміру тексту text-xl.
Я зняв сповіщення про тост і замінив його простим showToast функція, яку я маю на своєму місці (див. пізніше)
Я додав 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` Функція

Це залежить від частини бритви, яку я додав до свого проекту. Цей частковий використовує Тостальний компонент DaisUI для показу повідомлення користувачеві. Мені подобається цей підхід, оскільки він зберігає Javascript чистим і простим і дозволяє мені стильувати тост повідомлення так само, як і решту сайту.

<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 tag в нижній частині, це тільки для Tailwind для обробки цих класів, коли він будує CSS сайта.

Функція 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 function в the copyButton.onclick Замечательно.

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

Я додала цю частину прямо на себе. _Layout.cshtml так что это доступно на каждой странице.

<partial name="_Toast"  />``

Тепер, коли ми показуємо блог дописи, блоки коду мають: Кнопка " Копіювати "

Включення

Ось і все, проста зміна в коді Фараза, щоб він працював для мене. Надеюсь, это поможет кому-то еще.

Кнопка копіювання для підсвічування.js