Getting Pretty Code Boxes in WordPress

-Edit- I’ve now started using SyntaxHighlighter Evolved ignore all below!

One of the problems I’ve run into with WordPress was when I wanted to post code, what usually happens is WordPress will try to run the code i’ve posted, both messing up the layout of the page and then noone can see the code I’ve posted.
Using info from two different places I’ve added, what is for me the perfect fix.
Over at MicoHono.com they show us that adding this below code to our theme style sheet:

.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;
}

and then when you want to add code to your site, before the code add:

<pre class="codebox">

and after add:

</pre>

also I’ve grabbed the image they used and added it to my images directory.

What I didn’t like was:

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.

So I found a plugin that can help me, Code Auto Escape (site is down as of writing this, but it maybe back now). This plugin Automatically escape code within the code tags, so I don’t need to worry now about doing anything special with my code except copy and paste it. With the plugin active, to post code I just add before my code


<pre class="codebox"><code>

and after my code I add:

&lt;/code&gt;&lt;/pre&gt;

An example, the code starts with div:


<pre class="codebox"><code>
<div id=”foo”>
    <?php
      function foo() {
        echo “Hello World!\\n”;
      }
      for (\$i = 0; \$i < 10 $i++) {
        foo();
      }
    ?>
    </div>

&lt;/code&gt;&lt;/pre&gt;

Technorati Tags: , , , , , , ,

     

Leave a Reply