Notebook UI heading tweaks

[christian-bromann]

Hi there 👋

I am Christian and part of the development team that has build a VS Code extension called Runme. It is an extension that renders markdown files as notebooks and allows them to execute/run the code snippets in their. Runme is currently featured on the VS Code Marketplace and grows fast day by day.

Some of the feedback we have received is that the markdown within notebooks doesn't render the same way markdown preview extension would render it. Here is example:

Markdown Example rendered in VS Code notebook view

Markdown Example rendered with Markdown Preview Enhanced

We have been looking at many markdown preview extensions and we see the UI diverging mostly in the following areas:

• headings are generally too big
• size difference between h5 and h6 too significant
• headings have no bottom border
• <hr /> element height is too big (2px vs. 1px)

I am proposing some small tweaks to the markdown-language-features extension that adjusts the styles so that it comes marginally closer to how VS Code would render markdown usually.

See a preview here:

It lowers the visual difference between viewing markdown within a markdown preview extension or within the notebook UI.

Happy to answer any questions.
Thanks for reviewing.

[christian-bromann]

@microsoft-github-policy-service agree company="Stateful Inc."

[daviddossett]

Not sure if you saw this but I recently updated the markdown styles in VS Code itself in #185801. I think it would make more sense to align to those vs. an extension.

[christian-bromann]

@daviddossett thanks for the reply! I have not seen that commit but we almost made the same change. I pushed another commit to make it more align with your changes. Wdyt?

[daviddossett]

Thanks!