Nov 08 2006
Chili & Enzymes
UPDATE (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-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’.<?php $tmp = preg_split( '/[\r\n]+/', $this->result ); if( count( $tmp ) > 28 ) echo 'clip'; else echo 'all'; ?>"><code class="javascript"><?php echo htmlentities( $this->result ); ?></code></pre>
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%;
}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
- Create a new post titled “Testing Enzymes & Chili”. Hit ‘Save and Continue Editing’
- Add a custom field with a Key “js-snippet” and a Value “document.writeln( "Hello World!" );”
- Add this Enzymes statement “{[.js-snippet /enzymes/chili-js.php]}” into the post area
- Hit ‘Publish’ and then ‘View site’
If it looks like this
document.writeln( "Hello World!" );