让实现HTML展示类似ghub的功能代码框增加复制按钮 小放在代码框右上角

以下是一个示例代码：

HTML代码：

<pre>
  <code class="language-javascript">
    function sayHello() {
      console.log("Hello World!");
    }
  </code>
  <button class="copy-btn">Copy</button>
</pre>

CSS代码：

pre {
  background-color: #f6f8fa;
  border-radius: 3px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.45;
  overflow: auto;
  padding: 16px;
}

pre code {
  display: block;
  overflow-x: auto;
  white-space: pre;
}

pre code::before,
pre code::after {
  content: "";
}

pre code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  text-shadow: none;
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
  background: #b3d4fc;
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
  background: #b3d4fc;
}

/* Copy button */

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 8px;
  cursor: pointer;
}

.copy-btn:hover {
  background-color: #555;
}

.copy-btn:focus {
  outline: none;
}

JavaScript代码：

const copyBtn = document.querySelector('.copy-btn');
const codeBlock = document.querySelector('pre code');

copyBtn.addEventListener('click', () => {
  const code = codeBlock.innerText;
  const textarea = document.createElement('textarea');
  textarea.value = code;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
});

通过以上代码，我们就可以实现HTML展示类似ghub的功能了，用户可以在代码框右上角找到复制按钮，将代码复制到剪切板中，方便用户进行复制和粘贴操作