Error in Syntax highlighting

When I click the Edit as HTML it shows as this

<p r e c l a s s = “wp-block-code” >< c o d e>Dim char1, char2 As Char< / c o d e ></ p r e >

• This reply was modified 3 years, 10 months ago by w3com.
• This reply was modified 3 years, 10 months ago by w3com.
• This reply was modified 3 years, 10 months ago by w3com.
• This reply was modified 3 years, 10 months ago by w3com.

Please share the URL where the issue can be seen.

Also, what theme are you using?

This is the URL

https://www.w3computing.com/vb2008/vb-character-variables/

I use Genesis framework with Magazine theme

And also I just noticed that in few pages the the highlighted code area is just blank.

https://www.w3computing.com/vb2008/vb-formatting-numbers/

https://www.w3computing.com/vb2008/vb-variable-scope/

I don’t see any blank areas in those links:

But I am seeing unstyled code in the first link you shared:

There may be a CSS concatenation issue coming from LiteSpeed Cache.

Otherwise, the issue maybe this one which was previously reported: https://github.com/westonruter/syntax-highlighting-code-block/issues/286

That issue has a prototype fix which is available for testing: https://github.com/westonruter/syntax-highlighting-code-block/pull/287#issuecomment-778473998

• This reply was modified 3 years, 10 months ago by Weston Ruter.

Hello Weston,

Above you have pasted the code for listing 2.5. There’s listing 2.4 as well which simply doesn’t display anything. When I disable your plugin it shows. Please take a closer look.

I will try the solutions you have sent me and update you.

The 2.4 isn’t showing because your ad has float:left and it lacks a clearfix so the code is showing out of the viewport:

You can fix this with the following CSS code:

.wp-block-code {
    clear: both;
}

Wow! This simple line of css code does seem to fix all the issues. Thank you!!!