Add a code figure and get highlighted lines to wrap

layouts/shortcodes/figures/code.html

@@ -0,0 +1,5 @@
+{{ $lang := .Get "lang" }}
+{{ $trimmedCode := trim .Inner "\n " }}
+<figure class="code">
+    {{ transform.Highlight $trimmedCode $lang }}
+</figure>

static/styles/monokai.css

@@ -1,5 +1,4 @@
 .chroma { line-height: 1.4; }
-/* Line */ .chroma .line { display: flex; }
 
 /* Background */ .bg { color: #272822; background-color: #fafafa }
 /* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }

static/styles/root.css

@@ -22,6 +22,8 @@
     --font-size-min: 7px;
     --font-size-max: 8px;
 
+    --body-item-spacing: 1em;
+
     --content-width: 80rem;
 
     --transition-duration: 0.7s;
@@ -72,7 +74,7 @@ figure {
     border-radius: 6px;
     display: inline-block;
     margin: 0;
-    margin-block: 0;
+    margin-block: 0 var(--body-item-spacing);
     margin-inline: 0;
     overflow: hidden;
     max-width: var(--content-width);
@@ -293,11 +295,25 @@ p {
     letter-spacing: 0.025em;
     line-height: 1.4;
 }
-p { margin-block-end: 1em; }
+p { margin-block-end: var(--body-item-spacing); }
 p:last-child { margin-block-end: 0; }
 
-pre {
+/** SYNTAX HIGHLIGHTING **/
-    margin-block-bottom: 1em;
+
+.highlight .line {
+    display: grid;
+    grid-template-columns: max-content auto;
+}
+
+.highlight .ln a {
+    -webkit-user-select: none;
+    -moz-use-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.highlight .cl {
+    white-space: pre-wrap;
 }
 
 /** HELPER CLASSES **/