Repository: jupyter-book/jupyterlab-myst (language: python)

Issue:
CSS should be more consistent with "classical" JLab for now
### Describe the bug

**context**

Since this is a new renderer that we'll want to get buy-in from the community for, my suggestion would be to first keep the CSS/layout changes to an absolute minimum, focusing only on implementing support for new features of MyST that extend beyond what the default renderer offers.

Only once we reach parity on all core features + support for the unique MyST ones, should we explore in earnest modifications to the rendering behavior.

**bug**

These aren't strictly bugs, but I will list them here for starters. I'm happy to track this elsewhere/differently if it better fits the team! In all these screenshots, the left shows the "classic" JupyterLab renderer, with the mystjs 0.1.3 renderer on the right. Both are using JLab 3.6.1.

* Code cells use a different/smaller font. 

![image](https://user-images.githubusercontent.com/57394/217388753-05e3bf86-5fa6-4aa6-bbab-09cdef9569cb.png)

* Missing outline around active cell.

![image](https://user-images.githubusercontent.com/57394/217388989-dab481df-5e8e-4bea-9bc0-ab2c42239e27.png)

* Too much vertical space used. I think it's mostly due to extra vertical whitespace around headings, though there's also other font choices that have an impact, such as larger fonts for headings. I actually happen to like those, but I imagine they could be controversial, so again, perhaps better staged for later discussion separate from the core features of the renderer.

![image](https://user-images.githubusercontent.com/57394/217390270-40c833fe-b683-4835-b13a-bcec9d34c11b.png)

* Style changes in rendering of inline unformatted text:

![image](https://user-images.githubusercontent.com/57394/217390343-0e9fba6b-b44f-44d0-b5a6-33e85a310774.png)

* Same, but when that text is in a heading:

![image](https://user-images.githubusercontent.com/57394/217390610-efe6e590-84a5-4986-9281-1547477fbe77.png)

* Changes to rendering of code blocks. I actually like these a lot, so I'd be tempted to consider them "pure improvements" (esp. the addition of the little "copy" button, which I _love_). But perhaps in the interest of making this as easy to adopt/discuss with the community for adoption first as a "better renderer" we should keep the differences to an absolute minimum, and discuss rendering updates separately:

![image](https://user-images.githubusercontent.com/57394/217390927-f7d132bb-45e3-4425-9ce9-db2b2d522b5b.png)


### Reproduce the bug

All these can be seen with 0.1.3.

### List your environment

_No response_
set normal heading margins in css
tailwindcss-typography defaults to unusually big margins


Discussion / hints:
This is great, thanks for taking the time to put all the screenshots together 📸 -- I will have a think about how best to do this, we are relying heavily on a different css system (tailwind) and need to see how to merge it with Jupyter's -- this is possible, and how I did the links (i.e. use the JupyterLab css variables). I will take another look as well at the [CSS guidelines](https://jupyterlab.readthedocs.io/en/stable/developer/css.html).
Thx for being receptive @rowanc1! I'll keep using this issue to track all CSS-related small things, but LMK when any one of them is distinct enough to warrant breaking it out and I'm happy to do so. Else I'll just add new screenies here as I run into things.
One more (screenshots taken separately as I can't get the anchor links to appear in both at the same time, since I need to hover). Anchors... 

"Classic":

![image](https://user-images.githubusercontent.com/57394/217395970-d85afee6-04bb-4393-9d13-e03d19899aea.png)

MystJS:

![image](https://user-images.githubusercontent.com/57394/217396004-5ec712be-e80b-4fbb-8697-98d3328661d7.png)


The anchors should be partially addressed in https://github.com/executablebooks/myst-theme/pull/4, currently not using a ¶, but did add that option in the component a few days ago!
I've encountered some perhaps related buggy rendering in connection with headings:

![image](https://user-images.githubusercontent.com/7685034/222001682-0382e65a-9b1e-4421-9700-b63ef6d8a4bd.png)

The first heading level element is changed to h1, and moved above any preceding content.

After that, h2 level elements get so much extra vertical margin/padding they end up taking more space than if they were h1 level.

The screenshot is from jupyterlab 3.6.1 and jupyterlab_myst 1.1.1.

Thanks @tavin  -- the code is currently pulling out the first cell title to create a frontmatter block. I think this is probably unexpected behaviour as you were surprised, I will turn that into a bug in mystjs and get it fixed.

Thanks again for these comment on the styles, I want to take a more in-depth pass here soon to get things inline with expectations!
Hi @rowanc1 nice the heading/frontmatter issue will be fixed. In the meantime I've just learned that adding yaml frontmatter is a pretty decent workaround, thanks to your answer.

Now the top margin on the h2 level elements seems to be unrelated and indeed a CSS issue, in fact an explicit `margin-top:2em` coming from a myst style.


Fix patch:
diff --git a/src/MySTMarkdownCell.tsx b/src/MySTMarkdownCell.tsx
index 1562916..0da74e1 100644
--- a/src/MySTMarkdownCell.tsx
+++ b/src/MySTMarkdownCell.tsx
@@ -57,6 +57,7 @@ export class MySTMarkdownCell
     const parseComplete = parseContent(notebook);
     const widget = new Widget({ node: this.myst.node });
     widget.addClass('myst');
+    widget.addClass('jp-MarkdownOutput');
     this.addClass('jp-MySTMarkdownCell');
     this.inputArea.renderInput(widget);
     if (parseComplete) {
diff --git a/src/actions.ts b/src/actions.ts
index b0045fd..fbea407 100644
--- a/src/actions.ts
+++ b/src/actions.ts
@@ -127,5 +127,5 @@ export function notebookExecuted(
     `Markdown cell ${cell.model.id} was executed, waiting for render to complete ...`
   );
 
-  cell.doneRendering.then(() => executeUserExpressions(cell, ctx));
+  cell.doneRendering?.then(() => executeUserExpressions(cell, ctx));
 }
diff --git a/src/myst.ts b/src/myst.ts
index 688c027..633c95b 100644
--- a/src/myst.ts
+++ b/src/myst.ts
@@ -1,4 +1,5 @@
 import { mystParse } from 'myst-parser';
+import { liftChildren } from 'myst-common';
 import {
   mathPlugin,
   footnotesPlugin,
@@ -66,17 +67,21 @@ export function markdownParse(text: string): Root {
       }
     })
     .runSync(mdast as any);
+  // Lift children out of blocks for the next step
+  // We are working here as one cell at a time
+  liftChildren(mdast, 'block');
   return mdast as Root;
 }
 
-export function parseContent(
-  notebook: StaticNotebook
-): undefined | Promise<void> {
+export function parseContent(notebook: StaticNotebook): Promise<void> {
   const cells = getCellList(notebook)?.filter(
     // In the future, we may want to process the code cells as well, but not now
     cell => cell.model.type === 'markdown'
   );
-  if (!cells) return undefined;
+  if (!cells) {
+    // This is expected on the first render, we do not want to throw later
+    return Promise.resolve(undefined);
+  }
 
   const blocks = cells.map(cell => {
     const text = cell.model?.value.text ?? '';
@@ -101,8 +106,8 @@ export function parseContent(
     article: mdast as any
   };
   const { frontmatter: frontmatterRaw } = getFrontmatter(
-    // This is a bit weird, but if there is a YAML block in the first cell, this is where it will be.
-    mdast.children[0]?.children[0] as any,
+    // This is the first cell, which might have a YAML block or header.
+    mdast.children[0] as any,
     {
       removeYaml: true,
       removeHeading: true
@@ -134,7 +139,7 @@ export function parseContent(
 
   if (file.messages.length > 0) {
     // TODO: better error messages in the future
-    console.log(file.messages);
+    console.warn(file.messages.map(m => m.message).join('\n'));
   }
 
   // Render the full result in each cell using React
diff --git a/style/jupyterlab-typography.css b/style/jupyterlab-typography.css
index aec7265..edfd460 100644
--- a/style/jupyterlab-typography.css
+++ b/style/jupyterlab-typography.css
@@ -32,5 +32,15 @@
 
   .myst {
     @apply prose prose-stone dark:prose-invert break-words max-w-none w-full overflow-auto;
+
+    font-size: var(--jp-content-font-size1);
+    color: var(--jp-content-font-color1);
+
+    /* Comes from .jp-RenderedHTMLCommon */
+    padding-right: 20px;
+  }
+
+  .myst > *:last-child {
+    margin-bottom: 0.5em;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 1bbe769..0eb310b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,8 +20,59 @@ module.exports = {
       typography: theme => ({
         DEFAULT: {
           css: {
+            p: {
+              color: 'var(--jp-content-font-color1)',
+              fontFamily: 'var(--jp-content-font-family)',
+              fontSize: 'var(--jp-content-font-size1)',
+              lineHeight: 'var(--jp-content-line-height)',
+              marginTop: 0,
+              marginBottom: '1em'
+            },
+            'h1,h2,h3,h4,h5,h6': {
+              lineHeight: 'var(--jp-content-heading-line-height, 1)',
+              fontWeight: 'var(--jp-content-heading-font-weight, 500)',
+              fontStyle: 'normal',
+              marginTop: 'var(--jp-content-heading-margin-top, 1.2em)',
+              marginBottom: 'var(--jp-content-heading-margin-bottom, 0.8em)',
+              color: 'var(--jp-content-font-color1)'
+            },
+            'h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child':
+              {
+                marginTop: 'calc(0.5 * var(--jp-content-heading-margin-top))'
+              },
+            'h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child':
+              {
+                marginBottom:
+                  'calc(0.5 * var(--jp-content-heading-margin-bottom))'
+              },
+            h1: {
+              fontSize: 'var(--jp-content-font-size5)'
+            },
+            h2: {
+              fontSize: 'var(--jp-content-font-size4)'
+            },
+            h3: {
+              fontSize: 'var(--jp-content-font-size3)'
+            },
+            h4: {
+              fontSize: 'var(--jp-content-font-size2)'
+            },
+            h5: {
+              fontSize: 'var(--jp-content-font-size1)'
+            },
+            h6: {
+              fontSize: 'var(--jp-content-font-size0)'
+            },
             code: {
-              fontWeight: '400'
+              fontWeight: 'inherit',
+              color: 'var(--jp-content-font-color1)',
+              fontFamily: 'var(--jp-code-font-family)',
+              fontSize: 'inherit',
+              lineHeight: 'var(--jp-code-line-height)',
+              padding: 0,
+              whiteSpace: 'pre-wrap',
+              backgroundColor: 'var(--jp-layout-color2)',
+              padding: '1px 5px'
             },
             'code::before': {
               content: ''
@@ -51,14 +102,9 @@ module.exports = {
             }
           }
         },
-        invert: {
-          css: {
-            '--tw-prose-code': theme('colors.pink[500]')
-          }
-        },
         stone: {
           css: {
-            '--tw-prose-code': theme('colors.pink[600]')
+            '--tw-prose-bullets': 'var(--jp-content-font-color1)'
           }
         }
       }),


Test patch:
diff --git a/ui-tests/tests/notebook-run.spec.ts-snapshots/Notebook-Run-Run-Notebook-and-capture-cell-outputs-1-linux.png b/ui-tests/tests/notebook-run.spec.ts-snapshots/Notebook-Run-Run-Notebook-and-capture-cell-outputs-1-linux.png
index e73765d..ab70b2b 100644
Binary files a/ui-tests/tests/notebook-run.spec.ts-snapshots/Notebook-Run-Run-Notebook-and-capture-cell-outputs-1-linux.png and b/ui-tests/tests/notebook-run.spec.ts-snapshots/Notebook-Run-Run-Notebook-and-capture-cell-outputs-1-linux.png differ