Fixed copy button on code blocks

bamr87 · May 16, 2024 · 1ed1f15 · 1ed1f15
1 parent b84cbbc
commit 1ed1f15
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 29 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -16,6 +16,7 @@
 <script src="/assets/js/back-to-top.js"></script>
 <script src="/assets/js/halfmoon.js"></script>
 <script src="/assets/js/side-bar-folders.js"></script>
+<script src="/assets/js/code-copy.js"></script>
 
 
 <!-- third party scripts -->

diff --git a/_sass/it-journey/code-copy.scss b/_sass/it-journey/code-copy.scss
@@ -1,13 +1,16 @@
 // https://remarkablemark.org/blog/2021/06/01/add-copy-code-to-clipboard-button-to-jeyll-site/
 
-.gist {
-    td {
-      border: inherit; // fix Skeleton override
-    }
-  }
-
   //Codeblock 
-
+
+.copy-code {
+  display: inline-block;
+  margin: 0 0.5em;
+  padding: 0.5em 1em;
+  color: white;
+  background-color: black;
+  border: none;
+  cursor: pointer;
+}
 
   pre.highlight {
     padding: 8px 12px;
@@ -88,25 +91,11 @@ pre>code {
   white-space: pre;
 }
 
-.btn-clipboard {
-  position: relative;
-  z-index: 2;
-  margin-top: .75rem;
-  margin-right: .75rem
-}
 
-.bd-clipboard,.bd-edit {
-  position: relative;
+pre.has-copy-button .copy {
   display: none;
-  float: right
-}
-
-.bd-clipboard+.highlight,.bd-edit+.highlight {
-  margin-top: 0
 }
 
-@media (min-width: 768px) {
-  .bd-clipboard,.bd-edit {
-      display:block
-  }
+pre.has-copy-button:hover .copy {
+  display: inline-block;
 }
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -18,6 +18,5 @@
 
 // Custom Features
 @import "it-journey/code-copy";
-@import "it-journey/clipboard-js";
 @import "it-journey/syntax";
 
diff --git a/assets/js/code-copy.js b/assets/js/code-copy.js
@@ -1,6 +1,5 @@
-// Copy code to clipboard
-
-document
+document.addEventListener('DOMContentLoaded', function () {
+  document
     .querySelectorAll('pre.highlight')
     .forEach(function (pre) {
       var button = document.createElement('button');
@@ -18,4 +17,6 @@ document
         }, 4000);
       });
       pre.appendChild(button);
-    });
+      pre.classList.add('has-copy-button'); // Add a class to the pre element
+    });
+});