Zero-dependency JavaScript utility that automatically adds “Copy” buttons to your <pre><code> blocks — perfect for blogs, docs, and any site that displays code.
- ✅ Automatically detects and enhances
<pre><code>blocks - ✅ Copies code to clipboard with one click
- ✅ “Copied!” feedback with optional timeout
- ✅ Works out of the box — no frameworks required
- ✅ Fully customizable via options and CSS
- ✅ Built-in default styling, or use your own styles
- ✅ Tiny footprint & browser-compatible
Try it live: Demo Page
<script src="https://cdn.jsdelivr.net/npm/copy-code-snippet@1.0.7"></script>
<script>
copyCodeSnippet(); // Initializes and applies to all code blocks
</script>npm install copy-code-snippetimport copyCodeSnippet from 'copy-code-snippet';
copyCodeSnippet(); // Or pass optionscopyCodeSnippet({
selector: 'pre code', // CSS selector for code blocks
buttonText: 'Copy', // Button label before copying
buttonClassName: 'copy-btn', // CSS class for the button
copiedText: 'Copied!', // Label after click
timeout: 2000, // Time in ms before reverting label
position: 'top-right', // Button placement: 'top-right' or 'top-left'
disableDefaultStyle: false, // Inject default styling automatically (true = disable)
});Note: All options are optional — sensible defaults are applied.
- The library will automatically inject a default style block unless you set
disableDefaultStyle: true. - This allows quick use with no extra CSS required.
Default styling:
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
padding: 5px 10px;
font-size: 12px;
background: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
z-index: 100;
}
.copy-btn:hover {
background: #555;
}-
If you want full control over styling:
- Set
disableDefaultStyle: true - Provide your own styles for
.copy-btn
- Set
Example:
copyCodeSnippet({
disableDefaultStyle: true,
buttonClassName: 'my-custom-copy-btn',
});.my-custom-copy-btn {
position: absolute;
top: 8px;
right: 8px;
padding: 6px 12px;
font-size: 14px;
background: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.my-custom-copy-btn:hover {
background: #0056b3;
}<pre>
<code class="language-js">
const hello = 'world';
console.log(hello);
</code>
</pre>Fully supported in all modern browsers that implement the Clipboard API:
- Chrome
- Firefox
- Safari
- Edge
PRs welcome! Whether you're improving performance, adding features, or enhancing styling options — contributions are appreciated.
- Fork this repo
- Create your feature branch (
git checkout -b feature/my-feature) - Commit your changes
- Push to the branch
- Open a Pull Request
Made with ❤️ by Daniel Enamudu GitHub: @danikoko Twitter: @iam_danikoko