Please accept our apologies – due to high winds in the area, IDM is experiencing service outages and cannot currently receive phone calls. If you're trying to reach our sales team, please be sure to send us an email.

Home » Company » Blog » Community » Zen Coding

Zen Coding: The ultimate time-saver...

Andy Boyd, IDM
Marketing Manager

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:

div#content>h1+p

to this:

<div id="content">
<h1></h1>
<p></p>
</div>

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:

http://code.google.com/

or from our scripts:

http://www.ultraedit.com/files/scripts/ZenHTMLUltraEdit.js

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

Comment on this post

Required fields are marked with *.


Back to Top