SH Code Block misaligning lines on front end

[cena]

In the forums, a user states he is no longer able to properly align his code (comments) in the post edit screen using the SH block, although it appears correctly aligned on the frontend.

See:
his post edit screen: https://snipboard.io/KVCgqU.jpg
his front end: https://snipboard.io/vHh7kW.jpg

---

I tested this, and had the opposite happen!

I'm able to align in my post edit screen :

https://cloudup.com/clxNHXZMY6v

but the code is NOT aligned on the frontend:

https://cloudup.com/cJ96dvq7rAv

The alignment works properly when using the regular Code block:

https://cloudup.com/cnsYW1kDsCz

WP: 5.9.1
SHE: 3.6.1

[Rickmaurinus]

Additional information on the post:

– When you moved servers and ‘duplicated’ your site, how did you perform the duplication (plugin, a tool on your host, etc? I’m using Cloudways. They have a button that allows you to clone a server and move it to the next one. It didn’t involve anything from my side. AFAIK they duplicated everything exactly.

– Did you update anything after the move?
The issue appeared straight after duplication of the server. I tried launching an empty wordpress (https://rickmaurinus.com/) and seeing if the issue appeared there too, on the same server. And also there the issue was present.

So in essence things were identical at the change. I have later on updated some plugins to stay up to date, including SyntaxHighlighter Evolved.

– When you say the characters don’t align in the block (in the post edit screen), does that happen as you’re typing, after you save, or something else? The misaligning happens straight away when I type code, and also remains after I save. The only part on my website where it works, is at the front-end that the readers see. By the way, I’m using the Syntaxhighlighter Block, and no shortcode.

– what version of SyntaxHighlighter are you using? (current is 3.6.1, released November 2021). I’m currently using Version 3.6.1, but had an earlier version before.

– how are you aligning things? That is, are you hitting the space bar, or are you using the TAB key? I am using the spacebar to align things. My feeling is that the plugin spaces based on the width of a character, instead of using a monospaced distance

– which editor (v2 or v3) do you have set in the SyntaxHighlighter->Settings? I’m using Version 3.x

– were you using the SyntaxHighlighter block before you moved servers?
Yes, I have been using it for the last 1.5 years or so

Hope this helps. Do let me know if I can help in any way to trouble shoot.

[cena]

The (new) strange thing is that I just tried testing this again, and now I can’t duplicate the problem at all.

Here’s the SyntaxHighlight Code block, which was cut and pasted from the SHE code, then manually aligned via spacebar:

Saved, remains the same.

Here it is looking good on the front-end too:

---

I originally tested this on a different test site than the one above, so I went back there and tested again.

This time, I also can’t duplicate on the backend:

but on the frontend, the top line is off:

After fiddling around with spaces in the block editor, and saving,my frontend is now messed up:

And no amount of editing on the post edit screen seems to fix it.

So then I went back to the new site and tried to duplicate this there – I edited the existing block, and saved, and it appears correctly on frontend (ie, with the misaligned comment):

re-editing the post/block to re-align the comments results in the desired frontend appearance.

So I’m not sure what’s going on here at all. Both sites have essentially the same plugins installed. I don’t have any caching plugins on either site. (I was starting to suspect caching.) My host does allow me to flush the object cache, so I tried that; no dice.

No JS errors on front or backend.