Some CSS I am using to fix the codeblock alignment issue

[lyricat]

Just found that <textarea> and <pre><code> don’t share exactly the same default typography.

So I wrote some CSS to override the defaults:

.overtype-preview .code-block {
    /* to avoid the scrollbar, which has the additional height to break the alignment. */
    white-space: break-spaces; 
}

.overtype-preview .code-block code {
    /* use the exactly the same font that textarea is using */
    font-family: "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", Courier, monospace !important;
    /* set line-height to zero to avoid unknown height alignment issue */
    line-height: 0px !important;
}

hope that help you.

[panphora]

This is fixed in v2.0.1

[lyricat]

for a very long content with many codeblock, without the line-height: 0px; on pre > code, the alignment will fail.

I don't know why, but after adding this line-height: 0px;, the alignment becomes correct.

vs

longer the content is, the more offsets will be in the alignment.

[mr-dan-blog]

Issue replicated on Kubuntu 24.04, using Brave and Librewolf browsers. Example text:

```
test
```
```
test
```
```
test
```
```
test
```
```
test
```

If you highlight, you can see how it gets increasingly misaligned each time.

The issue is that the <pre> around <code> is using the block display style, adding a little bit of whitespace. The CSS fix is to use flex instead:

pre.code-block {
    display: flex;
}

[mr-dan-blog]

Similar issue with some divs. The div wrapping an h1, h2, or h3 is adding a little height, which can also be fixed by setting it to display: flex.