Block Code Formatting does not align

Hi Rick,

> – The front end code now looks good for users
> – When I write the code in the post editor screen, it looks as if the characters do not align, even though in the front-end they do.

Could you answer a few questions, so we have a better idea of what might be going on?

– When you moved servers and ‘duplicated’ your site, how did you perform the duplication (plugin, a tool on your host, etc?

– Did you update anything after the move?

– 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?

– what version of SyntaxHighlighter are you using? (current is 3.6.1, released November 2021).

– how are you aligning things? That is, are you hitting the space bar, or are you using the TAB key?

– which editor (v2 or v3) do you have set in the SyntaxHighlighter->Settings?

– were you using the SyntaxHighlighter block before you moved servers?

—

All that said, I’m not able to duplicate this as you describe it – the strange thing is, I seem to have the reverse issue!

For example, when using your code in the SyntaxHighter block, I can align it just fine as I’m typing (and it remains that way after a save):

But on the front end, using Generatepress 3.1.3, it does NOT align:

(I’m singling out Generatepress, but it also happened with TwentyTwentyOne and TwentyTwelve, so I don’t think this is a theme issue.)

This seems to be an issue with the Syntaxhighlighter BLOCK (vs SHE itself.)

For example, here’s a plain Code block vs SHE block:

Because this is likely a bug, I’ve created an issue here:

https://github.com/Automattic/syntaxhighlighter/issues/233

which will be the best place to look for updates or add additional information.

Thanks for bringing this to our attention!

Cena

Hi Rick,

Thanks for the additional information! I don’t see anything there (except previously outdated SyntaxHighlighter, which you’ve already updated) which may have been an issue.

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:

This is a puzzle. 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:

But now, AHA! 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.

I’ll post this in the issues thread in Github, and ping a developer to take a look

Best,
Cena