<div class="code-block">

 <button class="copy-btn" data-clipboard-target=".code">复制</button>

 <pre><code class="javascript code">

这里输入代码

 </code></pre>

</div>

<!-- 全局样式和脚本 -->

<style>

 /* 黑色主题样式 */

 .code-block {

  position: relative;

  background: #1e1e1e; /* 深灰色背景 */

  border-radius: 5px;

  padding: 1em;

  margin: 1em 0;

  color: #d4d4d4; /* 浅灰色文本 */

 }

 /* 代码高亮样式覆盖 */

 .code-block code {

  color: #d4d4d4; /* 确保代码文本可见 */

  background: transparent !important; /* 移除默认背景 */

 }

 .copy-btn {

  position: absolute;

  right: 10px;

  top: 10px;

  padding: 5px 10px;

  background: #3a3a3a; /* 深色按钮 */

  color: #ffffff; /* 白色文字 */

  border: none;

  border-radius: 3px;

  cursor: pointer;

  font-size: 12px;

  transition: background 0.2s;

 }

 .copy-btn:hover {

  background: #4a4a4a; /* 悬停时稍亮 */

 }

</style>

<!-- 使用适合深色背景的highlight.js主题 -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>

<script>

 document.addEventListener('DOMContentLoaded', () => {

  // 初始化代码高亮

  hljs.highlightAll();

  // 初始化复制功能

  new ClipboardJS('.copy-btn', {

   text: function(trigger) {

    return trigger.nextElementSibling.querySelector('code').innerText;

   }

  });

  // 按钮交互效果

  document.querySelectorAll('.copy-btn').forEach(btn => {

   btn.addEventListener('click', () => {

    btn.textContent = '已复制!';

    btn.style.background = '#5cb85c'; /* 成功时的绿色 */

    setTimeout(() => {

     btn.textContent = '复制';

     btn.style.background = '#3a3a3a'; /* 恢复原色 */

    }, 2000);

   });

  });

 });

</script>