WordPress – Code snippet display

wordpress blue and white and grey logo

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.

Free Subscription!Subscribe to our site to receive updates via email!

Enter your email address below and click the Subscribe button to receive email notifications about new and exciting downloads available through our website at https://www.techygeekshome.com

You will also receive notifications about new technical guides, latest news and MSI installer downloads that are available through our blog here at https://blog.techygeekshome.info 

We will not spam you and we will not pass on any of your details to anyone else. We tend to post new content once or twice a week.

Join 232 other subscribers

You can unsubscribe any time you like.

About A.J. Armstrong

Founder of TechyGeeksHome and Head Editor for over eight years! IT expert in multiple areas for over 20 years. Sharing experience and knowledge whenever possible! Making IT Happen.

View all posts by A.J. Armstrong