How to make text not wrap with “Code Syntax Block” WordPress plugin?

I was searching a plugin to highlight code snippets. Decided to choose this one https://wordpress.org/plugins/code-syntax-block/ . Works ok so far. Just not sure if this is this plugin problem or not but text used to get wrapped – long lines go to next lines. Not convenient to read code, at least for me. And I cannot see option to turn that off. So was searching for solution, and what I have found is just to add custom css. Does not feel convenient, the css is saved to the database somewhere. At least I am not used to that. But it works. Maybe there is some code highligher plugin which already has this feature, or maybe could write my own plugin. But for such small thing it is probably not worth the effort to search more or write my own plugin.

So how is this done: go to Appearance > Customize > Additional CSS. Add something like this:


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

Selector you have to choose by yourself, it depends on what theme you use. I tried just selecting code element but it was overwritten by theme probably, so I select in more detailed way – that way theme does not overwrite my style. I assume you have basic knowledge of css.

And click “Publish” and thats it – it works. Now the code block has scrollbar instead of wraping text.

This code works with Twenty NineteenVersion: 2.1 theme.

Leave a comment

Your email address will not be published. Required fields are marked *