Chili is a powerful syntax highlighter based on jQuery which supports a wide range of languages, including HTML, CSS, JavaScript, PHP (even with all of its built-in functions) and many others. Chili is designed to run with a single, unobtrusive jQuery declaration that you can insert when the DOM has finished loading using the ready() event (or one of its shortcuts). As with many other syntax highlighters, Chili is made up of a core file and several language files (called recipes). You can even insert all the language files in one file using the recipes.js JavaScript file included in the download.
First, you have to insert Chili in your document:
<body> <script type="text/javascript" src="path/to/jquery.min.js"></script> <script type="text/javascript" src="path/to/jquery.chili.js"></script> <script type="text/javascript" src="path/to/recipes.js"></script> </body>
Before calling the chili() wrapper, you have to add a CSS class to your code blocks specifying what kind of language you want to highlight. Options include css, html, js, php (basic syntax) and php-f (PHP with all of its built-in functions):
<pre class="php-f">
function runSomething($args = array())
{
if(!is_array($args)) {
return false;
}
foreach($args as $arg => $value) {
if(preg_match('/^[A-Za-z]/i', $value)) {
// do something
}
}
}
</pre>
Finally, you can run Chili, like so:
$(function() {
$('pre').chili();
});
You can see the demo below.