Align code-block line numbers to the right (#96)

* Update line number alignement * Fix stylelint issues * Refactor to use only CSS * Replace direction with alignment * Update copyright and changelog --------- Co-authored-by: szabi <[email protected]>
digitalocean · Mar 13, 2024 · d4947ef · d4947ef
1 parent 1f893cc
commit d4947ef
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ Any non-code changes should be prefixed with `(docs)`.
 See `PUBLISH.md` for instructions on how to publish a new version.
 -->
 
+- (patch) Align code-block line numbers to the right
 
 ## v1.12.2 - 081867e
 

diff --git a/styles/_code_prefix.scss b/styles/_code_prefix.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2024 DigitalOcean
 
 Licensed under the Apache License, Version 2.0 (the "License") !default;
 you may not use this file except in compliance with the License.
@@ -51,6 +51,28 @@ pre {
                         &::before {
                             border-right: 1px solid rgba($white, 0.5);
                             padding-right: 5px;
+                            text-align: right;
+                            width: 2ch;
+                        }
+
+                        &:first-child:nth-last-child(n + 10)::before,
+                        &:first-child:nth-last-child(n + 10) ~ li::before {
+                            width: 3ch;
+                        }
+
+                        &:first-child:nth-last-child(n + 100)::before,
+                        &:first-child:nth-last-child(n + 100) ~ li::before {
+                            width: 4ch;
+                        }
+
+                        &:first-child:nth-last-child(n + 1000)::before,
+                        &:first-child:nth-last-child(n + 1000) ~ li::before {
+                            width: 5ch;
+                        }
+
+                        &:first-child:nth-last-child(n + 10000)::before,
+                        &:first-child:nth-last-child(n + 10000) ~ li::before {
+                            width: 6ch;
                         }
                     }
                 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ Any non-code changes should be prefixed with `(docs)`. @@
     See `PUBLISH.md` for instructions on how to publish a new version.
     -->
+    - (patch) Align code-block line numbers to the right
     ## v1.12.2 - 081867e
@@ Expand Down @@