梅花問路

    <div class="meihwa-code-block" style="position: relative; background-color: #f9f4f2; border: 1px solid #d0b7b2; border-radius: 8px; padding: 12px 12px 20px 12px; margin: 16px 5px; box-shadow: 0 1px 5px rgba(208,183,178,0.2); font-family: Calibri, monospace;">

  <!-- 複製按鈕 -->
  <button class="copy-btn" onclick="copyCode(this)" style="position: absolute; top: 8px; right: 10px; padding: 4px 12px; font-size: 12px; background-color: #d0b7b2; color: #fff; border: none; border-radius: 4px; cursor: pointer;">複製</button>

  <!-- 可編輯的 code 區塊，自動換行 -->
  <pre style="margin: 0; font-family: Calibri, monospace; font-size: 13px; line-height: 1.6; background: transparent; border: none;">
    <code contenteditable="true" style="display: block; white-space: pre-wrap; word-break: break-word;">你好世界
日日是好日
天天開心
</code>
  </pre>
</div>

<script>
  function copyCode(button) {
    const code = button.parentElement.querySelector("code");
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(code);
    selection.removeAllRanges();
    selection.addRange(range);

    try {
      document.execCommand("copy");
      selection.removeAllRanges();
      button.innerText = "已複製";
      setTimeout(() => button.innerText = "複製", 2000);
    } catch (err) {
      console.error("複製失敗", err);
    }
  }
</script>