🔥 Enhance Your Code Snippets with a Copy Feature on Your Web Pages! 🎉

Did you know that you can easily add a "Copy Code" button to your web pages, making it more convenient for users to copy code snippets with a single click? This not only improves user experience but also encourages sharing and collaboration. Check out this stylish code block example that you can use for your website!

▎Available Features:

• 📝 Code Display — Show code within a beautifully styled container. 
• 🖱️ Copy Button — Add a button that allows users to copy the code to their clipboard seamlessly. 
• 🎨 Custom Styling — Tailor the design and functionality to match your website's aesthetic. 

▎Example Code:




 
 
  Code Block Example
 
 
    body {
      font-family: Arial, sans-serif;
      background-color: #1e1e2f;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .code-container {
      position: relative;
      background: #2d2d3d;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      padding: 16px;
      max-width: 600px;
      width: 100%;
      color: #d6deeb;
    }

    .code-container pre {
      margin: 0;
      overflow-x: auto;
    }

    .copy-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      background: #4a4a6a;
      border: none;
      color: white;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.3s;
    }

    .copy-btn:hover {
      background: #5e5e8a;
    }

    .copied {
      background: #4caf50;
    }
 
 


 
    Copy Code
   
const App = () => {
  return (
    App
  );
};

export default App;
   
 

 
    const copyBtn = document.getElementById("copyBtn");
    const code = document.querySelector("pre code").innerText;

    copyBtn.addEventListener("click", () => {
      navigator.clipboard.writeText(code).then(() => {
        copyBtn.textContent = "Copied!";
        copyBtn.classList.add("copied");

        // Reset the button after 2 seconds
        setTimeout(() => {
          copyBtn.textContent = "Copy Code";
          copyBtn.classList.remove("copied");
        }, 2000);
      }).catch((err) => {
        console.error("Failed to copy: ", err);
      });
    });
 



▎How to Use:

1. Copy the HTML and JavaScript code above into your web page.

2. Add the "Copy Code" button and style it as needed.

3. Customize the code snippet inside the block to fit your needs.
      
4. Test the "Copy Code" functionality and enjoy the easy-to-use feature!

Try it out and let us know if it enhances your website's user experience! 🎉

⚠️ Give credit if you are posting on your channel. 
👨‍💻 Created By: @Swastik_Raj
© Credit: @Privates_Bots