Monospaced text is higher than regular text

[oldmud0]

Example: (that last letter is a 't' if it bothers you)

This might be MacType's doing again, but I have MacType off for Notepad++.

[p11h]

This is just a style issue; you could adjust the appearance by adding some Custom CSS. This will be different based on the fonts available. Try, for example:

body {
  font: 15px helvetica, arial, sans-serif;
}

pre, code {
  font: 14px consolas, monaco, monospace;
}

It might be nice for a more complete default stylesheet to be included, but meanwhile the custom CSS provides a nice way to apply your own. (Note that there are currently some issues with custom CSS that you might need to be aware of).

[oldmud0]

Thanks for the CSS, but the same problem still happens.

[heydojo]

I am seeing this issue too. Inline code comments appear higher than the rest of the text inside the preview pane.

[nea]

Hi @heydojo

Do you have a concrete Markdown example text to reproduce?

Thanks

[heydojo]

@nea please see below:

Some text ```some("code");``` some more text

(placed in a quote box so that it can be copied and pasted straight into a markdown document.) Ensure that the preview is open and look at the output.

Thanks.

[monoblaine]

That's because HTMLRenderer cannot properly apply vertical-align: baseline to the monospaced element. The height of the element with monospaced text is smaller than its line box. When this is the case, HTMLRenderer always pushes (actually just leaves it there) the element to the upper side of the line box.

I've created some stupid hack to make baseline alignment work:

https://github.com/monoblaine/HTML-Renderer/commit/124ccb61f19c41b1f5590e45578b15a43cf39157

It works if the monospaced element's height is smaller than the line box. But it won't work for the opposite case.

[DJCrashdummy]

i also suffer from this issue... but IMHO the code highlighting could/should be improved in general, as it is really hard to distinguish it from normal text (especially if it will be at the same hight :stuck_out_tongue_winking_eye:). e.g. the highlighting as it is done at Gitlab (resp. have a look at the screenshot from @monoblaine: https://github.com/nea/MarkdownViewerPlusPlus/issues/41#issuecomment-389329448) or even as NppMarkdownPanel does it, would be quite nice.

btw: also blockquotes could use a little bit more obvious highlighting (e.g. the usual vertical line) to be much easier distinguishable.