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:

result ); 
?>
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. The following two items must appear in the ‘body’ section, maybe just after the opening tag.

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 “document.writeln( "Hello World!" );”
  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!

7 Replies to “Chili & Enzymes”

  1. Thank you for using Chili & Enzymes.

    About the ‘bug’ you point out, it is not a bug! The Enzymes manual, under the Templates section, clearly states where Enzymes looks for templates, i.e. the ‘wp-content’ directory, and the given examples (in the Chili & Enzymes page too) are coherent with that assumption.

  2. Ok, that is what im supposed. But if someone just do like the discription above run’s in troubles. In any case! it works! Great Job you done!

    The Chili Part is not realy a plug in at the moment. I think it would be best to make the chili Part as Plugin, of course if it possible. I’m relatively new to WordPress so in the moment i can’t say somethink about such a posibility.

  3. And also it seems not properly work with my PHP code 🙁 I’wil debug it at weekend. But maybe you can give me some tip.

  4. When you say “Add a custom field” what do you mean? I seem to get lost in the last step, and I don’t feel like the tutorial has given me enough information to truly understand what the backend is expecting…

    I’ve worked with jQuery, but never the syntax highlighting stuff. I’d really like to get this working though.

  5. A custom field is a WordPress concept. Posts can be augmented by means of custom fields. Look at the bottom of the post editing panel: you should see a tab for Custom Fields.

    If you put your code snippets inside a custom field, then you can transclude those snippets everywhere on your blog (thanks to Enzymes) and have them automatically highlighted (thanks to Chili)

Leave a Reply

Your email address will not be published. Required fields are marked *