Adding correctly formatted code to your WordPress blog posts

When you have a website about template modifications, you will need to display code pretty effectively. Luckily with a few plug-ins WordPress handles this task very easily.

I quickly realized that Chili was the way to go to give some very nice highlighting of the code. After searching around for the best plug-in, I ran across prodevtips. What a find!

Not only did I find the plug-in that would perfectly, I learned that there was another one that would compliment Chili quite nicely. Autoscape will separate the code from the rest of the site HTML. With BOTH of these plug-ins you get the highlighting AND code separation.

This, however, does not come without a price. You will need to modify the Autoscape code a bit. The guys over at prodevtips were nice enough to provide the modified code!

You install both plugins like any other plugin. Copy, Enable

Once you have them installed, you can start adding code to your posts by including a simple class.

<pre><code class=”php”> CODE HERE </code></pre>
<pre><code class=”mysql”> CODE HERE </code></pre>
<pre><code class=”html”> CODE HERE </code></pre>
<pre><code class=”javascript”> CODE HERE </code></pre>

Some of the features of Chili are:

• Very fast highlighting, trivial setup, fully customizable, thoroughly documented, and MIT licensed
• Renders identically on IE, Firefox, Mozilla, Opera, and Safari
• Comes bundled with recipes for C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, and XHTML
• Many configuration options: Static, Dynamic, Automatic, Manual, Ad-Hoc, with Metaobjects.
• Provides fine control over which elements get highlighted by means of a jQuery selector or the mithical jQuery chainability.
• Fully supports javascript regular expressions, including backreferences
• The replacement format gives full control on what HTML is used for highlighting
• Provides examples which show setups and features

Some examples are:
javascript

function showMainPic(pic){
    var inner_html = '<img src="'+galleryDir+pic+'" alt="" />';
    $("#mainPic").html(inner_html);
    var scroll_to = $("#mainPic").position();
    $.scrollTo(scroll_to.top + ( $("#mainPic").height() / 2 ), {speed:500});

HTML

<table border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td width="10"> </td>
<td> </td>
<td valign="top">
<h2>Archives</h2>
	<li><a title="December 2007" href="http://www.prodevtips.com/2007/12/">December 2007</a></li>
	<li><a title="November 2007" href="http://www.prodevtips.com/2007/11/">November 2007</a></li>
	<li><a title="October 2007" href="http://www.prodevtips.com/2007/10/">October 2007</a></li>
</td>
</tr>
</tbody></table>

PHP

function loadController($controller){
    $class_name = ucfirst($controller)."Controller";
    $file_name = "controllers/".$class_name.".php";
    include_once($file_name);
    $ctrl = new $class_name;
    return $ctrl;
}

SQL

CREATE TABLE `db_checkup_item` (
  `id` bigint(12) NOT NULL auto_increment,
  `value` varchar(250) NOT NULL,
  UNIQUE KEY `id` (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=10 ;

As you can see, using the products of three different minds, you can put together a very nice result.

Have any tips you would like to share?

Popularity: 22% [?]