pre标签增加一个复制代码按钮

要在pre标签中增加一个复制代码的按钮，可以使用JavaScript来实现。以下是一种实现方式：

首先，在pre标签外面添加一个div容器，用于容纳pre标签和复制代码按钮：

<div class="pre-container">
  <pre class="code">这是一段代码</pre>
  <button class="copy-button">复制代码</button>
</div>

然后，使用JavaScript给复制按钮绑定一个单击事件，当按钮被单击时，将pre标签中的文本复制到剪贴板中：

const copyButton = document.querySelector('.copy-button');
const code = document.querySelector('.code');

copyButton.addEventListener('click', () => {
  const range = document.createRange();
  range.selectNode(code);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  selection.removeAllRanges();
});

在上述代码中，我们首先获取了复制按钮和pre标签的引用，然后给复制按钮绑定了一个单击事件。在事件处理程序中，我们创建了一个范围对象，用于表示pre标签中的文本范围。然后，我们使用Window.getSelection()方法获取当前的选区对象，并将范围对象添加到选区中。最后，我们调用Document.execCommand('copy')方法将选区中的文本复制到剪贴板中。

为了让复制按钮的样式更好看一些，你可以使用CSS来美化它。以下是一个简单的示例：

.copy-button {
  padding: 6px 12px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.copy-button:hover {
  background-color: #0069d9;
}

在上述代码中，我们定义了复制按钮的样式，包括背景颜色、边框、圆角等。我们还使用:hover伪类来定义鼠标悬停时的样式。