Markdown記事のコードブロックにコピーボタンを付ける【rehype-pretty-codeの生HTMLにDOM操作で後付け】

.use(rehypePrettyCode, {
  theme: "one-dark-pro",
  keepBackground: true,
})

<figure data-rehype-pretty-code-figure>
  <pre data-language="tsx" style="background-color: ...">
    <code>...(色付けされた行)...</code>
  </pre>
</figure>

.prose figure[data-rehype-pretty-code-figure] {
  position: relative;
  margin: 1.75rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, black 30%, transparent);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.45);
  background: #282c34;
}

.prose figure[data-rehype-pretty-code-figure]::before {
  content: "";
  display: block;
  height: 2.25rem;
  background-color: #21252b;
  background-image: radial-gradient(
      circle 5px at 18px 50%,
      var(--accent-mauve) 99%,
      transparent
    ),
    radial-gradient(circle 5px at 36px 50%, var(--accent-olive) 99%, transparent),
    radial-gradient(circle 5px at 54px 50%, var(--accent-blue) 99%, transparent);
  background-repeat: no-repeat;
}

.prose figure[data-rehype-pretty-code-figure] pre::after {
  content: attr(data-language);
  position: absolute;
  top: 0;
  /* コピーボタン(.code-copy-button)分のスペースを右側に空けておく */
  right: 3.1rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

"use client";
 
import { useEffect } from "react";
 
export default function CodeCopyButtons() {
  useEffect(() => {
    const figures = document.querySelectorAll<HTMLElement>(
      ".prose figure[data-rehype-pretty-code-figure]"
    );
 
    const cleanups: Array<() => void> = [];
 
    figures.forEach((figure) => {
      // 開発中のHMR再実行や、StrictModeの二重実行で二重追加されるのを防ぐ
      if (figure.querySelector(".code-copy-button")) return;
      const pre = figure.querySelector("pre");
      if (!pre) return;
 
      const button = document.createElement("button");
      button.type = "button";
      button.className = "code-copy-button";
      button.setAttribute("aria-label", "コードをコピー");
      button.innerHTML = COPY_ICON;
      // ...クリック処理(後述)...
      figure.appendChild(button);
    });
 
    return () => {
      cleanups.forEach((fn) => fn());
    };
  }, []);
 
  return null;
}

const handleClick = () => {
  const code = pre.textContent ?? "";
  navigator.clipboard
    .writeText(code)
    .then(() => {
      button.innerHTML = CHECK_ICON;
      button.classList.add("is-copied");
      button.setAttribute("aria-label", "コピーしました");
      clearTimeout(resetTimer);
      resetTimer = setTimeout(() => {
        button.innerHTML = COPY_ICON;
        button.classList.remove("is-copied");
        button.setAttribute("aria-label", "コードをコピー");
      }, 1500);
    })
    .catch(() => {
      // クリップボードAPIが使えない環境(非HTTPS等)では何もしない
    });
};

button.addEventListener("click", handleClick);
figure.appendChild(button);
cleanups.push(() => {
  clearTimeout(resetTimer);
  button.removeEventListener("click", handleClick);
});

.code-copy-button {
  position: absolute;
  top: 0;
  right: 0.6rem;
  height: 2.25rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9199a8;
  background: transparent;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
}
.code-copy-button.is-copied {
  color: var(--accent-olive);
}