Displaying Code Correctly

To start, you need to convert the code you’d like to display.

Now, replace ‘…’ with the converted bit of code;
<code>...</code>

Customising  how your code looks is also really simple!

Start off by pasting this onto your stylesheet:
code {
margin: 0 auto;
padding: 5px;
background: #d9d9d9;
border: 1px solid #bdbdbd;
width: 80%;
line-height: 22px;
display: block;
color: #525252;
}

‘margin: 0 auto;’ centres your code.
‘padding: 5px;’ adds some space surrounding the text.
‘width: 80%’ is telling it to cover 80% of the div/element your code’s in.
‘line-height: 22px;’ adds some space at the top and bottom of the text.

You can then add classes to your code if you’d like to have a smaller version;
code.small {
font-size: ?px; (Change '?' to a font size (e.g. 14px).)
}

You can add multiple classes, just change ‘small’ to whatever.

To display the class, add ‘class=”small”‘ into the opening tag;
<code class="small">...</code>

That’s it!