Code block

A command with a copy button in its corner. The icon turns into a check, and the block stays still.

$ npm install @reuse-sh/interactions

import { createCopyButton } from "@reuse-sh/interactions";
import "@reuse-sh/interactions/styles.css";

// <div class="code">
//   <pre><code>npm install @reuse-sh/interactions</code></pre>
//   <button class="copy" aria-label="Copy command"></button>
// </div>
const block = document.querySelector(".code");
const copy = createCopyButton(block.querySelector(".copy"), {
  getText: () => block.querySelector("code").textContent,
});

import { CopyButton } from "@reuse-sh/interactions/react";
import "@reuse-sh/interactions/styles.css";

export function Command({ command }) {
  return (
    <div className="code">
      <pre><code>{command}</code></pre>
      <CopyButton text={command} className="copy" aria-label="Copy command" />
    </div>
  );
}

Hand this page to your coding agent.

Read https://reuse.sh/copy-button/guide.md and build a code block with a copy button like https://reuse.sh/copy-button/examples/code-block. Keep the principles the guide lists.