Here at Imulus we’re massive fans of jQuery. We use it on a lot of our projects. We’re also fans of TextMate, an awesome text editor produced by the folks at MacroMates. Over the last few years we’ve refined our TextMate bundles (code highlighting and language recognition packages) to work ideally within the Imulus process.

So, during my recent love affair with jQuery I’ve heavily relied on their documentation section to look up specific functions and commands. And while their documentation is awesome, it’s still a slow process. Luckily, an awesome guy named Karl Swedberg has put together a beautiful jQuery bundle for TextMate that has tons of snippets for common jQuery tasks. And, it’s free!

Installation

Head over to GitHub and grab the lastest version of the bundle. When you download it you’ll get a weird filename like this:

kswedberg-jquery-tmbundle-b0622e4f889112c37e03400a6a3e63241ab29c31.zip

Unzip the file and change the folder name (which is the same as above) to:

jquery.tmbundle

Open up TextMate and then double click the jQuery bundle file you’ve just created. Boom! The bundle is installed.

Making it work within HTML documents

By default the jQuery bundle is set to only work within .js files. However, if you’re planning on using it within HTML pages you’ll need to do another few steps of work. First, copy the following code to your clipboard:

{    name = 'source.js.jquery.embedded.html';
            begin = '(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)';
            end = '(?<=</(script|SCRIPT))(>)(?:\s*\n)?';
            beginCaptures = {
                1 = { name = 'punctuation.definition.tag.html'; };
                2 = { name = 'entity.name.tag.script.html'; };
            };
            endCaptures = { 2 = { name = 'punctuation.definition.tag.html'; }; };
            patterns = (
                {    include = '#tag-stuff'; },
                {    begin = '(?<!</(?:script|SCRIPT))(>)';
                    end = '(</)((?i:script))';
                    captures = {
                        1 = { name = 'punctuation.definition.tag.html'; };
                        2 = { name = 'entity.name.tag.script.html'; };
                    };
                    patterns = (
                        {    name = 'comment.line.double-slash.js';
                            match = '(//).*?((?=</script)|$\n?)';
                            captures = { 1 = { name = 'punctuation.definition.comment.js'; }; };
                        },
                        {    name = 'comment.block.js';
                            begin = '/\*';
                            end = '\*/|(?=</script)';
                            captures = { 0 = { name = 'punctuation.definition.comment.js'; }; };
                        },
                        {    include = '#php'; },
                        {    include = 'source.js'; },
                    );
                },
            );
        },

Then open up the TextMate bundle editor and drop down the HTML arrow.

You should now see a huge list of snippets, commands, and preferences. Located in this list is an HTML language icon, it looks like this . Once this is selected you should see a large amount of code to the right. Paste the above code directly in the following position after patterns = (

That’s it, you’re done. How you can access tons of jQuery snippets and code examples directly inside TextMate.

Update: We’ve had a couple people ask about how to activate jQuery highlighting once you have it installed in TextMate. I threw together a quick video below to show this. However, to clarify, the general gist is making sure you select jquery in the bundle list instead of javascript, and in the HTML code view making sure you are inside of a script tag. Here’s the video to help clarify: