With this blog, many times I will want to paste code snippets. Building the blog content and adding a code snippet is easy within the Gutenburg editor. When displaying in my Oxygen Builder Post template, the default code block styling was looking like:
The code in the middle is hard to differentiate from the paragraph text - top and bottom line in the image.
Oxygen does not provide a means to customise the code block styling from within the UI, but this can easily be changed within a stylesheet. I always create a 'CustomCode' stylesheet from the Oxygen 'Manage' menu:
I want to change the styling of the code block to make it stand out more and to change the code display font to Courier. Add this to your CustomCode sytlesheet:
.wp-block-code {
border: 2px solid darkgrey;
background-color: #E6E6E3;
padding: 10px
}
code {
font-family: "courier new";
font-weight: 600;
font-size: 16px;
}
and this is the result:
Much clearer I think you'll agree. Of course, you can vary the styling to get the right effect for yourselves.