Chili NEXT

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

Features

  • 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

Reviews

Integrations

28 comments on “Chili NEXT
  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. Viper007Bond says:

    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. Andrea Ercolino says:

    @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. Andrea Ercolino says:

    @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="http://jquery.com/src/jquery-latest.pack.js"></script>
    <script type="text/javascript" src="http://example.com/chili/jquery.chili-2.0.js"></script>
    <script type="text/javascript" src="http://example.com/chili/recipes.js"></script> <!-- Chili settings for a static setup -->
  5. Bastian says:

    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:

    ul.post-meta {
    /*some styles*/
    }
    It would highlight “meta”, too!

    So I’ve made a new RegExp:
    /(s|^)w+/

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

  6. @Andrea, yes I was looking at JSONP myself, looks like from the docs that the jQuery guys suggest it: http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

    Thanks for the static tip, I should have thought of that.

  7. @Andrea – I’m actually getting errors using the static recipes, and I’m not sure why.

    This page works fine, color coding some javascript:
    http://www.icoblog.com/2008/06/dhtml-bookmarks-using-jsurl.html

    But I see erros like this:

    invalid label
    , _case: truen
    csharp.js (line 14)

    I also can’t seem to get the csharp coloring to work.

    Any thoughts? (if you could email me I’d appriciate it)

  8. Andrea Ercolino says:

    @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.

  9. Max says:

    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 );
    }

  10. Andrea Ercolino says:

    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.

  11. Felipe says:

    Is there any luck to see this (fairly complicated) example nicely highlighted?
    http://planetozh.com/blog/2007/06/text-editors-for-coders-deathmatch-review/

  12. Andrea Ercolino says:

    I’ll try when I’ll be back at work, promise.

  13. Tom says:

    Can Chili be used to display XML content ?

    Regards,
    Tom

  14. Jeff says:

    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?

  15. Daniel says:

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

    #this_is_valid

    #this-is-also-valid

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

    Great script anyways! I’m loving it.

    Cheers

  16. Nick says:

    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? :-)

    Cheers!

  17. Travis says:

    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”.

  18. Mat says:

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

  19. Roy Calvo says:

    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?

  20. Jim Bancroft says:

    Since I didn’t see it already done anywhere else on the net, I created a couple of recipes that Flex developers might find useful for highlighting MXML and ActionScript code. I wrote a blog post w/ links to the recipes at the following URL:
    http://jamesbancroft.homeip.net/?p=48

  21. Kevin Bayes says:

    I have made an xml syntax highlighter for chili. Does the job for what I need and I am happy to share it. You can find it at http://blog.bayestech.com/post/jQuery-Chili-xml-support-plugin.aspx
    Just let me know if there are any other features of xml you would like support for.

  22. ruvan says:

    where to get js class for perl

  23. Kiswono Prayogo says:

    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'
    );
    } )
    .show()
    ;
    } );

    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
    Regards,
    Kiswono P
    GB

  24. Craig says:

    I have just integrated this into a project and it is awesome.

  25. 123doing says:

    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.

  26. Jessica says:

    “Renders identically on IE, Firefox, Mozilla, Opera, and Safari”

    I’m seeing very different results in IE6 and Firefox.
    IE6: http://tinypic.com/r/315ixw8/4
    Fx: http://tinypic.com/r/2r4r05j/4

  27. Fred van der Windt says:

    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.

  28. Andrea Ercolino says:

    @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.

84 Pings/Trackbacks for "Chili NEXT"
  1. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  2. [...] Notes Log » Chili 1.9 Chili is the jQuery code highlighter plugin. (tags: javascript jquery syntax highlighter) [...]

  3. [...] hacerlo automáticamente es muy fácil, solo hay que utilizar la librería para jQuery llamada Chili y entre las características que tiene [...]

  4. [...] Ercolino による Chili と呼ばれる jQuery [...]

  5. [...] Chili és un plugin de JQuery que permet colorejar diferents sintaxis. [...]

  6. [...] Chilli source highlighter [...]

  7. [...] like the idea of syntax coloring, so let’s see if Chili [...]

  8. [...] I found Chili which is a jQuery plugin. I’ve been looking for something like this for quite some time. The [...]

  9. [...] The Help Authoring Tool Help and Manual 5 contains a syntax highlighting system for a limited number of programming languages, but it does not currently support languages like PHP or JavaScript, and new languages cannot be added by the end user. Fortunately, you can add this functionality to Help and Manual output by using the JavaScript library jQuery, and the associated syntax highlighter Chili. [...]

  10. [...] ???????????????? Notes Log – Chili 2.2 [...]

  11. [...] ?????????? JS-????????? jQuery 1.2.6 (? ???????? Chili 2.2) ? IE PNG Fix v2.0 Alpha. CSS-????? ???????? ?? Tripoli, ?????????? [...]

  12. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  13. [...] quickly realized that Chili was the way to go to give some very nice highlighting of the code. After searching around for the [...]

  14. [...] Chili jQuery code highlighter plugin [...]

  15. [...] ??? ?????????? Chili ? ???????????? ????? ?????? ? jQuery. ?.?. ? ?????? ?????? [...]

  16. [...] jQuery (c ???????? Chili) ? PNG Alpha Fix v2.0 Alpha (? Background Tiling [...]

  17. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  18. [...] ?????????????JQuery????????????Chili????????????????????????????????? [...]

  19. WP Chili says:

    [...] …   Easy code highlighting for WordPress with Chili (the bundled version is 2.2): …..read more Download Plugin! Version 1.1 Last Updated: July 24, 2008 [...]

  20. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  21. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  22. [...] Chili jQuery code highlighter plugin [...]

  23. [...] Chili jQuery code highlighter plugin [...]

  24. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  25. [...] enough for him, it’s good enough for me” I decided to use the same plugin Chris settled on: Chili. You can see the results for yourself. However, although I’m fairly pleased with the end product, [...]

  26. [...] this first tutorial you will see how to highlight source code with the help of the jQuery Plugin Chili. Since this is not just another Chili Quick Start Guide we go further and tweak Chili to our liking [...]

  27. [...] is the original post: Notes Log " Chili 2.2 Share and [...]

  28. [...] that I made is that I switched from using the syntax gem for my syntax highlighting to using the Chili plugin for jQuery. The main reasons for this change are that the Chili seems to be under more [...]

  29. [...] Chili 2.2 : Chili is a jQuery code syntax highlighting plugin. It comes bundled with recipes for a lot of languages and supports many configuration options. This is Very fast highlighting, trivial setup, fully customizable, thoroughly documented, and MIT licensed. [...]

  30. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  31. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  32. [...] I’ve previously mentioned that I use jQuery chili for syntax highlighting on my blog. This simple jQuery plugin provides a very simple mechanism for [...]

  33. [...] Chili is a fully customizable and fast JQuery Code Highlighter Plugin that comes bundled with recipes for C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, and XHTML. [...]

  34. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  35. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  36. [...] 4. Chili (????) [...]

  37. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  38. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  39. [...] ???????????html?parser?????200?????????perl?????????? ????????jquery??Chili???????????????????haskell??? [...]

  40. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  41. [...] ???????????html?parser?????200?????????perl?????????? ????????jquery??Chili???????????????????haskell??? [...]

  42. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  43. [...] Chili jQuery code highlighter plugin [...]

  44. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  45. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  46. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  47. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  48. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  49. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  50. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  51. [...] page with chili syntax highlighter for your code Share this [...]

  52. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  53. [...] eklentisi olarak yaz?lm?? Chili ile sayfan?zda ziyaretçilerinize gösterdi?iniz HTML kodlar?n?n renklenerek daha güzel ve [...]

  54. [...] Notes Log » Chili NEXT – October 26th ( tags: jquery javascript syntax plugin highlight code highlighting plugins chili ) [...]

  55. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  56. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  57. [...] The look and feel is vastly improved by using jQuery.UI, albeit in beta (I did make one small patch, which appears to be fixed in the upcoming code base.) I also did some source-code formatting with Chili. [...]

  58. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  59. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  60. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  61. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  62. [...] I’ve enabled syntax highlighting on this site using the very tidy Chili. [...]

  63. [...] preview. pager jQuery Plugin. shortKeys jQuery Plugin. jQuery Biggerlink. jQuery Ajax Link Checker. Chili jQuery code highlighter plugin. [...]

  64. [...] code highlighting for WordPress with Chili (the bundled version is [...]

  65. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  66. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

  67. [...] Chili jQuery code highlighter plugin. [...]

  68. [...] preview pager jQuery Plugin shortKeys jQuery Plugin jQuery Biggerlink jQuery Ajax Link Checker Chili jQuery code highlighter plugin [...]

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>