一. 导言导言 导言 导言 导言

我在此网站使用“高亮”@.js来编译代码片断客户端 @.}我喜欢这样,因为它能保持服务器侧码的干净和简单\ .}然而我还想在每个代码片段上添加一个复制按钮,让用户可以很容易地将代码拷贝到他们的剪贴板.}这任务很简单 但我认为我会在这里记录给其他想要做同样动作的人看.

目标

端点是网站上有一个像这样的复制按钮@: @%

注:: 法拉兹·帕坦卡尔 我想记录我在这里对它所做的修改, 供我自己参考并与其他人分享@.}

选项

有几种方法可以做到这一点,例如: 复制按钮插件 对于 Higlight.js 但我决定我要更多控制按钮 和发型的按键 本条 添加复制按钮@. @%

问题

虽然这篇文章是一个伟大的方法, 它有一些问题 阻止它成为完美的MYZ:

1. 它使用一个字型, 我用在网站上的@' @t@ (}(但手动拥有 SVG too,} * 不知道为什么%).}

  // 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 。 已经复制图标.

2. 它使用一个烤面包图书馆,我用它做''}这个网站没有#.

  // 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. 它击倒了代码块上的y-overflow 并把图标放在底部 我当时在"'}不要"MSSK2" 所以我的右上方是.

我的适应

主要职能

此插件勾勾到 after:highlightElement 并添加一个按钮到代码区块@. @%

所以我首先复制了法拉兹'的代码 然后做了以下修改

1. 而不是把它附加到代码区块的末端... ...我把它放在开始.上
2. SVG I 使用 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 函数职能功能

这取决于我在我的项目中加了一个剃刀片部分 此部分使用 DisisiUI 吐司构成部分 以显示给用户的信件@. @% 我喜欢这个方法,因为它保持 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 标签的底部@,}这是由尾风在建立站点时解析这些类。 @ '_%s 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 函数中 copyButton.onclick 事件@. @

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

我在上面加了这个部分右侧 _Layout.cshtml @ .} @ label

<partial name="_Toast"  />``

当我们展示博客时, 代码区块有#:

在结论中的结论

因此,这是对法拉兹的简单修改 使它为我服务 我希望这能帮助别人