〰 Add line for algorithms (#251)

packages/myst-to-react/src/basic.tsx

@@ -4,6 +4,7 @@ import type { NodeRenderer } from '@myst-theme/providers';
 import classNames from 'classnames';
 import { Tooltip } from './components/index.js';
 import { MyST } from './MyST.js';
+import type { GenericNode } from 'myst-common';
 
 type TableExts = {
   rowspan?: number;
@@ -46,6 +47,7 @@ type BasicNodeRenderers = {
   emphasis: NodeRenderer<spec.Emphasis>;
   link: NodeRenderer<spec.Link>;
   paragraph: NodeRenderer<spec.Paragraph>;
+  algorithmLine: NodeRenderer<GenericNode>;
   break: NodeRenderer<spec.Break>;
   inlineMath: NodeRenderer<spec.InlineMath>;
   math: NodeRenderer<spec.Math>;
@@ -129,6 +131,17 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
       </p>
     );
   },
+  algorithmLine({ node }) {
+    // Used in algorithms
+    const style = {
+      paddingLeft: `${(node.indent ?? 0) + 2}rem`,
+    };
+    return (
+      <p className="line" style={style} data-line-number={node.enumerator}>
+        <MyST ast={node.children} />
+      </p>
+    );
+  },
   break() {
     return <br />;
   },

styles/app.css

@@ -12,3 +12,4 @@
 @import './tasklists.css';
 @import './grid.css';
 @import './hover.css';
+@import './proof.css';

styles/proof.css

@@ -0,0 +1,16 @@
+p[data-line-number].line::before {
+  content: attr(data-line-number);
+  position: absolute;
+  left: 0;
+  font-family: monospace;
+  width: 1.25em;
+  text-align: right;
+  user-select: none;
+  color: gray;
+  overflow: hidden;
+}
+
+p.line {
+  position: relative;
+  margin: 0;
+}