Chili & Enzymes

2008-03-20: There is a new post about Chili & Enzymes. Thanks to their new versions, it’s now much easier to config WordPress highlighting than described here.

If you post many code snippets, then Chili and Enzymes can work together for making your life simpler.Here is my proposed configuration:

1. Install Enzymes
Download the latest version to your computer, upload it to your server, in the ‘plugins’ directory under ‘/wp-content’, and activate it. No configuration needed.

2. Upload jQuery and Chili
For this configuration I’m going to put the file ‘jquery-1.0.3.pack.js’ in a ‘jquery’ directory under the ‘/wp-content’ directory, and the file ‘chili-1.1.pack.js’ in a ‘chili’ directory under the ‘jquery’ directory. In the ‘chili’ directory I’ll put also any recipes and stylesheets I’ll need.
I recommend to upload and setup at least one of the examples provided with Chili. It’ll be useful for proving that Chili is properly configured (bypassing WordPress).

3. Upload an Enzymes template for each language you’ll use
In fact there are many valid alternatives, but I think that this one is pretty simple and you can eventually expand on it. Here is the template I’m going to use for JavaScript snippets:

<pre class="chili-<?php 
	$tmp = preg_split( '/[rn]+/', $this->result );
	if( count( $tmp ) > 28 ) echo 'clip';
	else echo 'all'; 
?>"><code class="javascript"><?php 
	echo htmlentities( $this->result ); 
?></code></pre>

Note that the template decides the style of the ‘pre’ tag and that the result is automatically escaped. Anyway this is still a naive template, which is not suitable for javascript snippets mixed into html snippets. Remember that the base directory for Enzymes templates is ‘wp-content’.

4. Add style settings to the stylesheet of your current WordPress theme
You should provide only general format for the tags you are going to use for wrapping your code snippets. For example, I’m going to use a ‘pre’ tag wrapped around the ‘code’ tag. In the style.css file, I’ll add these definitions:

pre.chili-all {
	color: #333333; 
	background-color: #f4f4f4; 
	font-size: 9pt; 
	line-height: 120%;
	width: 450px; 
	overflow: auto; 
	}

pre.chili-clip {
	color: #333333; 
	background-color: #f4f4f4; 
	font-size: 9pt; 
	line-height: 150%;
	width: 450px; 
	height: 450px; 
	overflow: auto; 
	}

pre.chili-all code, pre.chili-clip code {
	font-size: 9pt; 
	line-height: 150%;
	}

As you see, they are very similar: chili-all adjust the height of the box to the length of the content; chili-clip fixes the height to a maximum.

5. Edit the header.php file of your current WordPress theme
This is to enable support for Chili in each HTML page of the blog. It’s just three script elements: two for loading jQuery and Chili, and one for configuring Chili.

The following two items must appear in the ‘head’ section, maybe just before the closing tag.

<script type="text/javascript" src="<?php 
	bloginfo('siteurl'); 
?>/wp-content/jquery/jquery-1.0.3.pack.js"></script>
<script type="text/javascript" src="<?php 
	bloginfo('siteurl'); 
?>/wp-content/jquery/chili/chili-1.1.js"></script>

The following two items must appear in the ‘body’ section, maybe just after the opening tag.

<script>
ChiliBook.recipeFolder = "<?php 
	bloginfo('siteurl'); 
?>/wp-content/jquery/chili/";
ChiliBook.stylesheetFolder = "<?php 
	bloginfo('siteurl'); 
?>/wp-content/jquery/chili/";
</script>

6. Done, now test the configuration

1. Create a new post titled “Testing Enzymes & Chili”. Hit ‘Save and Continue Editing’
2. Add a custom field with a Key “js-snippet” and a Value “{[.js-snippet /enzymes/html.php]}”
3. Add this Enzymes statement “{[.js-snippet /enzymes/chili-js.php]}” into the post area
4. Hit ‘Publish’ and then ‘View site’

If it looks like this

document.writeln( "Hello World!" );

then all is fine. Enjoy!