Zen Coding and Notepad++ - Quick and easy

Ever had the situation where you want to try out something new and cool, but before doing that you have go through the boring HTML mark ups. Happens with me every time when I want to try something in jQuery. All those divs, the ul and lis can sometime become very irritating.

With Zen Coding, now you can set those markups very quickly and easily. What more, you can even assign classes and ids to the elements. And all this inside my most loved text editor “Notepad ++”.

So, what does Zen Coding does? To explain this, here is my requirement: A ul with an id as navigation, then 5 li with class “menu-item” and inside those list items, div tags with class “container”. Easy but a long sequence of markup, isn't it?

With Zen Coding: Actually no. Here is all that you need:
ul#navigation>li.menu-item*5>div.container

Yes... it will create the following output

	<ul id="navigation">
		<li class="menu-item">
			<div class="container"></div>
		</li>
		<li class="menu-item">
			<div class="container"></div>
		</li>
		<li class="menu-item">
			<div class="container"></div>
		</li>
		<li class="menu-item">
			<div class="container"></div>
		</li>
		<li class="menu-item">
			<div class="container"></div>
		</li>
	</ul>

So to get this thing with Notepad++ you just need to install Zen Coding – Python plugin for Notepad++ which you will find as the last option. Once installed you will need to restart the software and it will show up with its options in drop down. Here is my screenshot

The Zen Coding dropdown menu

After that, you just need to type this line:
ul#navigation>li.menu-item*5>div.container

Press Ctrl + Alt + Enter (Windows) and you will get the HTML markup just like that.

And here is the list of shorthands that is available for this plugin project.

Before:

Zen Coding shorthand

And after:

The full markup with Zen Coding in Notepad++