add more customization options for code block, code block style bug fixed

assets/sass/components/_whoami.scss

@@ -45,7 +45,7 @@
     margin-bottom: 0.5rem;
     padding-bottom: 0.5rem;
 
-    @include themify($themes) {
+    @include themify($codeblock) {
       text-decoration: underline double themed('content-pre-main-color');
     }
   }

assets/sass/main.scss

@@ -16,6 +16,12 @@ $theme_hacker_chroma: {{ .Site.Data.skin.theme_hacker_chroma }};
 $theme_solarized_chroma: {{ .Site.Data.skin.theme_solarized_chroma }};
 $theme_custom_chroma: {{ .Site.Data.skin.theme_custom_chroma }};
 
+$theme_light_chroma_background: {{ .Site.Data.skin.theme_light_chroma_background }};
+$theme_dark_chroma_background: {{ .Site.Data.skin.theme_dark_chroma_background }};
+$theme_hacker_chroma_background: {{ .Site.Data.skin.theme_hacker_chroma_background }};
+$theme_solarized_chroma_background: {{ .Site.Data.skin.theme_solarized_chroma_background }};
+$theme_custom_chroma_background: {{ .Site.Data.skin.theme_custom_chroma_background }};
+
 $title-font: {{ .Site.Data.font.title_font }};
 $content-font: {{ .Site.Data.font.content_font }};
 

assets/sass/pages/_single.scss

