Creating code boxes in a post

Sometimes it’s useful to create a piece of code within a WordPress post.  This can be for tutorial purposes or just to remember how exactly something was done.

But WordPress needs to be instructed to show this as code (i.e. untouched) rather than interpreting some of the symbols as html display instructions.  To make sure this happens:

-> switch from visual to text editor
-> use the tag <code> at the start start and </code> at the end of the code text

It will display like this:
This is a block of code

I’d like it in a nice box, to enable easy cutting and pasting.  This can be done using the <pre> tag </pre>

The <pre> tag instructs the browser to use a monospaced font, but to exactly reproduce whatever is inside of the <pre> tags.

This is a block of code.  You can copy and paste it.

There is still a problem.  Neither of the above examples have useful snippets of actual useable code.  Because the <code> tag doesn’t tell browsers to treat html tags any differently to as if it was a normal block of wordpress text, html tags will be taken literally.

Suppose I want to show how to make something bold, using the <strong> tag, it will show up like this:

This is a block of code. 
This is the code used to make a word bold

Arrows and slashes used in html need to be replaced with their related character entities.  This means replacing the arrows at the start and the end of <strong> with the related character entities as well as replacing the slash in the closing tag of </strong>.  This means replacing as follows:

< = &lt; 
> = &gt;
/ = #47;

Then it will appear like this:

This is a block of code. 
This is the code used to make a word bold:
Now you can copy that

Here are some more character entities from

< = &lt; or &#60;
> = &gt; or &#62;
/ = &#47;  	
] = &#93;
[ = &#91;
" = &quot; or &#34;
' = &#39;
“ = &ldquo; or &#8220;
” = &rdquo; or &#8220;
‘ = &lsquo; or &#8216;
’ = &rsquo; or &#8217;
& = &amp; or &#38;

Or use github or pastebin!