Update line number alignement

digitalocean · Mar 8, 2024 · 8c33508 · 8c33508
1 parent 1f893cc
commit 8c33508
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }