Copyable Snippet

Use the data-mr-copyable attribute on any <pre> element that wraps a <code> block to enable automatic copy functionality. A copy button will be injected automatically if not already present.

Example usage:

<pre data-mr-copyable><code>
    npm install my-package
</code></pre>

Rendered snippet:

npm install my-package

When the copy button is clicked, the visible text inside the <code> block is copied to the clipboard. If the Clipboard API is unavailable, a fallback method is used. The generated button has an accessible label and reports success/failure through that label. Without JavaScript the code block remains ordinary readable HTML.