Code Block Styling in an Oxygen Builder Blog Post

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.