Refactor to use only CSS

digitalocean · Mar 11, 2024 · 335371e · 335371e
1 parent 9f4f783
commit 335371e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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;
                         }
                     }
                 }