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:

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.

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:

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

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.

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!

Share this:

Back to Top

Comment on this post

Required fields are marked with *.

Name (displayed): *
Email (not displayed): *
What is 2 plus 2? (to verify that you're a person)? *
Subject:
Comment: *

Back to Top