Added codeblocks v1 support to new theme (#131)

Author: lamATnginx

assets/css/v2/style.css

@@ -20,7 +20,8 @@
     --color-footer-text: #E2E2E2;
     --color-product-title: #8D8D8D;
     --color-table-divider: #CCCCCC;
-
+    --color-codeblock-code-with-comment: #00963926;
+    
     --sidebar-margin: 24px;
     --sidebar-line-box-side-length: 8px;
     --sidebar-line-box-top: 6px;
@@ -33,13 +34,20 @@
     --table-min-column-spacing-narrow: 1.5rem;
     --table-min-column-spacing-wide: 0.75rem;
     --table-header-bottom-spacing: 1rem;
-    --table-line-extension: 1rem;
     --table-line-height: 1px;
     --text-content-width-iphone-13: 30rem;
     --text-content-width-mbp-14: 40rem;
     --text-content-width-mbp-16: 50rem;
     --text-content-width-4k-display: 60rem;
+    --codeblock-comment-diff: 2rem;
+    --codeblock-comment-space-between: 10px;
+    --codeblock-horizontal-line-length: 2rem;
+    --codeblock-horizontal-line-overflow: 0.25rem;
+    --codeblock-border-thickness: 1px;
+    --codeblock-code-section-padding-left: 1rem;
+    --codeblock-line-box-side-length: 4px;
     --component-gap: 3.5rem;
+    --overflow-gutter-extension: 1rem;
 
 }
 
@@ -667,8 +675,8 @@ table {
         position: absolute;
         border-bottom: var(--table-line-height) solid var(--color-table-divider);
         bottom: 0;
-        left: calc(-1 * var(--table-line-extension));
-        width: calc(100% + (2 * var(--table-line-extension)));
+        left: calc(-1 * var(--overflow-gutter-extension));
+        width: calc(100% + (2 * var(--overflow-gutter-extension)));
     }
 }
 
@@ -736,16 +744,123 @@ blockquote p:last-child {
     margin: 0 auto;
 }
 
+/* Codeblocks */
+.highlight {
+    grid-column: 1 / -1 !important;
+    position: relative;
+    margin-left: calc(var(--overflow-gutter-extension) / -2);
+    width: calc(100% + var(--overflow-gutter-extension));
+}
+
 code {
     font-weight: light;
     font-family: 'JetBrains Mono', monospace;
+    display: flex;
+    flex-direction: column;
 }
 
 pre.chroma {
     overflow-x: auto;
     box-sizing: border-box;
 }
 
+code .line {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: " code "
+                         " comment ";
+}
+
+code .line:has(.comment) .code {
+    display: inline-block;
+    height: fit-content;
+    white-space: pre-wrap;
+    width: 100%;
+    background-color: var(--color-codeblock-code-with-comment);
+    margin: var(--codeblock-comment-space-between) 0;
+    position: relative;
+    grid-column: 1 / -1;
+}
+
+code .line:not(:has(.comment)) .code {
+    grid-column: 1 / -1;
+    grid-row: 1;
+}
+
+code:not(:has(.comment)) .code {
+    /* For codeblocks without comments */
+    grid-column: 1 / -1 !important;
+    grid-row: 1;
+}
+
+code .code {
+    padding-left: var(--codeblock-code-section-padding-left);
+    grid-area: code;
+}
+
+code .comment {
+    display: inline-block;
+    white-space: normal;
+    margin: var(--codeblock-comment-space-between) 0;
+    width: calc(100vw - (var(--codeblock-comment-diff) * 2));
+    border: black var(--codeblock-border-thickness) solid;
+    box-shadow: 3px 3px 0px var(--color-shadow);
+    padding: 8px;
+    grid-column: 1 / -1;
+}
+
+code .line:has(.comment) .code::before {
+    /* Vertical Lines */
+    content: '';
+    position: absolute;
+    border-left: black var(--codeblock-border-thickness) solid;
+    left: calc(var(--codeblock-horizontal-line-overflow) + 1px);
+    top: 10px;
+    height: calc(100% + 0.7rem);
+}
+
+code .line:has(.comment) .code::after {
+    /* Block */
+    content: '';
+    background-color: black;
+    position: absolute;
+    height: var(--codeblock-line-box-side-length);
+    width: var(--codeblock-line-box-side-length);
+    top: calc(10px - (var(--codeblock-border-thickness) * 1.5));
+    left: var(--codeblock-horizontal-line-overflow); 
+}
+
+@media (min-width: 768px) { /* Tablet */
+    code .line:has(.comment) .code {
+        grid-column: 2 / -1;
+    }
+
+    code .comment {
+        grid-column: 1;
+        width: calc(100% - (var(--codeblock-comment-diff)));
+    }
+
+    code .line:not(:has(.comment)) .code {
+        grid-column: 2 / -1;
+    }
+
+    code .line {
+        /* Readjust the areas to be more responsive */
+        grid-template-columns: 40% 60%;
+        grid-template-areas: "comment code";
+    }
+
+    code .line:has(.comment) .code::before {
+        /* Horizontal Lines */
+        border-left: none;
+        border-top: black var(--codeblock-border-thickness) solid;
+        left: calc(var(--codeblock-comment-diff) * -1);
+        width: calc(var(--codeblock-horizontal-line-length) + var(--codeblock-horizontal-line-overflow));
+    }
+}
+
+/* Logo */
 .f5-logo-footer {
     height: 32px;
     width: 32px;

layouts/_default/_markup/render-codeblock.html

@@ -0,0 +1,14 @@
+{{ $code := .Inner | safeHTML }}
+{{ $lines := split $code "\n" }}
+<div class="highlight">
+    <pre class="chroma" tabindex="0">
+        <code class="language-{{ .Type }}">
+            {{ range $lines }}
+                <span class="line">{{ $line := . }}{{ $parts := split $line "#" }}<span class="code">{{ index $parts 0 | safeHTML }}
+</span>{{ $commentPart := "" }}{{ if gt (len $parts) 1 }}<span class="comment">{{ index $parts 1 | safeHTML }}</span>{{ end }}</span>
+            {{ end }}
+        </code>
+    </pre> 
+</div>
+
+<!-- ABSOLUTELY DO NOT CHANGE THIS ORDER -->