# 复制突出显示按钮的按钮。 js

<!--category-- DaisyUI, Tailwind, Highlight.js, Javascript -->
<datetime class="hidden">2024-09-28T14:15</datetime>

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

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

# 目标

最后一点是,我们网站上有一个像这样的复制按钮:
![复制按钮](copybutton.png)

**注:本条的所有功用 [法拉兹·帕坦卡尔](https://dev.to/farazpatankar/highlightjs-copy-button-plugin-3dld) 我曾经编造这篇文章的作者 我只想在这里记录我对它所作的修改,以备我自己参考,并与其他人分享。**

[TOC]

# 选项

有几种方法可以做到这一点 比如说 [复制按钮插件](https://github.com/arronhunt/highlightjs-copy) 对于希格莱特.js, 但我决定我 想要更多的控制 按钮和外型。 于是我走到我身边 [本条本条](https://dev.to/farazpatankar/highlightjs-copy-button-plugin-3dld) 用于添加复制按钮。

## 问题

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

1. 它使用的字体不是我在网站上不用的(但是手动手动也有SVG, 不知道为什么) 。

```javascript
  // 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 [已经复制图标](https://icon-sets.iconify.design/bx/copy/).

2. 它用的是这个网站没有的敬酒图书馆

```javascript
  // 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` 按钮上的可访问性(并给它一个漂亮的盘旋效果) 。

```javascript
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 吐司构成部分](https://daisyui.com/components/toast/) 向用户显示消息。
我喜欢这个方法,因为它保持 Javascript 干净和简单 并允许我用与网站其他部分相同的方式 来写祝酒词。

```html
<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 函数很简单, 它只是显示一个固定时间的吐司信息, 然后再次隐藏它 。

```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` 事件 。

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

我加了这个部分右右侧 在我的顶部 `_Layout.cshtml` 因此每页都有文件。

```html
<partial name="_Toast"  />``
```

当我们展示博客时, 代码区块有:
![复制按钮](copybutton.png)

# 在结论结论中

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