From 0e622288ff9c5f681f12823947fe3a18247efede Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 20 Feb 2023 09:08:07 -0500
Subject: [PATCH] fix: Line-numbering in code blocks runs horizontal on Linux

closes #4901
---
 shared/editor/components/Styles.ts |  3 +++
 shared/editor/plugins/Prism.ts     | 11 ++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts
index fa14fe142..d308d2a88 100644
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -998,6 +998,9 @@ mark {
     position: absolute;
     left: 1em;
     top: calc(1px + 0.75em);
+    width: calc(var(--line-number-gutter-width,0) * 1em + .25em);
+    word-break: break-all;
+    text-align: right;
 
     font-family: ${props.theme.fontFamilyMono};
     font-size: 13px;
diff --git a/shared/editor/plugins/Prism.ts b/shared/editor/plugins/Prism.ts
index 65cc2f56d..549f2f5ee 100644
--- a/shared/editor/plugins/Prism.ts
+++ b/shared/editor/plugins/Prism.ts
@@ -1,4 +1,4 @@
-import { flattenDeep } from "lodash";
+import { flattenDeep, padStart } from "lodash";
 import { Node } from "prosemirror-model";
 import { Plugin, PluginKey, Transaction } from "prosemirror-state";
 import { findBlockNodes } from "prosemirror-utils";
@@ -99,19 +99,20 @@ function getDecorations({
       if (lineNumbers) {
         const lineCount =
           (block.node.textContent.match(/\n/g) || []).length + 1;
+        const gutterWidth = String(lineCount).length;
 
         const lineCountText = new Array(lineCount)
           .fill(0)
-          .map((_, i) => i + 1)
-          .join("\n");
+          .map((_, i) => padStart(`${i + 1}`, gutterWidth, " "))
+          .join(" ");
 
         lineDecorations.push(
           Decoration.node(
             block.pos,
             block.pos + block.node.nodeSize,
             {
-              "data-line-numbers": lineCountText,
-              style: `--line-number-gutter-width: ${String(lineCount).length};`,
+              "data-line-numbers": `${lineCountText} `,
+              style: `--line-number-gutter-width: ${gutterWidth};`,
             },
             {
               key: `line-${lineCount}-gutter`,