jQuery Chili plus Code Autoescape is good code highlighting in WordPress
Today I found Chili which is a jQuery plugin. I’ve been looking for something like this for quite some time. The ability to highlight code snippets client side is a very appealing thought. No more server side manipulation that might be prone to errors, follow the link to Priyadi’s autoescape plugin below for a more thorough discussion.
Currently I’m using Code Autoescape to separate my snippets from the rest of the HTML. That plugin doesn’t do highlighting though, but making Code Autoescape work with Chili was not very difficult, I just removed all the provisions Priyadi had done for Geshi and changed “lang” to “class” in a few places.
Download modified Code Autoescape.
Here are a few examples:
Javascript:
function showMainPic(pic){
var inner_html = '<img src="'+galleryDir+pic+'"/>';
$("#mainPic").html(inner_html);
var scroll_to = $("#mainPic").position();
$.scrollTo(scroll_to.top + ( $("#mainPic").height() / 2 ), {speed:500});
}HTML:
<table cellpadding="10" border="0" cellspacing="0">
<tr>
<td width="10px">
<td>
<td valign="top">
<h2>Archives</h2>
<li><a href='http://www.prodevtips.com/2007/12/' title='December 2007'>December 2007</a></li>
<li><a href='http://www.prodevtips.com/2007/11/' title='November 2007'>November 2007</a></li>
<li><a href='http://www.prodevtips.com/2007/10/' title='October 2007'>October 2007</a></li>
</td>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 ;
Related Posts
Tags: chili, code highlighting, jquery, PHP, Wordpress