WordPress – Code snippet display

By | March 30, 2023
wordpress blue and white and grey logo

Last updated on March 30th, 2023 at 05:44 pm

Read Time:52 Second

We have had a few people ask us how we wrap our code snippets on this site with the yellow background.

This is a very simple piece of code using the <pre> function. You can customise it as much as you like with different fonts, sizes, colours and borders but this is our default to get you started:

<pre style="border: solid 1px blue; color: black; margin: 10px; padding: 10px; background: #FFFFB3;">SAMPLE TEXT</pre>


  • border: solid 1px blue = solid border with 1px in size and blue in colour
  • colour: black = font colour
  • margin: 10px = margain on either side of at least 10px
  • padding: 10px = padding of 10px
  • background: #FFFB3 = background colour (in our case yellow)
  • SAMPLE TEXT = Text to display in the box

All you need to do then is change the sample text to whatever you want to display in the code snippet box and post the code into your “Text” editor, do not use the “Visual” editor as it will screw up the coding.

Click to rate this post!
[Total: 1 Average: 4]

Free Subscription

If you want to be notified when we post more quality guides like this one, sign up to our free subscription service and you will receive an email when a new post is live.

Join 564 other subscribers.

No need to worry, we will not be filling your inbox with spam and you can unsubscribe anytime you like.

Leave us a message...

This site uses Akismet to reduce spam. Learn how your comment data is processed.