From 8c3350819ad91586bbff2073f70b708c7bdc60fd Mon Sep 17 00:00:00 2001
From: szabi <v-smolnar@digitalocean.com>
Date: Fri, 8 Mar 2024 21:36:51 +0200
Subject: [PATCH] Update line number alignement

---
 CHANGELOG.md               |  1 +
 dev/render.js              |  1 +
 modifiers/fence_classes.js |  7 ++++++
 styles/_code_prefix.scss   | 45 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 54 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0649827..5ed9d9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ breaking changes to the options supported by the plugin will be shipped as a bre
 
 ## Unreleased changes
 
+- (minor) Align code-block line numbers to the right.
 <!--
 All changes being submitted through PRs should be added to this section.
 Please add a new list item to the top of this section with a summary of the change.
diff --git a/dev/render.js b/dev/render.js
index 51d6d68..90d7b77 100644
--- a/dev/render.js
+++ b/dev/render.js
@@ -27,6 +27,7 @@ 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 f7a0640..18ef57e 100644
--- a/modifiers/fence_classes.js
+++ b/modifiers/fence_classes.js
@@ -77,6 +77,13 @@ 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 7006bd0..6bcdcf4 100644
--- a/styles/_code_prefix.scss
+++ b/styles/_code_prefix.scss
@@ -50,11 +50,56 @@ pre {
 
                         &::before {
                             border-right: 1px solid rgba($white, 0.5);
+                            direction: rtl;
                             padding-right: 5px;
                         }
                     }
                 }
             }
+            &.line-number-width-2 {
+                code {
+                    ol {
+                        li {
+                            &::before {
+                                width: 3ch;
+                            }
+                        }
+                    }
+                }
+            }
+            &.line-number-width-3 {
+                code {
+                    ol {
+                        li {
+                            &::before {
+                                width: 4ch;
+                            }
+                        }
+                    }
+                }
+            }
+            &.line-number-width-4 {
+                code {
+                    ol {
+                        li {
+                            &::before {
+                                width: 5ch;
+                            }
+                        }
+                    }
+                }
+            }
+            &.line-number-width-5 {
+                code {
+                    ol {
+                        li {
+                            &::before {
+                                width: 6ch;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }