WordPress Code Snippet Display: Styling with a Pre Tag

We’ve had a few people ask how we wrap our code snippets on this site with the highlighted background you see in guides like this one. It’s a simple piece of HTML using the <pre> tag with inline styling. You can customise the font, size, colours, and border as much as you like — here’s our default starting point:

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

Breaking that down:

• border sets the outline colour and thickness around the box.
• color sets the text colour inside it.
• margin controls spacing outside the box, and padding controls spacing between the box edge and the text inside it.
• background sets the highlight colour — swap in any hex colour code you like.

For longer code samples you’ll usually also want overflow-x: auto; and white-space: pre-wrap; added to the style so long lines wrap or scroll neatly instead of breaking your page layout on narrow screens.

Wrapping Actual Code (Not Just Sample Text)

If the content inside the <pre> tag is real code rather than placeholder text, use a nested <code> element as well — it’s the semantically correct combination (<pre><code>...</code></pre>) and it also gives you a separate element to target with CSS if you want to style the code text differently from the box itself:

<pre style="overflow-x: auto; background: #FFFFB3; padding: 10px; border-radius: 4px;"><code>your code here</code></pre>

Escaping Angle Brackets

If your snippet itself contains HTML tags (like the examples in this very post), remember to HTML-encode the angle brackets as < and > inside the <pre> block, or the browser will try to render them as actual markup instead of displaying them as visible text. This is the single most common reason a code snippet block “disappears” or renders wrong when pasted into WordPress.

A Note on Syntax Highlighting

The plain-<pre> approach above is fine for short one-off snippets, but for longer code blocks with proper language-aware colour highlighting (keywords, strings, comments in different colours), a dedicated syntax-highlighting library like Prism.js or highlight.js is worth reaching for instead — both are free, load from a CDN with a single script tag, and automatically colour-code any <pre><code class="language-xxx"> block on the page without you needing to hand-style each one individually.

Resources

• WordPress – How to Exclude a Category from your Homepage
• Removing WordPress Plugins
• WordPress Plugin – LinkGather