Add a copy button to code blocks (#737)

xfq · web-flow · commit ba0f7497381e · 2025-08-10T10:38:23.000+08:00
diff --git a/javascript/boilerplate-text/boilerplate-ar.js b/javascript/boilerplate-text/boilerplate-ar.js
@@ -151,6 +151,9 @@ s.quickanswer = "جواب سريع" // heading
 s.longeranswer = "تفاصيل" // heading that follows 'Quick answer'
 s.additionalinfo = "معلومات إضافية" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "الإنضمام إلى خدمة RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-bg.js b/javascript/boilerplate-text/boilerplate-bg.js
@@ -151,6 +151,9 @@ s.quickanswer = "Бърз отговор" // heading
 s.longeranswer = "Детайли" // heading that follows 'Quick answer'
 s.additionalinfo = "Допълнителна информация" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Абонирай се за RSS фиид."  
diff --git a/javascript/boilerplate-text/boilerplate-de.js b/javascript/boilerplate-text/boilerplate-de.js
@@ -151,6 +151,9 @@ s.quickanswer = "Kurze Antwort" // heading
 s.longeranswer = "Details" // heading that follows 'Quick answer'
 s.additionalinfo = "Weitere Informationen" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Abonnieren Sie unseren RSS-Feed."  
diff --git a/javascript/boilerplate-text/boilerplate-el.js b/javascript/boilerplate-text/boilerplate-el.js
@@ -151,6 +151,9 @@ s.quickanswer = "Quick answer" // heading
 s.longeranswer = "Details" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Εγγραφή σε Τροφοδότη Ειδήσεων RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-en.js b/javascript/boilerplate-text/boilerplate-en.js
@@ -149,6 +149,9 @@ s.quickanswer = "Quick answer" // heading
 s.longeranswer = "Details" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Subscribe to an RSS feed."  
diff --git a/javascript/boilerplate-text/boilerplate-es.js b/javascript/boilerplate-text/boilerplate-es.js
@@ -151,6 +151,10 @@ s.quickanswer = "Respuesta rápida" // heading
 s.longeranswer = "Respuesta extensa" // heading that follows 'Quick answer'
 s.additionalinfo = "Información adicional" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
+
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Suscripción a feed RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-fr.js b/javascript/boilerplate-text/boilerplate-fr.js
@@ -151,6 +151,10 @@ s.quickanswer = "Réponse courte" // heading
 s.longeranswer = "Détails" // heading that follows 'Quick answer'
 s.additionalinfo = "Information complémentaire" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
+
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Abonnez-vous au flux RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-gl.js b/javascript/boilerplate-text/boilerplate-gl.js
@@ -151,6 +151,9 @@ s.quickanswer = "Resposta rápida" // heading
 s.longeranswer = "Detalles" // heading that follows 'Quick answer'
 s.additionalinfo = "Información adicional" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Suscríbete ó RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-he.js b/javascript/boilerplate-text/boilerplate-he.js
@@ -151,6 +151,9 @@ s.quickanswer = "Quick answer" // heading
 s.longeranswer = "Details" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "הירשם להזנת RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-hi.js b/javascript/boilerplate-text/boilerplate-hi.js
@@ -151,6 +151,9 @@ s.quickanswer = "त्वरित उत्तर" // heading
 s.longeranswer = "विवरण" // heading that follows 'Quick answer'
 s.additionalinfo = "अतिरिक्त जानकारी" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "एक आरएसएस फ़ीड की सदस्यता लें।"  
diff --git a/javascript/boilerplate-text/boilerplate-hu.js b/javascript/boilerplate-text/boilerplate-hu.js
@@ -151,6 +151,9 @@ s.quickanswer = "Gyors válasz" // heading
 s.longeranswer = "Részletek" // heading that follows 'Quick answer'
 s.additionalinfo = "További információ" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Feliratkozás az RSS csatornára."  
diff --git a/javascript/boilerplate-text/boilerplate-it.js b/javascript/boilerplate-text/boilerplate-it.js
@@ -151,6 +151,9 @@ s.quickanswer = "Risposta rapida" // heading
 s.longeranswer = "Dettagli" // heading that follows 'Quick answer'
 s.additionalinfo = "Informazioni complementari" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Sottoscrivi il feed RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-ja.js b/javascript/boilerplate-text/boilerplate-ja.js
@@ -151,6 +151,9 @@ s.quickanswer = "端的な回答" // heading
 s.longeranswer = "詳細な回答" // heading that follows 'Quick answer'
 s.additionalinfo = "補足情報" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "RSSフィードを購読する"  
diff --git a/javascript/boilerplate-text/boilerplate-ko.js b/javascript/boilerplate-text/boilerplate-ko.js
@@ -151,6 +151,9 @@ s.quickanswer = "undefined" // heading
 s.longeranswer = "Details" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "RSS feed에 가입합니다."  
diff --git a/javascript/boilerplate-text/boilerplate-nl.js b/javascript/boilerplate-text/boilerplate-nl.js
@@ -151,6 +151,9 @@ s.quickanswer = "Kort antwoord" // heading
 s.longeranswer = "Details" // heading that follows 'Quick answer'
 s.additionalinfo = "Aanvullende informatie" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Abonneer u op een nieuwsfeed."
diff --git a/javascript/boilerplate-text/boilerplate-pes.js b/javascript/boilerplate-text/boilerplate-pes.js
@@ -151,6 +151,9 @@ s.quickanswer = "پاسخ سریع" // heading
 s.longeranswer = "جزئیات" // heading that follows 'Quick answer'
 s.additionalinfo = "اطلاعات اضافی" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "اشتراک در خوراک RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-pl.js b/javascript/boilerplate-text/boilerplate-pl.js
@@ -151,6 +151,9 @@ s.quickanswer = "Krótka odpowiedź" // heading
 s.longeranswer = "Szczegóły" // heading that follows 'Quick answer'
 s.additionalinfo = "Dodatkowe informacje" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Prenumeruj kanał RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-pt-br.js b/javascript/boilerplate-text/boilerplate-pt-br.js
@@ -151,6 +151,9 @@ s.quickanswer = "Resposta resumida" // heading
 s.longeranswer = "Detalhes" // heading that follows 'Quick answer'
 s.additionalinfo = "Informações adicionais" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Subscreva uma alimentação RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-pt.js b/javascript/boilerplate-text/boilerplate-pt.js
@@ -151,6 +151,9 @@ s.quickanswer = "Quick answer" // heading
 s.longeranswer = "Longer answer" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Subscreva uma alimentação RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-ro.js b/javascript/boilerplate-text/boilerplate-ro.js
@@ -151,6 +151,9 @@ s.quickanswer = "Quick answer" // heading
 s.longeranswer = "Longer answer" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Abonează-te la RSS feed."  
diff --git a/javascript/boilerplate-text/boilerplate-ru.js b/javascript/boilerplate-text/boilerplate-ru.js
@@ -151,6 +151,9 @@ s.quickanswer = "Быстрый ответ" // heading
 s.longeranswer = "Подробный ответ" // heading that follows 'Quick answer'
 s.additionalinfo = "Дополнительная информация" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Подпишитесь на ленту новостей RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-sv.js b/javascript/boilerplate-text/boilerplate-sv.js
@@ -151,6 +151,9 @@ s.quickanswer = "Snabbt svar" // heading
 s.longeranswer = "Detaljer" // heading that follows 'Quick answer'
 s.additionalinfo = "Ytterligare information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Prenumerera på en RSS-kanal."  
diff --git a/javascript/boilerplate-text/boilerplate-th.js b/javascript/boilerplate-text/boilerplate-th.js
@@ -151,6 +151,9 @@ s.quickanswer = "Quick answer" // heading
 s.longeranswer = "Longer answer" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "ลงทะเบียนรับข่าวสาร RSS ฟีด"  
diff --git a/javascript/boilerplate-text/boilerplate-tr.js b/javascript/boilerplate-text/boilerplate-tr.js
@@ -151,6 +151,9 @@ s.quickanswer = "Quick answer" // heading
 s.longeranswer = "Details" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Bir RSS akışına abone olun."  
diff --git a/javascript/boilerplate-text/boilerplate-uk.js b/javascript/boilerplate-text/boilerplate-uk.js
@@ -151,6 +151,10 @@ s.quickanswer = "Швидка відповідь" // heading
 s.longeranswer = "Детальна відповідь" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
+
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Підписатися на RSS джерело."  
diff --git a/javascript/boilerplate-text/boilerplate-vi.js b/javascript/boilerplate-text/boilerplate-vi.js
@@ -151,6 +151,9 @@ s.quickanswer = "Quick answer" // heading
 s.longeranswer = "Details" // heading that follows 'Quick answer'
 s.additionalinfo = "Additional information" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "Đăng ký đọc tin RSS."  
diff --git a/javascript/boilerplate-text/boilerplate-zh-hans.js b/javascript/boilerplate-text/boilerplate-zh-hans.js
@@ -151,6 +151,9 @@ s.quickanswer = "简约回复" // heading
 s.longeranswer = "详情" // heading that follows 'Quick answer'
 s.additionalinfo = "更多信息" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "复制"
+s.copied = "已复制！"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "订阅 RSS 提要"  
diff --git a/javascript/boilerplate-text/boilerplate-zh-hant.js b/javascript/boilerplate-text/boilerplate-zh-hant.js
@@ -152,6 +152,9 @@ s.quickanswer = "快速回答" // heading
 s.longeranswer = "細節" // heading that follows 'Quick answer'
 s.additionalinfo = "附加資訊" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "Copy"
+s.copied = "Copied!"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "訂閲 RSS feed."  
diff --git a/javascript/boilerplate-text/make_boilerplate.html b/javascript/boilerplate-text/make_boilerplate.html
@@ -205,6 +205,9 @@
 s.longeranswer = "${ s.longeranswer }" // heading that follows 'Quick answer'
 s.additionalinfo = "${ s.additionalinfo }" // heading that sometimes follows 'Details'
 
+// copy button for code blocks
+s.copy = "${ s.copy }"
+s.copied = "${ s.copied }"
 
 // obsolete in most recent articles — used to be in bottom right box
 s.subscribeToRSS = "${ s.subscribeToRSS }"  
diff --git a/javascript/doc-structure/article-2022.js b/javascript/doc-structure/article-2022.js
@@ -308,4 +308,32 @@ function getURLs () {
 	container.innerHTML = out
 	if (document.querySelector('#endlinks')) document.querySelector('#endlinks').parentNode.appendChild(container)
 	
-	}
+	}
+
+// Simple copy button for code blocks
+document.addEventListener('DOMContentLoaded', function() {
+    const codeBlocks = document.querySelectorAll('pre code');
+
+    codeBlocks.forEach(function(code) {
+        const pre = code.parentElement;
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'copy-btn';
+        copyBtn.textContent = s.copy;
+
+        copyBtn.addEventListener('click', async function() {
+            const text = code.textContent;
+
+            try {
+                await navigator.clipboard.writeText(text);
+                copyBtn.textContent = s.copied;
+                setTimeout(function() {
+                    copyBtn.textContent = s.copy;
+                }, 2000);
+            } catch (err) {
+                console.error('Failed to copy text: ', err);
+            }
+        });
+
+        pre.appendChild(copyBtn);
+    });
+});
diff --git a/style/article-2022.css b/style/article-2022.css
@@ -1131,6 +1131,33 @@ em:lang(pes) {
     }
 
 
+/* Simple copy button for code blocks */
+pre {
+    position: relative;
+}
+
+.copy-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 12px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+pre:hover .copy-btn {
+    opacity: 1;
+}
+
+.copy-btn:hover {
+    background: #e9ecef;
+}
+
 /* ************** specials ********************* */
 
 .dontuse { 
