Create Codeboxes/Warnings in Wordpress

In this tutorial I will teach you how to create code boxes similar to the ones you see in my post, which are quite similar to code boxes you see on forums and message boards.

These are quite simple actually all you need to do is create a class for each one.

So create the class and style as you wish. Heres the class I use for my codebox:

.codebox {
font-family:"Lucida Console";
font-size:11px;
color:#455d71;
width:90%;
margin-left:10px;
border-left:4px solid #7ea0b6;
border-right:1px dashed #7ea0b6;
border-bottom:1px dashed #7ea0b6;
border-top:1px dashed #7ea0b6;
padding:5px;
padding-top:30px;
background:url(images/codebox.jpg) no-repeat #d3e5f1;
overflow: auto;
}

The padding-top30px is so the text does not overlay the top image, if you do not have an image to represent the type of box you do not need to have such a huge padding. Be sure to also add overflow: auto, so when needed the box will scroll to accommodate text that may overflow.

Now all you need to do is when posting, type the code you want in your post and then go into the Code tab of your post and type

<pre class="yourclassname">Code here</pre>

If you are making an image label at the top like I did, be sure
not to set a fixed height, doing so will result in the text going
above the background when scrolling.

Also be sure to put all tags such as < should be in their html equivelant inside of codeboxes, the best way to do this is type the code in the ‘visual’ tab, and then later go into the code tab and add the codebox tags around it.

A disadvantage to wordpress is if you keep switching between visual and code tab it will add more and more space between your lines of code which gets quite annoying, So I suggest adding the tags around everything after you are completely done with your post.

Have your code/warning/tip boxes fixed width so they do not
overflow outside the borders of your post.

For tip/warning boxes you may want to format the text a bit so they do not need to scroll to read the text, Code scrolling sideways should be fine to keep the code clean and not have split lines, but scrolling sideways to read warnings/tips can be annoying so I suggest to format code yourself so no scrolling is involved for those.

I haven’t quite figured out how to do numbered line, when I do I will be sure to update with the solution