During my research on doing AJAX with JQuery, I have encountered a very wonderful tool for highlighting code snippets in HTML. For those who still don’t know, Chili is a syntax highlighting tool based on JQuery. What’s great about this library is that you don’t need to hassle yourself in setting up any scripts and stylesheets. All you need to do is upload the chili plugin to a folder to your web directory of choice, and import the javascript files by inserting this sample code within your site’s <head> element. Here is the code taken from Chili’s manual:
<script type="text/javascript" src="chili/jquery-1.1.2.pack.js"></script>
<script type="text/javascript" src="chili/metaobjects-1.3.js"></script>
<script type="text/javascript" src="chili/chili-1.7b.pack.js"></script>
<!-- Chili settings for a dynamic setup -->
<script type="text/javascript">
ChiliBook.recipeFolder = "chili/";
ChiliBook.stylesheetFolder = "chili/";
</script>
and from now on, any source codes within a <code> tag will automatically be highlighted, provided you enter the language appropriate for the selection
<pre>
<code class="html">
<!--Sample code snippet goes here-->
</code>
</pre>
Currently, Chili supports the following languages: C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, and XHTML
I hope to expect that Chili may have an option to highlight Python code in the next release. All of my programming articles have been upgraded to have syntax highlighting. So feel free to visit these articles:
- JQuery Tutorial: Passing Input Arrays
- Proper Use of References in PHP
- Avoiding Google Hell in Wordpress
- PHP, Regex, and E-mail security
- MySQL divided by Zero
1 Comment
