clipboard icon positioning

assets/sass/components/_related.scss

@@ -15,15 +15,15 @@
     }
   }
 
-  &-ul {
-    @include align-self(center);
-    list-style-type: disc;
-  }
-
   &__link {
     font-size: 16.8px;
     @include themify($themes) {
       color: themed('related-link-color');
     }
   }
+
+  &-ul {
+    @include align-self(center);
+    list-style-type: disc;
+  }
 }

assets/sass/pages/_single.scss

@@ -165,6 +165,17 @@
     .chroma .copy-to-clipboard:hover {
       @include translateY(-0.1rem);
     }
+    .language-code .copy-to-clipboard {
+      position: absolute;
+      right: 4px;
+      top: 5px;      
+      border-radius: 2px;
+      z-index: 1;
+      @include transition(all, 0.2s, ease);
+    }
+    .language-code .copy-to-clipboard:hover {
+      @include translateY(-0.1rem);
+    }
 
     blockquote {
       margin: 0 1.75rem 1.75rem 1.5rem;
@@ -332,7 +343,7 @@ pre:not(.chroma) {
 }
 
 .single__contents > .language-code {
-  overflow: auto;
+  overflow-x: auto;
   position: relative;
   margin: 1em 0;
 
@@ -354,45 +365,15 @@ pre:not(.chroma) {
         background: themed('content-pre-header-background-color');
     }
   }
-
-  .copy-to-clipboard {
-    position: absolute;
-    right: 4px;
-    top: 5px;
-    border-radius: 2px;
-    z-index: 1;
-    @include transition(all, 0.2s, ease);
-  }
-
-  .copy-to-clipboard:hover {
-    @include translateY(-0.1rem);
-  }
-
-  .chroma .copy-to-clipboard {
-    position: absolute;
-    right: 4px;
-    top: 5px;      
-    border-radius: 2px;
-    z-index: 1;
-    @include transition(all, 0.2s, ease);
-  }
-  
-  .chroma .copy-to-clipboard:hover {
-    @include translateY(-0.1rem);
-  }
-}
-
-// chroma
-div.chroma {
-  overflow: auto;
 }
 
 .highlight > .chroma {
   margin: 1em 0;
   border-radius: 5px;
-  overflow-x: auto;
   box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
   position: relative;
+  overflow-x: auto;
+
   @include themify($themes) {
     color: themed('content-pre-color');
     background: themed('content-pre-background-color');
@@ -402,9 +383,6 @@ div.chroma {
     padding: 0;    
   }
 
-  table {
-    position: relative;
-
   &::after {
     position: absolute;
     top: 0;
@@ -420,7 +398,6 @@ div.chroma {
     }
     content: attr(data-lang);
   }
-  }
 
   .lntd {
     // Fix code block null line height and
@@ -443,20 +420,20 @@ div.chroma {
       pre {
         margin: 0;
         padding: 34px 4px 6px;
-        &::after {
-          content: 'Code';
-          position: absolute;
-          top: 0;
-          right: 0;
-          left: 0;
-          height: 31px;
-          padding: 5px 7px;
-          font-size: $code-font-size;
-          font-family: $title-font;
-          font-weight: bold;
-          border-top-left-radius: 0.34rem;
-          border-top-right-radius: 0.34rem;
-        }
+        // &::after {
+        //   content: 'Code';
+        //   position: absolute;
+        //   top: 0;
+        //   right: 0;
+        //   left: 0;
+        //   height: 31px;
+        //   padding: 5px 7px;
+        //   font-size: $code-font-size;
+        //   font-family: $title-font;
+        //   font-weight: bold;
+        //   border-top-left-radius: 0.34rem;
+        //   border-top-right-radius: 0.34rem;
+        // }
       }
     }
   }

layouts/partials/script/single-script.html

@@ -76,10 +76,7 @@
         .forEach((element) => {
           const sub = element.querySelector('code[data-lang]');
           if (sub) {
-            element.setAttribute('data-lang', mapLang(sub.getAttribute('data-lang')));
-          } else {
-            element.setAttribute('data-lang', 'Code');
-            $(element).addClass('chroma');
+            $(element).closest('div.chroma').attr('data-lang', mapLang(sub.getAttribute('data-lang')));
           }
         }
       );
@@ -91,8 +88,7 @@
           if (!$(element).attr('data-lang')) {
             $(element).parent().wrap('<div data-lang="Code" class="language-code"></div>');
           }
-        }
-        );
+        });
     })();
 
     function mapLang(name) {
@@ -187,7 +183,7 @@
       $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
     });
     
-    $('.language-code pre').each(function (i, node) {
+    $('.language-code').each(function (i, node) {
       $(node).append('<span class="copy-to-clipboard" title="Copy to clipboard"/>');
     });
 
@@ -201,7 +197,13 @@
         if (!clipInit) {
           var text, clip = new ClipboardJS('.copy-to-clipboard', {
             text: function (trigger) {
-              text = $(trigger).prev('code').text();
+              console.log();
+              if ($(trigger).prev().find('code').length > 1) {                
+                text = $(trigger).prev().find(`code[class^="language-"]`).text();
+              } else {
+                text = $(trigger).prev().find('code').text();
+              }
+               
               return text.replace(/^\$\s/gm, '');
             }
           });
@@ -237,16 +239,12 @@
         
         if (!isNotAllowedIncluded) {
           if (curClassName) {
-            code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
+            code.closest('div.chroma').append('<span class="copy-to-clipboard" title="Copy to clipboard" />');
           }         
         }        
       }
     });
 
-    /*$('.language-code code').each(function(i, node) {
-      $(node).append('<span class="copy-to-clipboard" title="Copy to clipboard" />');    
-    });*/
-
     // gallery
     {{ $enablePhotoSwipe := ($.Param "enablePhotoSwipe") }}
     var enablePhotoSwipe = JSON.parse({{ $enablePhotoSwipe | jsonify }});