✂️ copy-code-snippet - Instantly Add “Copy” Buttons to Your Code Blocks with Zero Dependencies

✨ Introduction

If you’ve ever written technical content, documentation, or tutorials, you know how helpful it is to let readers quickly copy code examples. But manually wiring up copy buttons or relying on bloated libraries can be a pain.

That’s why I built copy-code-snippet — a lightweight JavaScript utility that automatically adds “Copy” buttons to your <pre><code> blocks. No dependencies, no frameworks, no fuss.

🚀 Features

• ✅ Automatically detects and enhances <pre><code> blocks

• ✅ Adds “Copy” buttons on hover or load

• ✅ Uses the modern Clipboard API

• ✅ Configurable button text, timeout, styling, and placement

• ✅ Default styling included — or use your own

• ✅ Tiny footprint (just a few KB)

• ✅ Works in all modern browsers

---

📦 How to Use

1. Use via CDN (Perfect for blogs and static sites)

<script src="https://cdn.jsdelivr.net/npm/copy-code-snippet@1.0.7"></script>
<script>
  copyCodeSnippet(); // Initializes the buttons
</script>

2. Or install via NPM

npm install copy-code-snippet

Then import and use in your app:

import copyCodeSnippet from 'copy-code-snippet';

copyCodeSnippet(); // Run without config, or pass options

---

⚙️ Configuration Options

You can customize behavior by passing an options object:

copyCodeSnippet({
  selector: 'pre code',             // Target code blocks
  buttonText: 'Copy',               // Label before click
  copiedText: 'Copied!',            // Label after copying
  timeout: 2000,                    // Delay before resetting label
  buttonClassName: 'copy-btn',      // Custom class for button
  position: 'top-right',            // top-left or top-right
  disableDefaultStyle: false        // Set to true to use your own CSS
});

---

🎨 Styling

The library comes with default styles for the copy button. If you prefer to use your own styles, set disableDefaultStyle: true and define your own .copy-btn class.

Example:

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 10px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

---

🧪 Example

<pre>
  <code>
    const hello = 'world';
    console.log(hello);
  </code>
</pre>

Once copyCodeSnippet() runs, a button is automatically added above the code block, allowing users to copy the snippet with one click. ✅

---

💡 Why I Built It

I was writing documentation for a side project and found it annoying to add copy buttons manually. Existing solutions were often tied to frameworks or came with a lot of overhead. I just wanted something simple and flexible.

So I built this tool as a standalone, framework-agnostic utility that works anywhere JavaScript runs — from React apps to static HTML pages.

---

🔗 Links

• 📦 npm: copy-code-snippet

• 🌐 CDN: https://cdn.jsdelivr.net/npm/copy-code-snippet@1.0.7

• 🛠 GitHub: github.com/Danikoko/copy-code-snippet

---

🤝 Open Source Contributions Welcome

This is an open source project, and I’d love for others to help improve it. Whether it's fixing edge cases, improving accessibility, or adding new features — contributions are more than welcome.

Check out the GitHub repo and feel free to open an issue or submit a pull request!

---

🙏 Thanks for Reading!

If you found this library useful, give it a ⭐️ on GitHub, and feel free to share it with anyone building documentation or writing technical content.

You can reach me on:

• GitHub: @danikoko

• Twitter: @iam_danikoko

Happy coding! 🎉