Speed up HTML markup in Netbeans with Zen Coding

Published February 27, 2010
Filed under

My friend Derek shared a link about Zen Coding a month ago which I finally made time to look at this morning. Zen Coding is a plugin designed to supercharge your HTML markup and CSS coding and it's available for several IDEs and text editors. I watched the available screencasts and gave it a try this morning. It's remarkable what you can do with it.

Although the NetBeans version of Zen Coding doesn't provide CSS support and is missing many of the HTML features available in other versions of the plugin, it's still worth an install. Alexander Makarov created the NetBeans version of the plugin and provides basic instructions in Russian. After translating the instructions and a bit of trial and error, I was able to get the basics workings. Here's how to install and use it for NetBeans for OS X.

Install

  1. Download NetBeans Zen HTML, version 1.2 at the writing of this post.
  2. Move the downloaded package to your .netbeans directory and unpack. Replace the 6.8 directories in the commands below to match your NetBeans version.

% mv NetBeans.Zen.HTML.1.2.zip ~/.netbeans/6.8 
% cd ~/.netbeans/6.8 
% unzip NetBeans.Zen.HTML.1.2.zip

Use

NetBeans already provides HTML tag completion for individual opening and closing tags.

Native NetBeans HTML tag autocomplete

Zen Coding inserts both the opening and closing tags with a keystroke. The tab key triggers Zen Coding's HTML autocomplete magic by inserting both the opening and closing tags. Note the standard NetBeans red box targets to enter text or attribute values. Use the tab key to move between the boxes and hit enter when you're done with an entry.

Basic zen-coding NetBeans example

Inserting anchors and their URLs is a breeze.

Insert anchor zen-coding NetBeans example

Markup existing text quickly, just select and hit ctrl+Enter or Return.

Markup existing text blocks with zen-coding for Netbeans

You can also insert class, id, and style attributes with the
following keystrokes:

  • ctrl+2 = class
  • ctrl+3 = id
  • ctrl+4
    = style

Insert attributes with zen-coding for Netbeans

Note that attribute insertion is a bit quirky. I found it easier to insert a tag, hit the tab key, position my cursor in
the opening tag (i.e. <tag|>), and then insert the attribute.

I highly recommend this plugin. The Netbeans version only implements a portion of what the plugin is capable of in other editors. I'm going to give it a whirl with Textmate next!

Related Links

Share