bassistance.de

See http://noteslog.com/category/chili/

One of the most interesting and useful jQuery plugins for a developer posting code snippets on the web is Chili. Chilli stands for “code highlighter”, is written and maintained by Andrea Ercolino and published under the MIT opensource license.

To use the plugin, you need to include the plugin itself and all the recipse you’d like to use. A recipe consists of JavaScript to parse code and add elements and classes and some CSS to format that code. Version 1.8 is delivered with recipse for C++, C#, CSS, Delphi, HTML, Java, JavaScript, Lotusscript (lo and behold), Mysql (I guess SQL with MySQL specifc extensions) and PHP. More details and lots of example can be found in the Chili manual.

You should chose which recipse you need on your side and include both .js and .css files. On this site I’ve added recipes for Java, HTML, CSS and JavaScript, packing all recipse together with jQuery and plugins and putting the recipes CSS into my main stylesheet. It’s a bit work, but a one-trime process, and definitely worth the trouble, because:

Once you have Chili loaded, it does its work in the background, at least that is the mode I prefer. When I post some snippet of code, I just have to add a class=”css” to the code-element to get Chili do its work. For example:

<pre><code class="html">some html</code></pre>

If I’d use class=”css” instead, the outcome would be different:

<pre><code class="css">some html</code></pre>

Chili still recognizes “pre” and “code” as keywords and “css” as a string, but uses a different classes and styles.

For reference, I use this CSS to format pre and code elements:

pre code {
	display: block;
	padding: 5px;
	background-color: #eee;
	border: 1px solid #d3d3d6;
	border-left-width: 5px;
	white-space: pre;
	overflow-x: auto;
	width: 98%;
}
code {
	color: #666;
	font-family: 'lucida console', 'Courier New', monospace;
	font-size: 0.9em;
	font-size: 1em;
}

Again nicely fomatted thanks to Chili.

Coming up next on this series of the plugin parade: Masked input plugin.