From 335371e602652f5e506e502194fcc4a14ca79897 Mon Sep 17 00:00:00 2001
From: szabi <v-smolnar@digitalocean.com>
Date: Mon, 11 Mar 2024 10:20:29 +0200
Subject: [PATCH] Refactor to use only CSS

---
 dev/render.js              |  1 -
 modifiers/fence_classes.js |  7 -----
 styles/_code_prefix.scss   | 53 ++++++++++----------------------------
 3 files changed, 13 insertions(+), 48 deletions(-)

diff --git a/dev/render.js b/dev/render.js
index 90d7b77..51d6d68 100644
--- a/dev/render.js
+++ b/dev/render.js
@@ -27,7 +27,6 @@ const md = require('markdown-it')({
     fence_classes: {
         allowedClasses: [
             'prefixed', 'line_numbers', 'command', 'super_user', 'custom_prefix',
-            'line-number-width-2', 'line-number-width-3', 'line-number-width-4', 'line-number-width-5',
             ...[ 'local', 'second', 'third', 'fourth', 'fifth' ].map(env => `environment-${env}`),
         ],
     },
diff --git a/modifiers/fence_classes.js b/modifiers/fence_classes.js
index 18ef57e..f7a0640 100644
--- a/modifiers/fence_classes.js
+++ b/modifiers/fence_classes.js
@@ -77,13 +77,6 @@ module.exports = (md, options) => {
 
         // Extract the class attribute
         const classes = tag.slice(classPos.start + 7, classPos.end - 1).split(' ');
-
-        // Calculate and append line number width class if needed.
-        const lineNumberDigitCount = (content.match(/<li/g) || []).length.toString().length;
-        if (lineNumberDigitCount > 1) {
-            classes.push(`line-number-width-${lineNumberDigitCount}`);
-        }
-
         const permitted = classes.filter(cls => optsObj.allowedClasses.includes(cls));
 
         // Generate the new tag
diff --git a/styles/_code_prefix.scss b/styles/_code_prefix.scss
index 83fe6d7..ad0b25a 100644
--- a/styles/_code_prefix.scss
+++ b/styles/_code_prefix.scss
@@ -52,54 +52,27 @@ pre {
                             border-right: 1px solid rgba($white, 0.5);
                             direction: rtl;
                             padding-right: 5px;
+                            width: 2ch;
                         }
-                    }
-                }
-            }
 
-            &.line-number-width-2 {
-                code {
-                    ol {
-                        li {
-                            &::before {
-                                width: 3ch;
-                            }
+                        &:first-child:nth-last-child(n + 10)::before,
+                        &:first-child:nth-last-child(n + 10) ~ li::before {
+                            width: 3ch;
                         }
-                    }
-                }
-            }
 
-            &.line-number-width-3 {
-                code {
-                    ol {
-                        li {
-                            &::before {
-                                width: 4ch;
-                            }
+                        &:first-child:nth-last-child(n + 100)::before,
+                        &:first-child:nth-last-child(n + 100) ~ li::before {
+                            width: 4ch;
                         }
-                    }
-                }
-            }
 
-            &.line-number-width-4 {
-                code {
-                    ol {
-                        li {
-                            &::before {
-                                width: 5ch;
-                            }
+                        &:first-child:nth-last-child(n + 1000)::before,
+                        &:first-child:nth-last-child(n + 1000) ~ li::before {
+                            width: 5ch;
                         }
-                    }
-                }
-            }
 
-            &.line-number-width-5 {
-                code {
-                    ol {
-                        li {
-                            &::before {
-                                width: 6ch;
-                            }
+                        &:first-child:nth-last-child(n + 10000)::before,
+                        &:first-child:nth-last-child(n + 10000) ~ li::before {
+                            width: 6ch;
                         }
                     }
                 }