diff --git a/assets/css/extended/blank.css b/assets/css/extended/blank.css
deleted file mode 100644
index 4cf76e674..000000000
--- a/assets/css/extended/blank.css
+++ /dev/null
@@ -1,128 +0,0 @@
-pre {
-    width: 100%;
-    border: 1px solid rgba(0, 0, 0, 0);
-    float: left;
-    justify-content: center;
-    min-width: 100%;
-    box-sizing: border-box;
-    overflow: auto;
-}
-code {
-    display: inline-block;
-}
-
-
-.post-content h1 {
-    margin: 35px auto 27px;
-    font-size: 35px;
-}
-
-.post-content h2 {
-    margin: 27px auto 19px;
-    font-size: 27px;
-}
-
-.post-content h3 {
-    font-size: 19px;
-}
-
-.post-content h4 {
-    font-size: 16px;
-}
-
-.post-content h5 {
-    font-size: 14px;
-}
-
-.post-content h6 {
-    font-size: 12px;
-}
-
-
-
-/* <button class="comment-button" role="comment-button">Comment Button</button> */
-/* Comment Button CSS */
-@media (prefers-color-scheme: light) {
-    /* Light mode styles */
-    .comment-button {
-      background-color: #f5f5f5;
-      border: 1px solid #dcdcdc;
-      color: #333333;
-      border-radius: 3px;
-      cursor: pointer;
-      display: inline-block;
-      font-size: 16px;
-      font-weight: 450;
-      line-height: 1.15385;
-      margin: 0;
-      outline: none;
-      padding: 5px .5em;
-      position: relative;
-      text-align: center;
-      text-decoration: none;
-      user-select: none;
-      -webkit-user-select: none;
-      touch-action: manipulation;
-      vertical-align: baseline;
-      white-space: nowrap;
-    }
-    
-    .comment-button:hover,
-    .comment-button:focus {
-      background-color: #dcdcdc;
-      color: #333333;
-    }
-    
-    .comment-button:focus {
-      box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
-    }
-    
-    .comment-button:active {
-      background-color: #c8c8c8;
-      box-shadow: none;
-      color: #333333;
-    }
-  }
-  
-  @media (prefers-color-scheme: dark) {
-    /* Dark mode styles */
-    .comment-button {
-      background-color: #333333;
-      border: 1px solid #555555;
-      color: #f5f5f5;
-      border-radius: 3px;
-      cursor: pointer;
-      display: inline-block;
-      font-size: 16px;
-      font-weight: 450;
-      line-height: 1.15385;
-      margin: 0;
-      outline: none;
-      padding: 5px .5em;
-      position: relative;
-      text-align: center;
-      text-decoration: none;
-      user-select: none;
-      -webkit-user-select: none;
-      touch-action: manipulation;
-      vertical-align: baseline;
-      white-space: nowrap;
-    }
-    
-    .comment-button:hover,
-    .comment-button:focus {
-      background-color: #555555;
-      color: #f5f5f5;
-    }
-    
-    .comment-button:focus {
-      box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
-    }
-    
-    .comment-button:active {
-      background-color: #777777;
-      box-shadow: none;
-      color: #f5f5f5;
-    }
-  }
-
diff --git a/assets/css/extended/blank.scss b/assets/css/extended/blank.scss
new file mode 100644
index 000000000..c96221bbb
--- /dev/null
+++ b/assets/css/extended/blank.scss
@@ -0,0 +1,701 @@
+pre {
+    width: 100%;
+    border: 1px solid rgba(0, 0, 0, 0);
+    float: left;
+    justify-content: center;
+    min-width: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+}
+code {
+    display: inline-block;
+}
+
+
+.post-content h1 {
+    margin: 35px auto 27px;
+    font-size: 35px;
+}
+
+.post-content h2 {
+    margin: 27px auto 19px;
+    font-size: 27px;
+}
+
+.post-content h3 {
+    font-size: 19px;
+}
+
+.post-content h4 {
+    font-size: 16px;
+}
+
+.post-content h5 {
+    font-size: 14px;
+}
+
+.post-content h6 {
+    font-size: 12px;
+}
+
+
+
+/* <button class="comment-button" role="comment-button">Comment Button</button> */
+/* Comment Button CSS */
+@media (prefers-color-scheme: light) {
+    /* Light mode styles */
+    .comment-button {
+      background-color: #f5f5f5;
+      border: 1px solid #dcdcdc;
+      color: #333333;
+      border-radius: 3px;
+      cursor: pointer;
+      display: inline-block;
+      font-size: 16px;
+      font-weight: 450;
+      line-height: 1.15385;
+      margin: 0;
+      outline: none;
+      padding: 5px .5em;
+      position: relative;
+      text-align: center;
+      text-decoration: none;
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: manipulation;
+      vertical-align: baseline;
+      white-space: nowrap;
+    }
+    
+    .comment-button:hover,
+    .comment-button:focus {
+      background-color: #dcdcdc;
+      color: #333333;
+    }
+    
+    .comment-button:focus {
+      box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
+    }
+    
+    .comment-button:active {
+      background-color: #c8c8c8;
+      box-shadow: none;
+      color: #333333;
+    }
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    /* Dark mode styles */
+    .comment-button {
+      background-color: #333333;
+      border: 1px solid #555555;
+      color: #f5f5f5;
+      border-radius: 3px;
+      cursor: pointer;
+      display: inline-block;
+      font-size: 16px;
+      font-weight: 450;
+      line-height: 1.15385;
+      margin: 0;
+      outline: none;
+      padding: 5px .5em;
+      position: relative;
+      text-align: center;
+      text-decoration: none;
+      user-select: none;
+      -webkit-user-select: none;
+      touch-action: manipulation;
+      vertical-align: baseline;
+      white-space: nowrap;
+    }
+    
+    .comment-button:hover,
+    .comment-button:focus {
+      background-color: #555555;
+      color: #f5f5f5;
+    }
+    
+    .comment-button:focus {
+      box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
+    }
+    
+    .comment-button:active {
+      background-color: #777777;
+      box-shadow: none;
+      color: #f5f5f5;
+    }
+  }
+
+
+  code {
+    display:inline-block;
+    max-width: 100%;
+    padding: 0 .4rem;
+    @include overflow-wrap(break-word);
+    @include line-break(anywhere);
+    font-size: $code-font-size;
+    font-family: $code-font-family;
+    color: $code-color;
+  
+    [theme=dark] & {
+      color: $code-color-dark;
+    }
+    [theme=black] & {
+      color: $code-color-black;
+    }
+  }
+  
+  pre {
+    padding: 0;
+    margin: .25rem .5rem .25rem .5rem;
+    @include tab-size(4);
+  
+    code {
+      padding: 0;
+      overflow: auto hidden;
+    }
+  
+    img {
+      min-height: 1em;
+      max-height: 1.2em;
+      vertical-align: text-bottom;
+    }
+  }
+  
+  code, pre, .highlight table, .highlight tr, .highlight td {
+    background: $code-background-color;
+  
+    [theme=dark] & {
+      background: $code-background-color-dark;
+    }
+    [theme=black] & {
+      background: $code-background-color-black;
+    }
+  }
+  
+  .highlight, .gist {
+    font-family: $code-font-family;
+    font-size: $code-font-size;
+  
+    .table-wrapper {
+      > table,
+      > table thead,
+      > table tr,
+      > table td {
+        margin: 0;
+        padding: 0;
+        border: none !important;
+      }
+    }
+  }
+  
+  .highlight {
+    line-height: 1.4em;
+    margin: .5rem 0;
+  
+    > .chroma {
+      position: relative;
+  
+      .code-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        width: 100%;
+        font-family: $global-font-family;
+        font-weight: bold;
+        color: $code-info-color;
+        background: darken($code-background-color, 8%);
+  
+        [theme=dark] & {
+          color: $code-info-color-dark;
+          background: darken($code-background-color-dark, 6%);
+        }
+        [theme=black] & {
+          color: $code-info-color-black;
+          background: darken($code-background-color-black, 6%);
+        }
+  
+        &:hover {
+          cursor: pointer;
+        }
+  
+        .code-title {
+          width: 100%;
+          padding: .4rem;
+        }
+  
+        .code-title::after {
+          padding-left: .2rem;
+          content: 'Code';
+        }
+  
+        @each $type, $text in $code-type-map {
+          &.#{$type} .code-title::after {
+            content: $text;
+          }
+        }
+      }
+  
+      .lntd:first-child {
+        min-width: 1.6rem;
+        text-align: right;
+      }
+  
+      .lntd:last-child {
+        width: 100%;
+  
+        pre {
+          @include max-content(min-width);
+        }
+      }
+  
+      .ln {
+        padding-right: .75rem;
+      }
+  
+      .hl {
+        display: block;
+        background-color: darken($code-background-color, 10%);
+  
+        [theme=dark] & {
+          background-color: darken($code-background-color-dark, 5%);
+        }
+        [theme=black] & {
+          background-color: darken($code-background-color-black, 5%);
+        }
+      }
+  
+      .ln, .lnt {
+        color: $global-font-secondary-color;
+  
+        [theme=dark] & {
+          color: $global-font-secondary-color-dark;
+        }
+        [theme=black] & {
+          color: $global-font-secondary-color-black;
+        }
+      }
+  
+      .arrow {
+        padding: 0 .2rem;
+        @include transition(transform 0.2s ease);
+      }
+  
+      .ellipses {
+        padding: .4rem;
+      }
+  
+      .copy {
+        display: none;
+        padding: .4rem;
+  
+        &:hover {
+          cursor: pointer;
+          color: $global-link-hover-color;
+  
+          [theme=dark] & {
+            color: $global-link-hover-color-dark;
+          }
+          [theme=black] & {
+            color: $global-link-hover-color-black;
+          }
+        }
+      }
+  
+      .table-wrapper {
+        max-height: 0;
+        overflow: auto hidden;
+        transition: max-height 0.5s ease-out;
+      }
+  
+      &.open {
+        .code-header {
+          background: darken($code-background-color, 3%);
+  
+          [theme=dark] & {
+            background: darken($code-background-color-dark, 3%);
+          }
+          [theme=black] & {
+            background: darken($code-background-color-black, 3%);
+          }
+        }
+        
+        .table-wrapper {
+          max-height: none;
+        }
+  
+        .arrow {
+          @include transform(rotate(90deg));
+        }
+  
+        .ellipses {
+          display: none;
+        }
+  
+        .copy {
+          display: inline;
+        }
+      }
+    }
+  
+    /* Comment */  .c,
+    /* CommentHashbang */  .ch,
+    /* CommentMultiline */  .cm,
+    /* CommentSingle */  .c1,
+    /* CommentSpecial */  .cs,
+    /* CommentPreproc */  .cp,
+    /* CommentPreprocFile */  .cpf { font-style: italic }
+    /* GenericUnderline */  .gl { text-decoration: underline }
+  
+    @each $class, $color in $code-highlight-color-map {
+      .#{$class} { color: $color; }
+    }
+  
+    [theme=dark] & {
+      @each $class, $color in $code-highlight-color-map-dark {
+        .#{$class} { color: $color; }
+      }
+    }
+    [theme=black] & {
+      @each $class, $color in $code-highlight-color-map-black {
+        .#{$class} { color: $color; }
+      }
+    }
+  }
+  
+  .gist {
+    .gist-file, .gist-data, .gist-meta {
+      border: none;
+    }
+  
+    .gist-meta {
+      padding: .4rem .8rem;
+      background-color: darken($code-background-color, 5%);
+  
+      @include link(false, false);
+  
+      [theme=dark] & {
+        background-color: darken($code-background-color-dark, 5%);
+      }
+      [theme=black] & {
+        background-color: darken($code-background-color-dark, 5%);
+      }
+    }
+  
+    [theme=dark] & {
+      // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
+      .highlight {
+        background: #141414;
+      }
+      .blob-num,
+      .blob-code-inner,
+      .highlight,
+      .pl-enm,
+      .pl-ko,
+      .pl-mo,
+      .pl-mp1 .pl-sf,
+      .pl-ms,
+      .pl-pdc1,
+      .pl-scp,
+      .pl-smc,
+      .pl-som,
+      .pl-va,
+      .pl-vpf,
+      .pl-vpu,
+      .pl-mdr {
+          color: #aab1bf;
+      }
+      .pl-mb,
+      .pl-pdb {
+          font-weight: 700;
+      }
+      .pl-c,
+      .pl-c span,
+      .pl-pdc {
+          color: #5b6270;
+          font-style: italic;
+      }
+      .pl-sr .pl-cce {
+          color: #56b5c2;
+          font-weight: 400;
+      }
+      .pl-ef,
+      .pl-en,
+      .pl-enf,
+      .pl-eoai,
+      .pl-kos,
+      .pl-mh .pl-pdh,
+      .pl-mr {
+          color: #61afef;
+      }
+      .pl-ens,
+      .pl-vi {
+          color: #be5046;
+      }
+      .pl-enti,
+      .pl-mai .pl-sf,
+      .pl-ml,
+      .pl-sf,
+      .pl-sr,
+      .pl-sr .pl-sra,
+      .pl-src,
+      .pl-st,
+      .pl-vo {
+          color: #56b5c2;
+      }
+      .pl-eoi,
+      .pl-mri,
+      .pl-pds,
+      .pl-pse .pl-s1,
+      .pl-s,
+      .pl-s1 {
+          color: #97c279;
+      }
+      .pl-k,
+      .pl-kolp,
+      .pl-mc,
+      .pl-pde {
+          color: #c578dd;
+      }
+      .pl-mi,
+      .pl-pdi {
+          color: #c578dd;
+          font-style: italic;
+      }
+      .pl-mp,
+      .pl-stp {
+          color: #818896;
+      }
+      .pl-mdh,
+      .pl-mdi,
+      .pl-mdr {
+          font-weight: 400;
+      }
+      .pl-mdht,
+      .pl-mi1 {
+          color: #97c279;
+          background: #020;
+      }
+      .pl-md,
+      .pl-mdhf {
+          color: #df6b75;
+          background: #200;
+      }
+      .pl-corl {
+          color: #df6b75;
+          text-decoration: underline;
+      }
+      .pl-ib {
+          background: #df6b75;
+      }
+      .pl-ii {
+          background: #e0c184;
+          color: #fff;
+      }
+      .pl-iu {
+          background: #e05151;
+      }
+      .pl-ms1 {
+          color: #aab1bf;
+          background: #373b41;
+      }
+      .pl-c1,
+      .pl-cn,
+      .pl-e,
+      .pl-eoa,
+      .pl-eoac,
+      .pl-eoac .pl-pde,
+      .pl-kou,
+      .pl-mm,
+      .pl-mp .pl-s3,
+      .pl-mq,
+      .pl-s3,
+      .pl-sok,
+      .pl-sv,
+      .pl-mb {
+          color: #d19965;
+      }
+      .pl-enc,
+      .pl-entc,
+      .pl-pse .pl-s2,
+      .pl-s2,
+      .pl-sc,
+      .pl-smp,
+      .pl-sr .pl-sre,
+      .pl-stj,
+      .pl-v,
+      .pl-pdb {
+          color: #e4bf7a;
+      }
+      .pl-ent,
+      .pl-entl,
+      .pl-entm,
+      .pl-mh,
+      .pl-pdv,
+      .pl-smi,
+      .pl-sol,
+      .pl-mdh,
+      .pl-mdi {
+          color: #df6b75;
+      }
+    }
+    [theme=black] & {
+      // imported from https://github.com/lonekorean/gist-syntax-themes/blob/master/stylesheets/one-dark.css
+      .highlight {
+        background: #141414;
+      }
+      .blob-num,
+      .blob-code-inner,
+      .highlight,
+      .pl-enm,
+      .pl-ko,
+      .pl-mo,
+      .pl-mp1 .pl-sf,
+      .pl-ms,
+      .pl-pdc1,
+      .pl-scp,
+      .pl-smc,
+      .pl-som,
+      .pl-va,
+      .pl-vpf,
+      .pl-vpu,
+      .pl-mdr {
+          color: #aab1bf;
+      }
+      .pl-mb,
+      .pl-pdb {
+          font-weight: 700;
+      }
+      .pl-c,
+      .pl-c span,
+      .pl-pdc {
+          color: #5b6270;
+          font-style: italic;
+      }
+      .pl-sr .pl-cce {
+          color: #56b5c2;
+          font-weight: 400;
+      }
+      .pl-ef,
+      .pl-en,
+      .pl-enf,
+      .pl-eoai,
+      .pl-kos,
+      .pl-mh .pl-pdh,
+      .pl-mr {
+          color: #61afef;
+      }
+      .pl-ens,
+      .pl-vi {
+          color: #be5046;
+      }
+      .pl-enti,
+      .pl-mai .pl-sf,
+      .pl-ml,
+      .pl-sf,
+      .pl-sr,
+      .pl-sr .pl-sra,
+      .pl-src,
+      .pl-st,
+      .pl-vo {
+          color: #56b5c2;
+      }
+      .pl-eoi,
+      .pl-mri,
+      .pl-pds,
+      .pl-pse .pl-s1,
+      .pl-s,
+      .pl-s1 {
+          color: #97c279;
+      }
+      .pl-k,
+      .pl-kolp,
+      .pl-mc,
+      .pl-pde {
+          color: #c578dd;
+      }
+      .pl-mi,
+      .pl-pdi {
+          color: #c578dd;
+          font-style: italic;
+      }
+      .pl-mp,
+      .pl-stp {
+          color: #818896;
+      }
+      .pl-mdh,
+      .pl-mdi,
+      .pl-mdr {
+          font-weight: 400;
+      }
+      .pl-mdht,
+      .pl-mi1 {
+          color: #97c279;
+          background: #020;
+      }
+      .pl-md,
+      .pl-mdhf {
+          color: #df6b75;
+          background: #200;
+      }
+      .pl-corl {
+          color: #df6b75;
+          text-decoration: underline;
+      }
+      .pl-ib {
+          background: #df6b75;
+      }
+      .pl-ii {
+          background: #e0c184;
+          color: #fff;
+      }
+      .pl-iu {
+          background: #e05151;
+      }
+      .pl-ms1 {
+          color: #aab1bf;
+          background: #373b41;
+      }
+      .pl-c1,
+      .pl-cn,
+      .pl-e,
+      .pl-eoa,
+      .pl-eoac,
+      .pl-eoac .pl-pde,
+      .pl-kou,
+      .pl-mm,
+      .pl-mp .pl-s3,
+      .pl-mq,
+      .pl-s3,
+      .pl-sok,
+      .pl-sv,
+      .pl-mb {
+          color: #d19965;
+      }
+      .pl-enc,
+      .pl-entc,
+      .pl-pse .pl-s2,
+      .pl-s2,
+      .pl-sc,
+      .pl-smp,
+      .pl-sr .pl-sre,
+      .pl-stj,
+      .pl-v,
+      .pl-pdb {
+          color: #e4bf7a;
+      }
+      .pl-ent,
+      .pl-entl,
+      .pl-entm,
+      .pl-mh,
+      .pl-pdv,
+      .pl-smi,
+      .pl-sol,
+      .pl-mdh,
+      .pl-mdi {
+          color: #df6b75;
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/layouts/partials/extend_footer.html b/layouts/partials/extend_footer.html
index 58d407864..0578f95eb 100644
--- a/layouts/partials/extend_footer.html
+++ b/layouts/partials/extend_footer.html
@@ -47,3 +47,53 @@
 -->
 
 
+<script>
+forEach(document.querySelectorAll('.highlight > .chroma'), $chroma => {
+    const $codeElements = $chroma.querySelectorAll('pre.chroma > code')
+    if ($codeElements.length) {
+      const $code = $codeElements[$codeElements.length - 1]
+      const $header = document.createElement('div')
+      $header.className = 'code-header ' + $code.className.toLowerCase()
+      const $title = document.createElement('span')
+      $title.classList.add('code-title')
+      $title.insertAdjacentHTML('afterbegin', '<i class="arrow fas fa-chevron-right fa-fw"></i>')
+      $title.addEventListener('click', () => {
+        const content = $chroma.getElementsByClassName('table-wrapper')[0]
+        if ($chroma.classList.contains('open')) {
+          content.style.maxHeight = null
+        } else {
+          content.style.maxHeight = content.scrollHeight + 'px'
+        }
+        $chroma.classList.toggle('open')
+      }, false)
+      $header.appendChild($title)
+      const $ellipses = document.createElement('span')
+      $ellipses.insertAdjacentHTML('afterbegin', '<i class="fas fa-ellipsis-h fa-fw"></i>')
+      $ellipses.classList.add('ellipses')
+      $ellipses.addEventListener('click', () => {
+        $chroma.classList.add('open')
+      }, false)
+      $header.appendChild($ellipses)
+      const $copy = document.createElement('span')
+      $copy.insertAdjacentHTML('afterbegin', '<i class="far fa-copy fa-fw"></i>')
+      $copy.classList.add('copy')
+      const code = $code.innerText
+      if (window.config.code.maxShownLines < 0 || code.split('\n').length < window.config.code.maxShownLines + 2) $chroma.classList.add('open')
+      if (window.config.code.copyTitle) {
+        $copy.setAttribute('data-clipboard-text', code)
+        $copy.title = window.config.code.copyTitle
+        const clipboard = new ClipboardJS($copy)
+        clipboard.on('success', _e => {
+          animateCSS($code, 'animate__flash')
+          $copy.firstElementChild.className = 'fas fa-check fa-fw'
+          setTimeout(() => {
+            $copy.firstElementChild.className = 'far fa-copy fa-fw'
+          }, 3000)
+        })
+        $header.appendChild($copy)
+      }
+      $chroma.insertBefore($header, $chroma.firstChild)
+    }
+  })
+
+</script>
\ No newline at end of file