📋 Feature: Add Copy to Clipboard Button on Code Blocks in Documentation

[savniagrawal1701]

📋 Feature Request: Add Copy to Clipboard Button on Code Blocks in Documentation

Current Behavior

Documentation pages across all subjects contain code blocks (C programs, Java code, Python snippets etc.) but there is no copy button. Users have to manually select all the code, which is tedious especially on mobile where text selection is difficult.

Expected Behavior

A Copy button should appear on every code block that:

• Copies the code to clipboard with one click
• Shows visual feedback confirming the copy was successful
• Works on all browsers and mobile devices

Proposed Solution

1. Copy Button on Each Code Block
Add a copy icon button at top right corner of every <pre> or <code> block:

┌────────────────────────── [📋 Copy] ┐
| #include <stdio.h>              |
| int main() {                    |
|   printf("Hello World");        |
| }                               |
└───────────────────────────────┘

2. Success Feedback
After clicking:

• Button text changes to ✅ Copied! for 2 seconds
• Then resets back to 📋 Copy

Why This Matters

• Students frequently copy code from documentation to practice
• Manual text selection is error-prone and frustrating
• Copy button is a standard feature on all major doc sites like MDN, W3Schools, GeeksforGeeks
• Especially important on mobile where text selection is difficult

Tech Involved

• JavaScript (Clipboard API)
• CSS (button positioning and styling)

---

I am a GSSoC '26 contributor and would love to work on this issue. Please assign it to me! 🙏

[savniagrawal1701]

hii @pushkarscripts please assign this issue to me