Chili – The jQuery Plugin for Highlighting Code

I’ve setup a GitHub account for Chili, so that anyone interested in forging the next version can easily join and contribute.

I’m still new to git, but I hope I have prepared a usable setup for development.

What follows is version 2.2 content. It’s a bit outdated, but still useful. (to be updated)

Main links


  • Very fast highlighting, trivial setup, fully customizable, thoroughly documented, and MIT licensed
  • Renders identically on IE, Firefox, Mozilla, Opera, and Safari
  • Comes bundled with recipes for C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, and XHTML
  • Many configuration options: Static, Dynamic, Automatic, Manual, Ad-Hoc, with Metaobjects.
  • Provides fine control over which elements get highlighted by means of a jQuery selector or the mithical jQuery chainability.
  • Fully supports javascript regular expressions, including backreferences
  • The replacement format gives full control on what HTML is used for highlighting
  • Provides examples which show setups and features



112 Replies to “Chili”

  1. Any chance that you could make Chili work so that you can host the .js files on a different domain? With our blog we have all the script files hosted on our main site and use Blogger to publish, but don’t have the facility to publish .js files on the blog’s domain. As Chili uses Ajaz to load it’s recipies then this fails across domains. If there was facility for a non Ajax option for the recipies this would allow greater flexibiliy in this type of situation.

    Let me know!

  2. Oh how I love Chili!

    However, I have issues with code (PHP in this case) showing, being highlighted, and then immediately disappearing.

    Also, I wish there was a way I didn’t have to wrap my PHP code pastings in <?php and ?> in order to get it to highlight. I guess it should assume the code is PHP unless the PHP tags are inside the paste.

  3. @Viper007Bond:

    I know it’s a bit annoying to add the PHP tags, but an HTML page is a valid PHP script… no tags means no PHP.
    Anyway, only the starting tag (<?) is really needed.

    You can change the PHP recipe to fit your needs.

  4. @Nico Westerdale:

    This seems a JSONP issue. I’ll work on it shortly. Thanks.

    Anyway, Chili supports a static setup that let’s you skip AJAX downloading. It’s the best solution for you now.

    Pack all the recipes you need into a recipes.js file, like the one that’s included with Chili 2.0. Then the following lines should do the trick:

    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script> <!-- Chili settings for a static setup -->
  5. I have found a little bug in a RegExp!

    css.js -> _element -> /w+/
    It highlights too much! e.g. when I want to highlight something like this: {
    /*some styles*/
    It would highlight “meta”, too!

    So I’ve made a new RegExp:

    and that’s it!
    P.S.: I’m not good in RegExp.

  6. @Nico

    Static and dynamic setups can be mixed only for different recipes.

    The “recipes.js” file that comes with Chili is an example of what you need to do to have your viewers download at once the recipes you are going to use.

    So, if you only need “csharp.js” and “js.js”, you should copy and paste those recipes (and just them) inside “recipes.js”, along the same line as the example.

  7. Hi, can you make the selectionHelper as an option?
    simply make a new option:

    ChiliBook = {

    , selectionHelper = true


    and change the lines 472-474 of the makeDish-Function:
    if( ( $.browser.msie || $.browser.mozilla) && ChiliBook.selectionHelper ) {
    enableSelectionHelper( el );

  8. It’s a good idea, but what could be the reason for having selectionHelper = false?

    Without the selection helper it’s not WYSIWYG: i.e. you can’t select, copy, and paste the text as you see it, with proper whitespace.

    Internet Explorer and Mozilla differ in what ‘mistakes’ they introduce into the selected text, but neither is like Opera or Safari, which properly do the job.

  9. Can chili be used when the page is loaded via AJAX? I’m using jquery tabs, but not sure how to execute chili once the page has been loaded inside the tab?

  10. Just letting you know that the regex for CSS has a problem



    The second example does not work. It only higlights #this. Same goes for CSS classes.

    Great script anyways! I’m loving it.


  11. This is absolutely excellent! Good work!!!!!

    This is a long shot but is there an option to do editing of code as well restore the colours, etc? 🙂


  12. Pingback: WP Chili
  13. Can this be used with a textarea? I tried encompassing the textarea tag with code tags, placing the code tags inside the textarea around the lines I need syntax highlighted and also declaring the textarea with the class ie “js”.

  14. is a code highlighter with feature to highlight code which is mixture of different languages

  15. I really need help using the jgcharts. Is there any chance to change the scale of the values on the bar chart? Can someone help me please?

  16. hi, thanks for creating this fastest highlighting plugin for jquery, i’m using chilli 2.2.
    here’s the content of my body

    var test = {}; for(var x=0;x3) test[x] = x;

    ChiliBook.recipeFolder = "SOMEWHERE/";

    ChiliBook.automatic = false;
    $( function() {
    $( '#highlight' )
    .one( 'click', function() {
    var time1 = new Date();
    var $chili = $( '#jq' ).chili();
    var time2 = new Date();
    var delta = time2 - time1;
    var spans = $chili.find( 'span' ).length;
    var rate = Math.round( spans / delta * 100 ) / 100;
    $( '#highlight' ).html(
    'highlight done in ' + delta + ' milliseconds'
    + ' with ' + spans + ' spans'
    + ' at a rate of ' + rate * 1000 + ' span/sec'
    } )
    } );

    and here’s the content of my javascript script:
    $(function() {
    ChiliBook.recipeFolder = ”/r/js/jqc/”;
    ChiliBook.automatic = false;
    ChiliBook.lineNumbers = true;
    $( ’#test1 > pre > code’ ).chili();
    $( ’#test2 > pre > code’ ).chili();
    $( ’#test3 > pre > code’ ).chili();
    the ajax of loading html.js and js.js was working just fine, but it seems that there are no syntax highlighting completed.. it still show black on white..
    i wonder was there anything wrong with it..
    please reply if you’re not busy ^^
    Thank you in advance
    Kiswono P

  17. It’s very good.
    I like this.
    Thanks for share.
    And I wrote something to introduce this project for my readers.
    You can find the post about this in my website.
    If something is wrong,pls figure it out.thanks.

  18. Just installed the 3.0-alpha version on an intranetsite and wrote two rudimentary recipes to highlight COBOL and JCL. The plugin works great and is much ‘lighter’ than the other available highlighter plugins (especially the one using Geshi). My compliments. Looking forward to the official release (and documentation) of v3.0.

  19. @Jessica I’m surprised to see that IE6 is different now.

    When I developed Chili, it was just the same in all browsers, and I was quite proud of it, due to the many issues that I had to tackle to get there.

    Maybe there is something in the new jQuery that works differently, or I messed up Chili during the last rewrite.

    Unfortunately I no longer have IE6 installed in any PC I can think of now (home, work, friends) so it’ll be very difficult to track down the culprit for me.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.