add code copying js button

Author: RayCC51

assets/codecopy.js

@@ -0,0 +1,26 @@
+// Copy button for code block
+const codes = document.querySelectorAll('div.code-container');
+
+codes.forEach(item => {
+  // Container style
+  item.setAttribute("style", "position: relative;");
+
+  // Create button
+  const copyBtn = document.createElement('button');
+  copyBtn.textContent = 'Copy';
+  copyBtn.setAttribute("style", "position: absolute; top: 0; right: 0; z-index: 3; background: var(--background-color); color: var(--main-theme); border: none;");
+
+  // Add event
+  copyBtn.addEventListener("click", () => {
+    navigator.clipboard.writeText(copyBtn.previousElementSibling.textContent).then(() => {
+      copyBtn.textContent = "Copied!"
+      setTimeout(() => {
+        copyBtn.textContent = "Copy"
+      }, 1000)
+    })
+  });
+
+  // Add element
+  item.appendChild(copyBtn);
+})
+

bw.sh

@@ -42,6 +42,8 @@ CUSTOM_HTML_HEAD="
 <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"$BASE_URL/assets/favicon_io/favicon-32x32.png\">
 <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"$BASE_URL/assets/favicon_io/favicon-16x16.png\">
 <link rel=\"manifest\" href=\"$BASE_URL/assets/favicon_io/site.webmanifest\">
+
+<script src=\"$BASE_URL/assets/codecopy.js\" defer></script>
 "
 
 ### Write your own HTML code.
@@ -333,8 +335,8 @@ MOD=$(echo "$MOD" | sed -E '
     s/</\&lt;/g
     s/>/\&gt;/g
     
-    s/```([a-zA-Z0-9_]+)?\n/<pre><code class="language-\1">\n/
-    s/```/<\/code><\/pre>/
+    s/```([a-zA-Z0-9_]+)?\n/<div class="code-container">\n<pre><code class="language-\1">\n/
+    s/```/<\/code><\/pre>\n<\/div>/
     s/(<pre><code class="language-)">/\1plaintext">/
 
     s/`/\\`/g
@@ -373,7 +375,7 @@ MOD=$(echo "$MOD" | sed -E '
     s/\^/\&caret;/g
     s/^:/\&colon;/
 
-    s/^(.*)$/<\1>/
+    s/^(.*)$/<<\1>>/
   }
 ')
 
@@ -632,8 +634,8 @@ MOD=$(echo "$MOD" | sed -E '
 
 # fixing codeblock for p
 MOD=$(echo "$MOD" | sed -E '
-  /^<<pre>/,/<\/pre>>$/ {
-    s/^<(.*)>$/\1/
+  /^<<<pre>/,/<\/pre>>>$/ {
+    s/^<<(.*)>>$/\1/
   }
 ')
 

write/codecopy.md

@@ -0,0 +1,69 @@
+---
+title: Code copy JS
+description: Add simple code copy button with js
+date: 2025-04-28
+tags: js tutorial sample
+---
+
+```
+sample
+code
+block
+```
+
+## 1. Add a \<script\> tag inside the `CUSTOM\_HTML\_HEAD` variable
+
+*bw.sh*
+
+```md
+CUSTOM_HTML_HEAD="
+<script src=\"$BASE_URL/assets/codecopy.js\" defer></script>
+"
+```
+
+## 2. Create `codecopy.js` file in the *assets/*
+
+```
+your-blog/
+├─ assets/
+│  ├─ codecopy.js    <<< New!
+├─ write/
+├─ bw.sh
+```
+
+## 3. Wirte codes in `codecopy.js`
+
+*assets/codecopy.js*
+
+```js
+// Copy button for code block
+const codes = document.querySelectorAll('div.code-container');
+
+codes.forEach(item => {
+  // Container style
+  item.setAttribute("style", "position: relative;");
+
+  // Create button
+  const copyBtn = document.createElement('button');
+  copyBtn.textContent = 'Copy';
+  copyBtn.setAttribute("style", "position: absolute; top: 0; right: 0; z-index: 3; background: var(--background-color); color: var(--main-theme); border: none;");
+
+  // Add event
+  copyBtn.addEventListener("click", () => {
+    navigator.clipboard.writeText(copyBtn.previousElementSibling.textContent).then(()
+=> {
+      copyBtn.textContent = "Copied!"
+      setTimeout(() => {
+        copyBtn.textContent = "Copy"
+      }, 1000)
+    })
+  });
+
+  // Add element
+  item.appendChild(copyBtn);
+})
+```
+
+## 4. Save the file and run `./bw.sh b`
+
+Fin!