<div class="code-container">
  <div class="code-header">
    <span>代码展示</span>
    <button class="copy-btn" onclick="copyCode(this)">复制</button>
  </div>
  <pre><code>您的代码粘贴在这里...
多行代码也可以...
</code></pre>
</div>

<style>
/* 代码框容器 */
.code-container {
  background: #282c34; /* 深色背景，类似 VS Code */
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
  font-family: 'Consolas', 'Monaco', monospace;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 顶部标题栏 */
.code-header {
  background: #21252b;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #abb2bf;
  font-size: 13px;
}

/* 复制按钮 */
.copy-btn {
  background: #4a4f5a;
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: 0.2s;
}
.copy-btn:hover { background: #61afef; }

/* 代码内容区 */
.code-container pre {
  margin: 0;
  padding: 15px;
  overflow-x: auto; /* 横向滚动 */
  white-space: pre; /* 保持原样换行 */
  color: #e06c75; /* 代码文字颜色 */
}

.code-container code {
  font-family: inherit;
  color: #98c379; /* 也可以改为白色 #ffffff */
}
</style>

<script>
function copyCode(btn) {
  const code = btn.parentElement.nextElementSibling.innerText;
  navigator.clipboard.writeText(code).then(() => {
    btn.innerText = '已复制!';
    setTimeout(() => { btn.innerText = '复制'; }, 2000);
  });
}
</script>