feat: Code blocks can now optionally display line numbers (#4324)

* feat: Code blocks can now optionally display line numbers as a user preference * Touch more breathing room
2022-10-24 09:44:46 -04:00
parent 708f9a3fd6
commit 87761e9bf2
10 changed files with 103 additions and 20 deletions
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -864,6 +864,21 @@ mark {
  }
 }

+.code-block.with-line-numbers {
+  pre {
+    padding-left: calc(var(--line-number-gutter-width, 0) * 1em + 1.5em);
+  }
+}
+
+.code-block .line-numbers {
+  position: absolute;
+  left: 1em;
+  color: ${props.theme.textTertiary};
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+
 .mermaid-diagram-wrapper {
  display: flex;
  align-items: center;