Кнопка копіювання для підсвічування.js (Українська (Ukrainian))

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

Comments

NOTE: Apart from English (and even then it's questionable, I'm Scottish). These are machine translated in languages I don't read. If they're terrible please contact me.
You can see how this translation was done in this article.

Saturday, 28 September 2024

//

Less than a minute

Вступ

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

Мета

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

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

Параметри

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

Проблеми

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

  1. Він використовує шрифт, який я не використовую на моєму сайті (але потім вручну також має 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 на цьому сайті, який має Копіювати піктограму вже там.

  1. Тут використовується бібліотека тостів, якої я не маю на цьому сайті.
  // Notify user that the content has been copied
      toast.success("Copied to clipboard", {
        description: "The code block content has been copied to the clipboard.",
      });
  1. Він пробиває потік Y на блокі коду і кладе ікону в дно, якого я не хотів. Отже, моє верхнє право.

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

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

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

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

  1. Замість додавання до кінця блоку коду я підготовляю його до початку.
  2. Замість SVG Я використовував версію BoxIcons простим додаванням цих класів до кнопки вставленої і встановленням розміру тексту 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 Функція

Це залежить від частини бритви, яку я додав до свого проекту. Цей частковий використовує Тостальний компонент 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"  />``

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

Включення

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

logo

©2024 Scott Galloway