Add collapsable codeblock

themes/maik-blog/assets/scss/_code.scss

@@ -0,0 +1,120 @@
+.collapsable-code {
+    position: relative;
+    width: 100%;
+    margin: 40px 0;
+
+    input[type="checkbox"] {
+        position: absolute;
+        visibility: hidden;
+    }
+
+    .highlight,
+    .code-toolbar .highlight {
+        max-height: 80vh;
+        overflow: auto;
+
+        transition: max-height 0.15s ease;
+
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+    }
+
+    input[type="checkbox"]:checked {
+
+        ~.highlight,
+        ~.code-toolbar .highlight {
+            max-height: 0;
+
+            padding: 0;
+            border-top: none;
+            overflow: hidden;
+        }
+
+        ~.code-toolbar {
+            padding: 0;
+            border-top: none;
+
+            .toolbar {
+                display: none;
+            }
+        }
+
+        ~label {
+            border-radius: 10px;
+        }
+
+        ~label .collapsable-code__toggle:after {
+            content: attr(data-label-expand);
+        }
+    }
+
+    label {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        background: $light-background-secondary;
+        padding: 10px;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        min-width: 30px;
+        min-height: 30px;
+        margin: 0;
+        cursor: pointer;
+
+        .dark-theme & {
+            background: $dark-background-secondary;
+        }
+    }
+
+    &__title {
+        flex: 1;
+        color: $light-color;
+        padding: 3px 10px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        font-weight: 600;
+
+        .dark-theme & {
+            color: $dark-color;
+        }
+    }
+
+    &__language {
+        background: $light-background;
+        color: $light-color;
+        border-radius: 10px;
+        padding: 3px 10px;
+        font-weight: 600;
+
+        .dark-theme & {
+            background: $dark-background;
+            color: $dark-color;
+        }
+    }
+
+    &__toggle {
+        color: $light-color;
+        font-size: 16px;
+        padding: 3px 10px;
+        font-weight: 700;
+
+        &:after {
+            content: attr(data-label-collapse);
+        }
+
+        .dark-theme & {
+            color: $dark-color;
+        }
+    }
+
+    pre {
+        margin-top: 0;
+        margin-bottom: 0;
+        border-radius: 0;
+    }
+
+    .code-toolbar {
+        margin: 0;
+    }
+}

themes/maik-blog/assets/scss/_main.scss

@@ -1,3 +1,18 @@
+/* Webkit Scrollbar Customize */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: #212020;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+
+  &:hover {
+    background: #dcdcdc;
+  }
+}
+
 html {
   box-sizing: border-box;
   line-height: 1.6;
@@ -191,7 +206,7 @@ code {
 }
 
 pre {
-  background: #212020;
+  // background: #212020;
   padding: 10px 10px 10px 20px;
   border-radius: 8px;
   font-size: .95rem;

themes/maik-blog/assets/scss/_normalize.scss

@@ -7,22 +7,6 @@
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
-
-/* Webkit Scrollbar Customize */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-  background: #212020;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-
-  &:hover {
-    background: #dcdcdc;
-  }
-}
-
 html {
   line-height: 1.15; // 1
   -webkit-text-size-adjust: 100%; // 2

themes/maik-blog/assets/scss/main.scss

@@ -14,3 +14,4 @@
 @import "single";
 @import "footer";
 @import "sharing-buttons";
+@import "code";

themes/maik-blog/layouts/shortcodes/code.html

@@ -10,7 +10,7 @@
     <span class="collapsable-code__toggle" data-label-expand="{{ .Get "expand" | default "△" }}"
       data-label-collapse="{{ .Get "collapse" | default "▽" }}"></span>
   </label>
-  <pre {{ if .Get "language" }}class="language-{{ .Get "language" }}" {{ end }}><code>{{ .Inner | string }}</code></pre>
+  {{ .Inner | markdownify }}
 </div>
 {{ else }}
 {{ errorf "If you want to use the \"collapsable code\" shortcode, you need to pass a mandatory \"language\" param. The issue occured in %q (%q)" .Page.File .Page.Permalink }}