NOTE: Apart from
(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, але я вирішив, що я хотів би більше контролювати кнопку і праску. Я натрапила на нього. ця стаття за додавання кнопки копіювання.
Хоча ця стаття є чудовим підходом, у ній було кілька питань, які не дали мені бути ідеальним:
// 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.",
});
За допомогою цього додатка можна отримати зв' язки з програмоюName after:highlightElement
події і додає кнопку до блоку коду.
Спочатку я переписав кодекс Фараза, а потім зробив такі зміни:
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" />``
Тепер, коли ми показуємо блог дописи, блоки коду мають:
Ось і все, проста зміна в коді Фараза, щоб він працював для мене. Надеюсь, это поможет кому-то еще.