Hey @synsanken,
To make the code block scroll horizontally, the overflow-x: scroll property should be able to achieve this.
From a previous thread, I believe you are still using the Twenty Twenty-Five theme. To locate additional CSS:
- Head over to Appearance > Editor, then click the canvas preview on the right side of the screen.
- Click the half moon icon on the top right side of the page.
- Click the three dot buttons in the style tab and select the “Additional CSS” option.
These screenshots below should help get a visual on how to locate this option.
Canvas: https://snipboard.io/J2YRgv.jpg
Locate Additional CSS option: https://snipboard.io/ZNbTUf.jpg
Additionally, once you have added any custom CSS. The Additional CSS option should be available in the styles option in the editor. https://snipboard.io/neSo4i.jpg
Hope this helps.
Thread Starter
Ken
(@synsanken)
I added it. Doesn’t appear to do anything.
Screen Shot
Page
Thanks.
-
This reply was modified 2 months, 1 week ago by
Ken.
-
This reply was modified 2 months, 1 week ago by Ken.
No, you’ll need to write a little more CSS around the overflow property. Here’s an example that worked in my test:
.wp-block-code { overflow-x: auto; }
.wp-block-code code { white-space: unset }
And if your site has a lot of code, consider using a syntax lighting plugin that will add language-aware syntax coloring, line numbers, and even make it easy for readers to copy the entire code block (in a single click).
I use the Code Block Pro (free), but this comes with its own code block, thus creating a dependency on the plugin. So you’ll only be using such a plugin on a code-heavy website (eg tutorial website). There are other plugins that simply colorize the native WordPress code block.
Thread Starter
Ken
(@synsanken)
@threadi I deleted the other CSS and added this. It appears to be working now, can you see if it works for you?
@gappiah I am going to have a lot of code, but I prefer not to install any plugins or themes.
I think the website is safer if I don’t have a bunch of extra code installed and I don’t want to be dependent on anything so I can’t easily make a change later. That plugin looks cool, and it has 10,000 installs, but that makes me dependent on that and if that person ever stops updating the plugin I’m going to be left with a mess, so I haven’t used any plugins.
I’m going to be adding a link to my OneDrive so someone can download the code if they want to and open it on their own IDE.
Yes, it works for me. 🙂
