programtown

I have found solution.
In WordPress version 5.6 below css is included for code block.

.wp-block-code code {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

white-space: pre-wrap; this line was causing issue
So I have overridden that css (from pre-wrap to pre) in my theme editor to solve issue
i.e

.wp-block-code code {
    white-space: pre;
}

Screenshots are attached.

Additional css in wp 5.6 for code block-1

Additional css in wp 5.6 for code block-2

Solution-1

Solution-2

Solution-3

Thanks

• This reply was modified 3 years, 9 months ago by programtown.
• This reply was modified 3 years, 9 months ago by programtown.

It is on front end.

copy button is shown by this plugin.

And code syntax higlighter is shown by this plugin

The issue is not due to these two plugins as code block
was displaying correctly with horizontal scrollbar in WordPress version 5.5.3 with these plugins.
But the issue arises(horizontal scroll-bar missing) when I upgrade my WordPress version to 5.6.

My Website Link (with WordPress version 5.5.3).

Also check this similar issue.

thanks

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

Scroll bar is also missing from code block.
Screenshots are attached.
this is for version 5.6
this is for version 5.5.3
I reverted to version 5.5.3 to bring back scroll bars
Please fix this issue in version 5.6
thanks

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