The gray background of inline code does not follow the height of the text

In Drafts 44.2, within the markdown mode, the gray background of inline code does not follow the height of the text but instead follows the line height, which looks odd. The first image shows the Menlo font, which is slightly better, but the issue is still noticeable. The second image features the Fira Code font, where the problem is more apparent. The third image shows my editor settings.

As my permission only allows me to upload 1 image, I put three images on imgur:

Images

That is the correct rendering, and is standard system attributed string rendering for background attributes. If you find it distracting, you might prefer an editor theme that does not apply a different background color to inline code – I know the Obsidian Light theme does not, or you if want to modify another theme you prefer the codeBackground color would be the value you want to change.

Thank you for your response. If I want to keep the background color while ensuring that the distance from the bottom of the background to the bottom of the text (e.g., the bottom of the letter “g”) and the distance from the top of the background to the top of the text (e.g., the top of the letter “l”) remain consistent, rather than having the top distance being greater than the bottom distance as shown in my screenshot, can it be done?

I hope I have expressed myself clearly.

No, that cannot be changed. That is the way Apple’s text rendering works.

But it can be rendered correctly in preview mode. So what’s the difference between editor and preview?

2024-07-27-fkZyBixA000872

They are not related at all at a technical level. The editor is a native text editing control that works with text and attributes. The preview is a web browser that renders HTML/CSS.

2 Likes