コード変換ツールとコピーボタン作成コード

貼り付けたい生コードを入力

変換後の表示（コピー可能）

<!-- ✅ 完全版 コピー機能付きコードボックス -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<style>
.code-box {
  position: relative;
  background: #f5f5f5; /* 全体を薄い灰色に統一 */
  border-radius: 12px;
  padding: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  max-height: 500px;
  overflow: auto;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* 薄い影 */
}
.code-box pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f5f5f5; /* 背景を統一 */
  padding: 12px;
  border-radius: 8px;
  border: none;
}
.copy-btn {
  position: sticky; /* スクロール追従 */
  top: 8px;
  right: 8px;
  float: right;
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  background-color: #8224e3; /* 紫色 */
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
.copy-btn:hover { background-color: #6a1fc2; } /* 濃い紫 */
.copy-btn:active { transform: translateY(1px); }
</style>

<div class="code-box">
  <button class="copy-btn">
    <span class="default">コピー</span>
    <span class="done" hidden>コピーしました！</span>
  </button>

  <pre class="copy-target"><code class="language-html">
<!-- 🔽 ここに紹介したいコードをそのまま貼る -->
ここです！
  </code></pre>
</div>

<script>
(() => {
  // HTML特殊文字をエスケープ
  function escapeHTML(str){
    return str.replace(/&/g,"&amp;")
              .replace(/</g,"&lt;")
              .replace(/>/g,"&gt;");
  }

  // 自動エスケープして表示
  document.querySelectorAll(".copy-target").forEach(pre=>{
    pre.dataset.raw = pre.textContent;
    pre.innerHTML = "<code class='language-html'>" + escapeHTML(pre.textContent) + "</code>";
    Prism.highlightElement(pre.querySelector("code")); // Prismでハイライト
  });

  // コピー処理
  async function copyText(text){
    if(navigator.clipboard && window.isSecureContext){
      await navigator.clipboard.writeText(text);
      return true;
    } else {
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly','');
      ta.style.position='fixed';
      ta.style.top='-9999px';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); return true; }
      finally { document.body.removeChild(ta); }
    }
  }

  // コピーイベント
  document.addEventListener('click', async e=>{
    const btn = e.target.closest('.copy-btn');
    if(!btn) return;
    const box = btn.closest('.code-box');
    const target = box.querySelector('.copy-target');
    if(!target) return;

    const ok = await copyText(target.dataset.raw || "");

    const def = btn.querySelector('.default');
    const done = btn.querySelector('.done');

    if(ok){
      def.hidden = true;
      done.hidden = false;
      setTimeout(()=>{ done.hidden=true; def.hidden=false; },1600);
    }
  });
})();
</script>