[FEAT] : Add a Copy Button for Code Blocks

[KeepQuite-cyber]

Please read this first:

This is the issue tracker for the website at djangoproject.com, not for Django itself.

If you are looking for help or support with using Django, please follow the links in our documentation.

If you want to submit a bug report or a feature request to Django (including documentation), you can find instructions here.

If you want to report a bug on translations in Django or djangoproject.com, please use Transifex.

Description :-

Currently, code snippets displayed in the documentation require users to manually select and copy each line of code.

Problem :-

When viewing code examples, there is no quick way to copy the entire code block. Users must manually highlight the code, which becomes inconvenient for larger examples.

Proposed Solution :-

Add a "Copy" button at the top-right corner of every code block. When clicked:

• The entire code block should be copied to the clipboard.
• A success message such as "Copied!" should be displayed briefly.
• The button should work on desktop and mobile devices.

Benefits :-

• Improves user experience.
• Speeds up copying code examples.
• Reduces the chance of missing lines while copying.

Mockup :

Current :

Proposed :

If this feature request is accepted, I'd be happy to work on an implementation and submit a pull request.

[adamzap]

The documentation already has a copy button for code blocks. It seems like you are referring to the code snippets on the Getting Started with Django page.

I don't think those are intended to be copied. The tutorial linked from that page is a better place to try out an actual project.

I'm curious if others agree.