Zen Coding: The ultimate time-saver...

Recently, I was introduced to the concept of Zen Coding. I don't do a whole lot of HTML coding, but I have to admit this is a great idea! What is Zen Coding?

For HTML coders, this could be the ultimate time-saver...

Zen coding is a high-speed method of coding HTML/CSS (learn more here). It allows you to generate HTML tags using css style selectors.

So, with Zen Coding, you can quickly go from this:


to this:

<div id="content">

One of our forum members developed a script to use the Zen Coding methodolgy in UltraEdit, so we want to share this with the UE community. How do you use it? Keep reading...

Step 1: Download the script

First, download and save the Zen Coding script from:


or from our scripts:


Step 2: Install the script

Go to Scripting : Scripts, then add the ZenHTMLUltraEdit.js script to your Scripts list.

Zen Coding

Step 3: Type your shorthand code

Type your shorthand using your CSS like selectors. The example used in the article is: div#content>h1+p:

Zen Coding

Now, select the code, and run the script; here is the result:

Zen Coding

For added convenience, you can assign a hotkey to the ZenHTMLUltraEdit.js script. Go to Scripting : Scripts, double-click in the Hotkey field, and create a hotkey.

Zen Coding

Update (March 29, 2011)

One of our users has written a Zen Coding script for PHP in UltraEdit/UEStudio. You can get that script at GitHub or from our site here.

Got a tip or trick you want to share? Let us know!

Back to Top