get in touch

How to add CSS styling to the WordPress Gutenberg Code Block

WordPress Care Plans CSS Styling WordPress
Written by Gavin on 11th March 2019
Home » Blog » How to add CSS styling to the WordPress Gutenberg Code Block

Gutenberg is the new shiny WordPress editor, it comes with many new features and content blocks. One of those content blocks is the code block. If you are reading this post then it is likely you are looking to find out how to add styling to the WordPress code block.

Previously in the old classic editor of WordPress, it was quite a challenge to even get the code to show properly in posts without being parsed. The new Gutenberg editor, however, makes adding code snippets very easy without the need for any additional plugins or coding.

With the new editor, you simply need to click on the + icon and search for the code block. Click on it to insert it into your post and then add the code you want to display into the code block.

Code Block in WordPress
Jump Link in WordPress

One thing ThriveWP ran into though was that in some themes the code block is very plain and the code can get lost within the text of the post. As there is no default way to change the look or style of the block, our immediate action was to see if we could add a bit of CSS styling to make it stand out.

Usually, if you are adding code that you want to display on the front end it is because you want to share that code with others and with that you want it to stand out a little at least.

In the video below I will show you how you can simply use a small bit of CSS code to give the block a bit of styling.

Go to your admin dashboard and then click Appearance > Customize Look for the Additional CSS link and click that. Once you have done that copy and paste the code below into your additional CSS box.

See How My Service Can Help Improve Your Website & Save You Massive Amounts Of Time
Security - We monitor your site's security night and day.

Updates - We manage all theme, plugin and WordPress updates.

Backups - We backup your website on a daily, weekly or realtime bases.

Edit the colour codes as you wish and click publish. That's it you have now added some styling to your code block and made it look much better! If you found this helpful you may also like our post about creating jump links or anchor links as they are also known.

pre.wp-block-code {
    border-left: 6px solid #3498DB;
  background-color: #F5F7F9;
    padding: 5px;

Need a WordPress Maintenance Service? How about White Label?

WordPress support, ongoing website management
backups, security updates, white-label care plans and more.

Supercharge your agency with ThriveWP!

WordPress Maintenance Services UK

Other Posts you might like

Notify of
Inline Feedbacks
View all comments
Subscribe to our newsletter UK WordPress Maintenance Service

Subscribe To Our Newsletter For The Latest News & Info