encode/django-rest-framework
1
1
Fork 0
mirror of https://github.com/encode/django-rest-framework.git synced 2026-01-10 18:50:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add copy button to code blocks for improved documentation usability

Browse Source
This commit is contained in:
Shrikant Giri 2025-11-21 15:14:21 +05:30
parent 2556850c5a
commit 082b6b6b58
2 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs_theme/css/copy-button.css
View File

@ -2,19 +2,29 @@
position: absolute;
top: 6px;
right: 6px;
font-size: 12px;
padding: 2px 6px;
cursor: pointer;
background: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 3px;
color: #dc322f !important;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
z-index: 10;
white-space: nowrap; /* Prevent text wrap */
}
/* Ensure the PRE container provides positioning context */
pre {
position: relative;
padding-top: 35px; /* Room for the button */
overflow-x: auto; /* Allow horizontal scrolling */
}
/* Code block scrollable */
pre code {
display: block;
overflow-x: auto;
}
/*
The MkDocs/DRF theme injects a <span> inside buttons and applies
a text color that overrides btn-inverse defaults.
This override is intentionally scoped and limited to color only.
*/
.copy-block-button,
.copy-block-button span {
color: #dc322f !important;
color: #ffffff !important;
}

15
docs_theme/js/copy-button.js
View File

@ -1,15 +1,20 @@
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("pre > code").forEach(function (codeBlock) {
const button = document.createElement("button");
button.className = "copy-block-button";
button.className = "copy-block-button btn btn-inverse btn-small";
button.type = "button";
button.textContent = "Copy";
button.addEventListener("click", function () {
navigator.clipboard.writeText(codeBlock.textContent).then(function () {
button.textContent = "Copied!";
setTimeout(() => button.textContent = "Copy", 1200);
});
navigator.clipboard.writeText(codeBlock.textContent)
.then(() => {
button.textContent = "Copied!";
setTimeout(() => button.textContent = "Copy", 1200);
})
.catch(() => {
button.textContent = "Failed";
setTimeout(() => button.textContent = "Copy", 1200);
});
});
const pre = codeBlock.parentNode;