@@ -114,28 +114,52 @@
 
     pre {
       padding: 34px 12px 8px;
-      position: relative;
       overflow: auto;
       border-radius: 0.34rem;
+    }
+
+    pre:not(.chroma) {
+      position: relative;
+    }
+
+    div.chroma {
       position: relative;
 
-      &::after {
+      @include on-event {
+        .copy-to-clipboard {
+          opacity: 1;
+        }
+      }
+    }
+    
+    pre > code:not([class^=language]) {
+      &::before {
         position: absolute;
         top: 0;
-        right: 0;
         left: 0;
+        padding: 2px 7px;
+        width: 100%;
+        height: 30px;
+        z-index: 1;
+        line-height: 30px;
         font-size: $code-font-size;
         font-family: $title-font;
         font-weight: bold;
-        content: attr(data-lang);
+        display: inline-block;
+        text-transform: capitalize;      
+        content: 'Code';
 
-        @include themify($themes) {
+        @include themify($codeblock) {
           color: themed('content-pre-header-color');
           background: themed('content-pre-header-background-color');
         }
       }
     }
 
+    p > code {
+      padding: 0.25rem 0.5rem;
+    }
+
     code + .copy-to-clipboard {
       position: absolute;
       right: 4px;
@@ -146,20 +170,21 @@
     }
 
     .copy-to-clipboard {
-      @include clippy();      
       background-position: 50% 50%;
       background-size: 16px 16px;
       background-repeat: no-repeat;
       width: 27px;
       height: 1.45rem;
       top: -1px;
-      display: inline-block;
       vertical-align: middle;
       position: relative;      
       margin-left: -0.2rem;
       cursor: pointer;
       border-radius: 0 2px 2px 0;
       margin-bottom: 1px;
+      opacity: 0;
+
+      @include clippy();
       @include transition(all, 0.2s, ease);
     }
     .copy-to-clipboard:hover {
@@ -280,7 +305,7 @@
         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.125);
 
         
-        @include themify($themes) {
+        @include themify($codeblock) {
           thead {
             background: themed('content-pre-header-background-color');
           }
@@ -325,7 +350,6 @@ code, pre {
   line-height: 1.4;
   font-size: $code-font-size;
   font-family: $code-font-stack;
-  position: relative;
 
   a {
     text-decoration: none !important;
@@ -334,10 +358,14 @@ code, pre {
 
 *:not(.chroma) {
   code, pre {
-    @include themify($themes) {
+    @include themify($codeblock) {
       background: themed('content-pre-background-color');
     }
-  }  
+  }
+
+  code {
+    padding: 0;
+  }
 }
 
 code {  
@@ -354,60 +382,70 @@ pre:not(.chroma) {
   position: relative;
   margin: 1em 0;
 
+  @include on-event {
+    .copy-to-clipboard {
+      opacity: 1;
+    }
+  }
+
   &::after {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     padding: 2px 7px;
-    font-size: $code-font-size;
+    width: 100%;
-    font-family: $title-font;
+    height: 30px;
-    font-weight: bold;
+    z-index: 0;
     border-top-left-radius: 0.25rem;
     border-top-right-radius: 0.25rem;
-    content: attr(data-lang);
+    content: '';
 
-    @include themify($themes) {
+    @include themify($codeblock) {
         color: themed('content-pre-header-color');
         background: themed('content-pre-header-background-color');
     }
   }
-  
-  code {
-    padding: 0;
-  }
 }
 
 .highlight > .chroma {
   margin: 1em 0;
   border-radius: 5px;
   box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
-  position: relative;
+  z-index: 1;
   overflow-x: auto;
 
-  @include themify($themes) {
+  @include themify($codeblock) {
     color: themed('content-pre-color');
     background: themed('content-pre-background-color');
   }
 
   code {
-    padding: 0;    
+    padding: 0;
   }
+  
+  code[data-lang] {
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      padding: 2px 7px;
+      width: 100%;
+      height: 30px;
+      line-height: 30px;
+      font-size: $code-font-size;
+      font-family: $title-font;
+      font-weight: bold;
+      display: inline-block;
+      text-transform: capitalize;      
+      content: attr(data-lang);
 
-  &::after {
+      @include themify($codeblock) {
-    position: absolute;
+        color: themed('content-pre-header-color');
-    top: 0;
+        background: themed('content-pre-header-background-color');
-    right: 0;
+      }
-    left: 0;
-    padding: 2px 7px;
-    font-size: $code-font-size;
-    font-family: $title-font;
-    font-weight: bold;
-    @include themify($themes) {
-      color: themed('content-pre-header-color');
-      background: themed('content-pre-header-background-color');
     }
-    content: attr(data-lang);
   }
 
   .lntd {
@@ -426,7 +464,6 @@ pre:not(.chroma) {
 
     &:last-child {
       vertical-align: top;
-      position: relative;
 
       pre {
         margin: 0;
@@ -444,7 +481,7 @@ pre:not(.chroma) {
 
   /* LineNumbersTable */  
   .lnt {
-    @include themify($themes) {
+    @include themify($codeblock) {
       color: themed('content-pre-number-color');
     }
   }

assets/sass/themes/_custom.scss

@@ -46,15 +46,8 @@ $custom: (
   single-contents-title-color: hsl($custom_theme_primary_color, 70%, 22%),
   related-header-title-color: hsl($custom_theme_primary_color, 100%, 10%),
   related-link-color: hsl($custom_theme_primary_color, 65%, 32%),
-  content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+  content-box-border-color: hsl($custom_theme_primary_color, 100%, 86%),
-  content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+  content-box-background-color: hsl($custom_theme_primary_color, 100%, 94%),
-  content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
-  content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
-  content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
-  content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
-  content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
-  content-box-border-color: #ff0000,
-  content-box-background-color: #ff0000,
   burger-menu-color: hsl($custom_theme_primary_color, 86%, 20%),
   social-icon-color: hsl($custom_theme_primary_color, 25%, 35%),
   social-icon-hover-color: hsl($custom_theme_primary_color, 25%, 50%),

assets/sass/themes/_customcode.scss

@@ -0,0 +1,63 @@
+$customcode: '';
+
+@if $theme_custom_chroma_background == dark {
+  $customcode: (
+    content-pre-main-color: #FFA7C4,
+    content-pre-color: #eee,
+    content-pre-number-color: #666,
+    content-pre-background-color: #171f2e,
+    content-pre-header-background-color: darken(#011627, 1.5%),
+    content-pre-border-background-color: #3a3a3a,
+    content-pre-header-color: #FCFCFA,
+  );
+} @else if $theme_custom_chroma_background == light {
+  $customcode: (
+    content-pre-main-color: #607d8b,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #F5F2F0,
+    content-pre-border-background-color: darken(#F5F2F0, 7%),
+    content-pre-header-background-color: darken(#F5F2F0, 3%),
+    content-pre-header-color: #344952,
+  );
+} @else if $theme_custom_chroma_background == hacker {
+  $customcode: (
+    content-pre-main-color: #1FFF2A,
+    content-pre-color: #d1d1d1,
+    content-pre-number-color: #666,
+    content-pre-background-color: #282a36,
+    content-pre-border-background-color: #f3ff6e,
+    content-pre-header-background-color: darken(#202420, 1.5%),
+    content-pre-header-color: #f3ff6e,
+  );
+} @else if $theme_custom_chroma_background == solarized {
+  $customcode: (
+    content-pre-main-color: #B58900,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    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,
+  );
+} @else if $theme_custom_chroma_background == custom {
+  $customcode: (
+    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+  );
+} @else {
+  $customcode: (
+    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+  );
+}

assets/sass/themes/_dark.scss

@@ -46,13 +46,6 @@ $dark: (
     single-contents-title-color: #aed581,
     related-header-title-color: #FCFCFA,
     related-link-color: #A9DC76,
-    content-pre-main-color: #FFA7C4,
-    content-pre-color: #eee,
-    content-pre-number-color: #666,
-    content-pre-background-color: #171f2e,
-    content-pre-header-background-color: darken(#011627, 1.5%),
-    content-pre-border-background-color: #3a3a3a,
-    content-pre-header-color: #FCFCFA,
     content-box-border-color: #616161,
     content-box-background-color: #403E41,
     burger-menu-color: #FCFCFA,

assets/sass/themes/_darkcode.scss

@@ -0,0 +1,63 @@
+$darkcode: '';
+
+@if $theme_dark_chroma_background == dark {
+  $darkcode: (
+    content-pre-main-color: #FFA7C4,
+    content-pre-color: #eee,
+    content-pre-number-color: #666,
+    content-pre-background-color: #171f2e,
+    content-pre-header-background-color: darken(#011627, 1.5%),
+    content-pre-border-background-color: #3a3a3a,
+    content-pre-header-color: #FCFCFA,
+  );
+} @else if $theme_dark_chroma_background == light {
+  $darkcode: (
+    content-pre-main-color: #607d8b,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #F5F2F0,
+    content-pre-border-background-color: darken(#F5F2F0, 7%),
+    content-pre-header-background-color: darken(#F5F2F0, 3%),
+    content-pre-header-color: #344952,
+  );
+} @else if $theme_dark_chroma_background == hacker {
+  $darkcode: (
+    content-pre-main-color: #1FFF2A,
+    content-pre-color: #d1d1d1,
+    content-pre-number-color: #666,
+    content-pre-background-color: #282a36,
+    content-pre-border-background-color: #f3ff6e,
+    content-pre-header-background-color: darken(#202420, 1.5%),
+    content-pre-header-color: #f3ff6e,
+  );
+} @else if $theme_dark_chroma_background == solarized {
+  $darkcode: (
+    content-pre-main-color: #B58900,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    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,
+  );
+} @else if $theme_dark_chroma_background == custom {
+  $darkcode: (
+    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+  );
+} @else {
+  $darkcode: (
+    content-pre-main-color: #FFA7C4,
+    content-pre-color: #eee,
+    content-pre-number-color: #666,
+    content-pre-background-color: #171f2e,
+    content-pre-header-background-color: darken(#011627, 1.5%),
+    content-pre-border-background-color: #3a3a3a,
+    content-pre-header-color: #FCFCFA,
+  );
+}

assets/sass/themes/_hacker.scss

@@ -46,13 +46,6 @@ $hacker: (
     single-contents-title-color: #A1AD64,
     related-header-title-color: #FCFCFA,
     related-link-color: #C7BA00,
-    content-pre-main-color: #1FFF2A,
-    content-pre-color: #d1d1d1,
-    content-pre-number-color: #666,
-    content-pre-background-color: #282a36,
-    content-pre-border-background-color: #f3ff6e,
-    content-pre-header-background-color: darken(#202420, 1.5%),
-    content-pre-header-color: #f3ff6e,
     content-box-border-color: #dbdbdb,
     content-box-background-color: #202420,
     burger-menu-color: #dbdbdb,

assets/sass/themes/_hackercode.scss

@@ -0,0 +1,63 @@
+$hackercode: '';
+
+@if $theme_hacker_chroma_background == dark {
+  $hackercode: (
+    content-pre-main-color: #FFA7C4,
+    content-pre-color: #eee,
+    content-pre-number-color: #666,
+    content-pre-background-color: #171f2e,
+    content-pre-header-background-color: darken(#011627, 1.5%),
+    content-pre-border-background-color: #3a3a3a,
+    content-pre-header-color: #FCFCFA,
+  );
+} @else if $theme_hacker_chroma_background == light {
+  $hackercode: (
+    content-pre-main-color: #607d8b,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #F5F2F0,
+    content-pre-border-background-color: darken(#F5F2F0, 7%),
+    content-pre-header-background-color: darken(#F5F2F0, 3%),
+    content-pre-header-color: #344952,
+  );
+} @else if $theme_hacker_chroma_background == hacker {
+  $hackercode: (
+    content-pre-main-color: #1FFF2A,
+    content-pre-color: #d1d1d1,
+    content-pre-number-color: #666,
+    content-pre-background-color: #282a36,
+    content-pre-border-background-color: #f3ff6e,
+    content-pre-header-background-color: darken(#202420, 1.5%),
+    content-pre-header-color: #f3ff6e,
+  );
+} @else if $theme_hacker_chroma_background == solarized {
+  $hackercode: (
+    content-pre-main-color: #B58900,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    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,
+  );
+} @else if $theme_hacker_chroma_background == custom {
+  $hackercode: (
+    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+  );
+} @else {
+  $hackercode: (
+    content-pre-main-color: #1FFF2A,
+    content-pre-color: #d1d1d1,
+    content-pre-number-color: #666,
+    content-pre-background-color: #282a36,
+    content-pre-border-background-color: #f3ff6e,
+    content-pre-header-background-color: darken(#202420, 1.5%),
+    content-pre-header-color: #f3ff6e,
+  );
+}

assets/sass/themes/_light.scss

@@ -45,14 +45,7 @@ $light: (
     single-header-title-color: #424242,
     single-contents-title-color: #607d8b,
     related-header-title-color: #424242,
-    related-link-color: #607d8b,   
+    related-link-color: #607d8b,
-    content-pre-main-color: #607d8b,
-    content-pre-color: #344952,
-    content-pre-number-color: #aaa,
-    content-pre-background-color: #F5F2F0,
-    content-pre-border-background-color: darken(#F5F2F0, 7%),
-    content-pre-header-background-color: darken(#F5F2F0, 3%),
-    content-pre-header-color: #344952,
     content-box-border-color: #aaa,
     content-box-background-color: #eeeeee,
     burger-menu-color: #777,

assets/sass/themes/_lightcode.scss

@@ -0,0 +1,63 @@
+$lightcode: '';
+
+@if $theme_light_chroma_background == dark {
+  $lightcode: (
+    content-pre-main-color: #FFA7C4,
+    content-pre-color: #eee,
+    content-pre-number-color: #666,
+    content-pre-background-color: #171f2e,
+    content-pre-header-background-color: darken(#011627, 1.5%),
+    content-pre-border-background-color: #3a3a3a,
+    content-pre-header-color: #FCFCFA,
+  );
+} @else if $theme_light_chroma_background == light {
+  $lightcode: (
+    content-pre-main-color: #607d8b,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #F5F2F0,
+    content-pre-border-background-color: darken(#F5F2F0, 7%),
+    content-pre-header-background-color: darken(#F5F2F0, 3%),
+    content-pre-header-color: #344952,
+  );
+} @else if $theme_light_chroma_background == hacker {
+  $lightcode: (
+    content-pre-main-color: #1FFF2A,
+    content-pre-color: #d1d1d1,
+    content-pre-number-color: #666,
+    content-pre-background-color: #282a36,
+    content-pre-border-background-color: #f3ff6e,
+    content-pre-header-background-color: darken(#202420, 1.5%),
+    content-pre-header-color: #f3ff6e,
+  );
+} @else if $theme_light_chroma_background == solarized {
+  $lightcode: (
+    content-pre-main-color: #B58900,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    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,
+  );
+} @else if $theme_light_chroma_background == custom {
+  $lightcode: (
+    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+  );
+} @else {
+  $lightcode: (
+    content-pre-main-color: #607d8b,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #F5F2F0,
+    content-pre-border-background-color: darken(#F5F2F0, 7%),
+    content-pre-header-background-color: darken(#F5F2F0, 3%),
+    content-pre-header-color: #344952,
+  );
+}

assets/sass/themes/_solarized.scss

@@ -45,14 +45,7 @@ $solarized: (
     single-header-title-color: #424242,
     single-contents-title-color: #B58900,
     related-header-title-color: #424242,
-    related-link-color: #ffb300,   
+    related-link-color: #ffb300,
-    content-pre-main-color: #B58900,
-    content-pre-color: #344952,
-    content-pre-number-color: #aaa,
-    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,
     content-box-border-color: #B58900,
     content-box-background-color: #FBF1D1,
     burger-menu-color: #B58900,

assets/sass/themes/_solarizedcode.scss

@@ -0,0 +1,63 @@
+$solarizedcode: '';
+
+@if $theme_solarized_chroma_background == dark {
+  $solarizedcode: (
+    content-pre-main-color: #FFA7C4,
+    content-pre-color: #eee,
+    content-pre-number-color: #666,
+    content-pre-background-color: #171f2e,
+    content-pre-header-background-color: darken(#011627, 1.5%),
+    content-pre-border-background-color: #3a3a3a,
+    content-pre-header-color: #FCFCFA,
+  );
+} @else if $theme_solarized_chroma_background == light {
+  $solarizedcode: (
+    content-pre-main-color: #607d8b,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #F5F2F0,
+    content-pre-border-background-color: darken(#F5F2F0, 7%),
+    content-pre-header-background-color: darken(#F5F2F0, 3%),
+    content-pre-header-color: #344952,
+  );
+} @else if $theme_solarized_chroma_background == hacker {
+  $solarizedcode: (
+    content-pre-main-color: #1FFF2A,
+    content-pre-color: #d1d1d1,
+    content-pre-number-color: #666,
+    content-pre-background-color: #282a36,
+    content-pre-border-background-color: #f3ff6e,
+    content-pre-header-background-color: darken(#202420, 1.5%),
+    content-pre-header-color: #f3ff6e,
+  );
+} @else if $theme_solarized_chroma_background == solarized {
+  $solarizedcode: (
+    content-pre-main-color: #B58900,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    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,
+  );
+} @else if $theme_solarized_chroma_background == custom {
+  $solarizedcode: (
+    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+  );
+} @else {
+  $solarizedcode: (
+    content-pre-main-color: #607d8b,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #F5F2F0,
+    content-pre-border-background-color: darken(#F5F2F0, 7%),
+    content-pre-header-background-color: darken(#F5F2F0, 3%),
+    content-pre-header-color: #344952,
+  );
+}

assets/sass/themes/_theme.scss

@@ -4,10 +4,24 @@
 @import 'solarized';
 @import 'custom';
 
+@import 'darkcode';
+@import 'lightcode';
+@import 'hackercode';
+@import 'solarizedcode';
+@import 'customcode';
+
 $themes: (
   dark: $dark,
   light: $light,
   hacker: $hacker,  
   solarized: $solarized,
   custom: $custom,
+);
+
+$codeblock: (
+  dark: $darkcode,
+  light: $lightcode,
+  hacker: $hackercode,  
+  solarized: $solarizedcode,
+  custom: $customcode,
 );

data/skin.toml

@@ -6,4 +6,12 @@ theme_light_chroma = "default"
 theme_dark_chroma = "default"
 theme_hacker_chroma = "default"
 theme_solarized_chroma = "default"
-theme_custom_chroma = "default"
+theme_custom_chroma = "default"
+
+# possible value: default, dark, light, hacker, solarized, custom
+# restart hugo after change this value
+theme_light_chroma_background = "default"
+theme_dark_chroma_background = "default"
+theme_hacker_chroma_background = "default"
+theme_solarized_chroma_background = "default"
+theme_custom_chroma_background = "default"

layouts/partials/body/infos.html

@@ -1,6 +1,6 @@
 <div class="single__infos">
-  <span title="{{ i18n "tooltip-written" }}">🕓 {{ .Date.Format (i18n "single-dateformat") }} </span> {{ if .GitInfo }} &nbsp;&nbsp; <span class="single__info" title="{{ i18n "tooltip-modified" }}"> 📝 {{ .Lastmod.Format (i18n "single-dateformat") }} </span> {{ end }} &middot; <span class="single__info" title="{{ i18n "tooltip-reading-time" }}"> ☕ {{ .ReadingTime }} {{ i18n "reading-time" }} </span>
+  <span class="single__info" title="{{ i18n "tooltip-written" }}">🕓{{ .Date.Format (i18n "single-dateformat") }} </span> {{ if .GitInfo }} &nbsp;&nbsp; <span class="single__info" title="{{ i18n "tooltip-modified" }}"> 📝{{ .Lastmod.Format (i18n "single-dateformat") }} </span> {{ end }} &middot; <span class="single__info" title="{{ i18n "tooltip-reading-time" }}"> ☕{{ .ReadingTime }} {{ i18n "reading-time" }} </span>
   <span class="single__info">
-    {{ if (and .Site.Params.enableBusuanzi .Site.Params.busuanziPagePV) }} &middot 👀<span id="busuanzi_value_page_pv">...</span> {{ i18n "counter-page-pv" }}{{ end }}
+    {{ if (and .Site.Params.enableBusuanzi .Site.Params.busuanziPagePV) }} &middot; 👀<span id="busuanzi_value_page_pv">...</span> {{ i18n "counter-page-pv" }}{{ end }}
   </span>
 </div>

layouts/partials/footer/site-footer.html

@@ -15,7 +15,7 @@
                     {{ $rightString := replace (index (split $.Site.Copyright "{}") 1) "{year}" now.Year }}
 
                     {{ if and ($.Site.Params.copyrightOptions.copyrightLinkImage) ($.Site.Params.copyrightOptions.copyrightLinkText) }}
-                        <a rel="license" href="{{ $.Site.Params.copyrightOptions.copyrightLink }}" class="footer__copyright--img"><img alt="{{ $.Site.Params.copyrightOptions.copyrightLinkText }}" style="border-width:0" src="{{ $.Site.Params.copyrightOptions.copyrightLinkImage }}"/></a>{{ $leftString }}{{ $rightString }}
+                        <a rel="license" href="{{ $.Site.Params.copyrightOptions.copyrightLink }}" class="footer__copyright--img"><img alt="{{ $.Site.Params.copyrightOptions.copyrightLinkText }}" style="border-width:0" src="{{ $.Site.Params.copyrightOptions.copyrightLinkImage }}"/></a>{{ $leftString }}<a rel="license" href="{{ $.Site.Params.copyrightOptions.copyrightLink }}">{{ $.Site.Params.copyrightOptions.copyrightLinkText }}</a>{{ $rightString }}
                     {{ else }}
                         {{ $leftString }}<a rel="license" href="{{ $.Site.Params.copyrightOptions.copyrightLink }}">{{ $.Site.Params.copyrightOptions.copyrightLinkText }}</a>{{ $rightString }}
                     {{ end }}

layouts/partials/script/single-script.html

@@ -72,18 +72,6 @@
 
 <script>
   window.onload = function() {
-    // syntax highlight
-    (function () {
-      document.querySelectorAll('.chroma > table')
-        .forEach((element) => {
-          const sub = element.querySelector('code[data-lang]');
-          if (sub) {
-            $(element).closest('div.chroma').attr('data-lang', mapLang(sub.getAttribute('data-lang')));
-          }
-        }
-      );
-    })();
-
     (function () {
       document.querySelectorAll('.single__contents > pre > code')
         .forEach((element) => {
@@ -98,19 +86,11 @@
         coffeescript: 'CoffeeScript',
         cpp: 'C++',
         cs: 'C#',
-        css: 'CSS',
-        html: 'HTML',
-        http: 'HTTP',
         js: 'JavaScript',
         json: 'JSON',
         objectivec: 'Objective-C',
-        php: 'PHP',
-        sql: 'SQL',
-        toml: 'TOML',
         ts: 'TypeScript',
         typescript: 'TypeScript',
-        xml: 'XML',
-        yaml: 'YAML',
       }[name] || name.toUpperCase();
     }