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

在这个网站,我用高亮点js 来制作代码片断客户端。 我喜欢这样,因为它保持我的服务器 侧代码干净和简单。 然而,我想在每个代码片段上添加一个复制按钮,这样用户就可以很容易地将代码复制到剪贴板上。 这是一项简单的任务,但我想我在这里为可能希望这样做的其他人记录下来。

哦,这一切都在等着我 添加通讯功能 真正出现在网站上。 一旦我得到能量 做到这一点,我会增加这一点。

最后一点是,我们网站上有一个像这样的复制按钮:

注:本条的所有功用 法拉兹·帕坦卡尔 我曾经编造这篇文章的作者 我只想在这里记录我对它所作的修改,以备我自己参考,并与其他人分享。

选项

有几种方法可以做到这一点 比如说 复制按钮插件 对于希格莱特.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 已经复制图标.

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 -overflows 并把图标放在底部 我并不想。 所以,我的右上角是右上角。

我的适应

主要职能

此插插件勾勾到 after:highlightElement 并添加一个按钮到代码块中。

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

1. 而不是把它附在代码区块的结尾 我把它附在开始。
2. 取代 SVG I 的 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 在底部的标签, 这只是由尾风在建立网站的 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 因此每页都有文件。

<partial name="_Toast"  />``

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

在结论结论中

法拉兹的代码有了简单的改变 使它为我工作 我希望这对外面的其他人有帮助