From 0f2d9a4dc114674aede885acf2f125dd03749f08 Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Fri, 3 Jan 2025 20:44:46 +0100
Subject: [PATCH] Properly support line numbers on highlight

---
 themes/maik-blog/assets/scss/_main.scss | 77 ++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss
index 0f0b911..a03aaff 100644
--- a/themes/maik-blog/assets/scss/_main.scss
+++ b/themes/maik-blog/assets/scss/_main.scss
@@ -15,7 +15,6 @@
 
 html {
     box-sizing: border-box;
-    line-height: 1.6;
     letter-spacing: 0.06em;
     scroll-behavior: smooth;
 }
@@ -570,3 +569,79 @@ table {
         }
     }
 }
+
+.highlight {
+    &:has(table) {
+        margin: 0.95em 0;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    pre {
+        padding-left: 0;
+        padding-right: 0;
+
+        .line {
+            padding-left: 20px;
+            padding-right: 10px;
+        }
+    }
+
+    code {
+        display: block;
+        width: max-content;
+        min-width: 100%;
+    }
+
+    table {
+        width: 100% !important;
+        display: block;
+        background: inherit;
+        position: relative;
+        border-radius: 0;
+        font-size: inherit;
+
+        tbody {
+            display: block;
+
+            tr {
+                display: flex;
+                flex-direction: row;
+
+                td {
+                    overflow-wrap: anywhere;
+                    word-break: normal;
+                    width: 1px; // flex will override
+
+                    pre {
+                        margin: 0;
+
+                        @media #{$media-size-phone} {
+                            white-space: pre;
+                        }
+                    }
+
+                    &:first-of-type {
+                        // line numbers
+                        flex: 0 0 max-content;
+
+                        .lnt {
+                            padding-left: 14px;
+                            padding-right: 14px;
+                            margin-right: 0;
+                        }
+                    }
+
+                    &:last-of-type {
+                        // code
+                        flex: 1 1 auto;
+
+                        pre {
+                            padding-left: 0px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}