Skip to content

Add copy button to code blocks in documentation#9830

Merged
browniebroke merged 5 commits intoencode:mainfrom
Shrikantgiri25:add-copy-button-to-code-blocks
Dec 15, 2025
Merged

Add copy button to code blocks in documentation#9830
browniebroke merged 5 commits intoencode:mainfrom
Shrikantgiri25:add-copy-button-to-code-blocks

Conversation

@Shrikantgiri25
Copy link
Copy Markdown
Contributor

@Shrikantgiri25 Shrikantgiri25 commented Nov 21, 2025

Description

Currently, code blocks in the DRF documentation must be copied manually. This PR introduces a “Copy” button for code blocks to improve usability.

Scope: Docs-only improvement — does not modify DRF library or API.

Implementation:

Files and Purpose:

1. css/copy-button.css – Styles the copy button, positions it inside code blocks, and applies DRF’s red theme color for consistency.

2. js/copy-button.js – Adds a “Copy” button to each <pre><code> block, handles the clipboard copy functionality, and provides user feedback (“Copied!”).
 
3. mkdocs.yml – Registers the CSS and JS files so they are loaded with the documentation.
 
4.  main.html – Ensures the extra CSS is included in the page layout.

Discussion - #9829

Screenshots:
image

image

@p-r-a-v-i-n
Copy link
Copy Markdown
Contributor

I may be completely wrong here, but adding new features or code formatting changes is not allowed according to the DRF policy. This would violate the DRF policy.
As per the policy, DRF is already feature complete. though the requested feature relates to the documentation, it involves code changes, so I don't think it will be accepted.

@Shrikantgiri25
Copy link
Copy Markdown
Contributor Author

I may be completely wrong here, but adding new features or code formatting changes is not allowed according to the DRF policy. This would violate the DRF policy.
As per the policy, DRF is already feature complete. though the requested feature relates to the documentation, it involves code changes, so I don't think it will be accepted.

Thanks for the feedback.
This PR doesn’t introduce any DRF features or library changes.
It only updates the documentation theme (CSS/JS), and DRF’s contributing guide explicitly states that documentation improvements are welcome.
If the maintainers prefer to avoid UX changes in the docs, I’m happy to follow their direction.

Copy link
Copy Markdown
Member

@browniebroke browniebroke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very cool! I noted a few things

Comment thread docs_theme/css/copy-button.css Outdated
Comment thread docs_theme/css/copy-button.css
Comment thread docs_theme/css/copy-button.css
browniebroke
browniebroke previously approved these changes Dec 8, 2025
@browniebroke browniebroke changed the title Add copy button to code blocks Add copy button to code blocks in documentation Dec 15, 2025
@browniebroke browniebroke merged commit 055c422 into encode:main Dec 15, 2025
7 checks passed
@browniebroke
Copy link
Copy Markdown
Member

Just tweaked the button size as I found out there was a smaller variant. Looks good to me otherwise. Thanks

@Shrikantgiri25
Copy link
Copy Markdown
Contributor Author

Just tweaked the button size as I found out there was a smaller variant. Looks good to me otherwise. Thanks

Thanks! @browniebroke The tweak looks nice 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants