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
- Chili at GitHub
- Chili Examples
- Chili 2.2 Release Post
- Google Code project page
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
- Chili, resaltador de sintaxis – Scriptia
- webdev – Testing Enzymes & Chili
- jQuery – Syntax Highlighting
- bassistance.de » Plugin Parade #4: Chili
- Jetlogs.org » Syntax Highlightling with Chili
- Javascript Code Highlighter: Chili vs SyntaxHighlighter :: PseudoCoder.com
- ¿Sabes cómo se hace?: ¿Resaltar sintaxis de codigo en mi pagina o blog?
- Chili – コードãƒã‚¤ãƒ©ã‚¤ãƒˆJavascript | Takazudo Clipping*
- Beautify your blog’s code samples with these syntax highlighters
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!
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
<?phpand?>in order to get it to highlight. I guess it should assume the code is PHP unless the PHP tags are inside the paste.@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.
@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:
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.
@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.
@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)
@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.
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 );
}
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.
Is there any luck to see this (fairly complicated) example nicely highlighted?
http://planetozh.com/blog/2007/06/text-editors-for-coders-deathmatch-review/
I’ll try when I’ll be back at work, promise.
Can Chili be used to display XML content ?
Regards,
Tom
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?
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
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!
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”.
NeatHighlighter.com is a code highlighter with feature to highlight code which is mixture of different languages
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?
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
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.
where to get js class for perl
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
I have just integrated this into a project and it is awesome.
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.
“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
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.
@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.