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.