code block table styling for hugo v.0.60.0

README.md

@@ -1,6 +1,6 @@
 # Zzo theme for Hugo
 
-🚨🚨🚨Minimum Hugo version changed to 0.60.0. This version changed the markdown rendering library, so if you are using an older version, it may not be compatible.
+🚨🚨🚨Minimum Hugo version changed to 0.60.0. This version changes the markdown rendering library, so if you are using an older version, it may not be compatible.
 Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(always), and many features. 
 
 ## Table of contents

assets/sass/pages/_single.scss

@@ -100,13 +100,38 @@
       margin: 1.5rem 0 0.5rem 0;
     }
 
-    code + .copy-to-clipboard {
+    pre {
-      margin-left: -1px;
+      padding: 34px 12px 8px;
-      border-left: 0 !important;
+      position: relative;
-      font-size: inherit !important;
+      overflow: auto;
-      vertical-align: middle;
+      border-radius: 0.34rem;
-      height: 21px;
+      position: relative;
+
+      &::after {
+        position: absolute;
         top: 0;
+        right: 0;
+        left: 0;
+        //padding: 50px 7px;
+        font-size: $code-font-size;
+        font-family: $title-font;
+        font-weight: bold;
+        content: attr(data-lang);
+
+        @include themify($themes) {
+          color: themed('content-pre-header-color');
+          background: themed('content-pre-header-background-color');
+        }
+      }
+    }
+
+    code + .copy-to-clipboard {
+      position: absolute;
+      right: 4px;
+      top: 5px;
+      border-radius: 2px;
+      z-index: 1;
+      @include transition(all, 0.2s, ease);
     }
 
     .copy-to-clipboard {
@@ -213,8 +238,7 @@
       cursor: pointer;
     }
 
-    .footnote-ref {
+    a.footnote-ref {
-      a {
       font-size: 0.75rem;
       font-weight: bold;
       margin-left: 3px;
@@ -227,7 +251,6 @@
         content: "]";
       }
     }
-    }
 
     .table-wrapper {
       overflow-x: auto;      
@@ -288,6 +311,7 @@ code, pre {
   line-height: 1.5em;
   font-size: $code-font-size;
   font-family: $code-font-stack;
+  position: relative;
   
   @include themify($themes) {
     background: themed('content-pre-background-color');
@@ -301,18 +325,68 @@ code, pre {
 code {  
   padding: 3px 5px;  
   border-radius: 4px;
-  // @include themify($themes) {
-  //   background: themed('content-pre-background-color');
-  // }
 }
 
-.highlight {
+pre:not(.chroma) {
-  table {
+  overflow: auto;
-    //border-radius: 5.5rem !important;
+}
+
+.single__contents > .language-code {
+  overflow: auto;
+  position: relative;
+  margin: 1em 0;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    padding: 2px 7px;
+    font-size: $code-font-size;
+    font-family: $title-font;
+    font-weight: bold;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+    content: attr(data-lang);
+
+    @include themify($themes) {
+        color: themed('content-pre-header-color');
+        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;
@@ -364,10 +438,25 @@ code {
 
     &:last-child {
       vertical-align: top;
+      position: relative;
 
       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;
+        }
       }
     }
   }

assets/sass/syntax/_autumn.scss

@@ -1,5 +1,5 @@
 @mixin chroma-autumn {
-  /* Background */ .chroma { background-color: #ffffff }
+  /* Background */ .chroma { background-color: #f0fbff }
   /* Error */ .chroma .err { color: #ff0000; background-color: #ffaaaa }
   /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
   /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }

assets/sass/syntax/_solarized.scss

@@ -1,5 +1,5 @@
 @mixin chroma-solarized {
-  /* Background */ .chroma { color: #dc322f; background-color: #ede9da }
+  /* Background */ .chroma { color: #dc322f; background-color: #faf1cd }
   /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
   /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
   /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }

assets/sass/themes/_hacker.scss

@@ -14,7 +14,7 @@ $hacker: (
     dropdown-content-background-color: lighten(#151715, 5%),
     dropdown-item-hover-background-color: lighten(#151715, 20%),
     dropdown-item-hover-color: #FCFCFA,
-    dropdown-item-color: #FCFCFA,
+    dropdown-item-color: #e3cd26,
     navbar-border-bottom-color: #252526,
     navbar-background-color: #252526,
     navbar-mobile-background-color: #323232,
@@ -53,7 +53,7 @@ $hacker: (
     content-pre-border-background-color: #f3ff6e,
     content-pre-header-background-color: darken(#202420, 1.5%),
     content-pre-header-color: #f3ff6e,
-    burger-menu-color: #1FFF2A,
+    burger-menu-color: #dbdbdb,
     social-icon-color: #9e9e9e,
     social-icon-hover-color: darken(#9e9e9e, 20%),
     pagination-link-color: #996287,

assets/sass/themes/_solarized.scss

@@ -49,7 +49,7 @@ $solarized: (
     content-pre-main-color: #B58900,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
-    content-pre-background-color: #ede9da,
+    content-pre-background-color: #faf1cd,
     content-pre-border-background-color: darken(#FBF1D1, 12%),
     content-pre-header-background-color: darken(#FBF1D1, 6%),
     content-pre-header-color: #344952,

layouts/partials/script/single-script.html

@@ -85,6 +85,16 @@
       );
     })();
 
+    (function () {
+      document.querySelectorAll('.single__contents > pre > code')
+        .forEach((element) => {
+          if (!$(element).attr('data-lang')) {
+            $(element).parent().wrap('<div data-lang="Code" class="language-code"></div>');
+          }
+        }
+        );
+    })();
+
     function mapLang(name) {
       return {
         coffeescript: 'CoffeeScript',
@@ -177,13 +187,13 @@
       $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
     });
     
-    $('pre.chroma').not(':has(code)').each(function() {
+    $('.language-code pre').each(function (i, node) {
-      $(this).not(':has(span)').wrap('<code style="font-size: 1rem;"></code>');
+      $(node).append('<span class="copy-to-clipboard" title="Copy to clipboard"/>');
     });
 
     // clipboard
     var clipInit = false;
-    $('code').each(function () {
+    $('pre.chroma code, .language-code code').each(function () {
       var code = $(this),
         text = code.text();
 
@@ -226,14 +236,17 @@
         }
 
         if (!isNotAllowedIncluded) {
+          if (curClassName) {
             code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
-          code.next('.copy-to-clipboard').on('mouseleave', function () {
+          }         
-            $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
-          });
         }        
       }
     });
 
+    /*$('.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 }});