Add checks for adding the copy button in code-blocks

- adds checks to put copy button for code inside table and highlight code block - Fixes adityatelange#363
kylethedeveloper · Apr 16, 2021 · 31ca3a8 · 31ca3a8
1 parent 687fa25
commit 31ca3a8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/assets/css/common/main.css b/assets/css/common/main.css
@@ -44,7 +44,7 @@ code {
     direction: ltr;
 }
 
-div.highlight {
+div.highlight, pre {
     position: relative;
 }
 
@@ -60,6 +60,7 @@ div.highlight {
     font-size: 14px;
 }
 
-div.highlight:hover .copy-code {
+div.highlight:hover .copy-code,
+pre:hover .copy-code {
     display: block;
 }
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -120,7 +120,17 @@
             selection.removeRange(range);
         });
 
-        container.appendChild(copybutton);
+        if (container.classList.contains("highlight")) {
+            container.appendChild(copybutton);
+        } else if (container.parentNode.firstChild == container) {
+            // td containing LineNos
+        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
+            // table containing LineNos and code
+            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
+        } else {
+            // code blocks not having highlight as parent class
+            codeblock.parentNode.appendChild(copybutton);
+        }
     });
 </script>
 {{- end }}