Fix long line numbering

facebook · Apr 7, 2022 · af5f8e5 · af5f8e5
1 parent 12286a5
commit af5f8e5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -140,14 +140,22 @@ export default function CodeBlock({
                     lineProps.className += ' docusaurus-highlight-code-line';
                   }
 
+                  const lineTokens = line.map((token, key) => (
+                    <span key={key} {...getTokenProps({token, key})} />
+                  ));
+
                   return (
                     <span key={i} {...lineProps}>
-                      {shouldShowLineNumbers && (
-                        <span className={styles.codeLineNumber} />
+                      {shouldShowLineNumbers ? (
+                        <>
+                          <span className={styles.codeLineNumber} />
+                          <span className={styles.codeLineContent}>
+                            {lineTokens}
+                          </span>
+                        </>
+                      ) : (
+                        lineTokens
                       )}
-                      {line.map((token, key) => (
-                        <span key={key} {...getTokenProps({token, key})} />
-                      ))}
                       <br />
                     </span>
                   );

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css
@@ -52,7 +52,8 @@
 }
 
 .codeBlockLinesWithNumbering {
-  padding-left: 0;
+  display: table;
+  padding: var(--ifm-pre-padding) 0;
 }
 
 @media print {
@@ -62,11 +63,14 @@
 }
 
 .codeLine {
+  display: table-row;
   counter-increment: line-count;
 }
 
 .codeLineNumber {
-  display: inline-block;
+  display: table-cell;
+  text-align: right;
+  width: 1%;
   position: sticky;
   left: 0;
   padding: 0 var(--ifm-pre-padding);
@@ -81,3 +85,7 @@
 :global(.docusaurus-highlight-code-line) .codeLineNumber::before {
   opacity: 0.8;
 }
+
+.codeLineContent {
+  padding-right: var(--ifm-pre-padding);
+}