Monospaced source mode H1 H2 underline alignment

[johnlane]

Is your feature request related to a problem? Please describe.
Markdown allows a H1 heading to be written as text with a row of equal signs beneath it and it allows a H2 heading to be written as text with a row of minus signs beneath it. It is customary to make this "underline" the same length as the heading so that it is presented neatly when viewing the plain text file, perhaps in a text editor or terminal window.

When viewing H1/H2 headings in source mode the heading and its "underline" are different sizes. This means that, even when using a monospaced font, the "underline" does not align with the text and this makes it difficult to write such headings so they are neatly formatted for viewing in a monospaced text editor or terminal window.

In the below example, both lines contain 19 characters and, due to the monospaced font and being the same size, they align:

Here is an example
==================

Describe the solution you'd like
In source mode, when formatting a H1 or H2 heading that is written with a row of one or more equal(for H1) or minus(for H2) signs beneath, use the same font weight and size as the heading line above it.

This is so that, if a monospaced font is used for the source mode editor, a n-character heading can have a n-character underline and they will be the same length.

---

I've had a poke about in the CSS and I believe the difference is caused by the HyperMD-header-1 class (specifically its font-size: var(--h1-size) ) that is applied to the heading text and increases its font size, in my case, from 12px to 13.5px. This is not applied to the underline text which remains as 12px. This difference in size is why the two rows aren't the same length despite having the same number of characters .

I am able to make the underline size match the heading, either by removing HyperMD-header-1 from the heading text or by adding it to the underline, changing this:

<div class="cm-active HyperMD-header-line HyperMD-header-line-1 cm-line">
  <span class="cm-formatting cm-formatting-header cm-formatting-header-1 cm-header cm-header-1">==========</span>
</div>

to this

<div class="cm-active HyperMD-header-line HyperMD-header-line-1 cm-line">
  <span class="cm-formatting cm-formatting-header cm-formatting-header-1  HyperMD-header-1 cm-header cm-header-1">==========</span>
</div>

So the basic requirement is to have the text and underline rendered using the same size. I don't know if using HyperMD-header-1 on the underline is the right way to achieve this. I expect there's a similar thing with the level 2 header but I haven't checked that one.

TBH I don't know if this styling is applied by the minimal plugin or not, but the rendering is a lot worse without this plugin. If the plugin can fix this that would be fantastic.